开始

我们会用到uni-app，它和X不一样，它使用脚手架来创建项目。为什么我用uni-app呢？可能是我不习惯X，也可能是不想换开发工具，我觉得做前端开发用一个就够了，没必要去比较哪个好哪个差，喜欢哪个就用哪个，这里就不细说了。

我也用它做过几个uni-app的项目，主要写一些小程序，整体体验非常好。

简单描述一下本教程能给uni-app开发带来的体验

可以说，对uni-app开发的抱怨已经基本得到解决，而且感觉很多地方的体验更加好了。

文章很长，写得很详细，即使是新手也能看懂。

初始化项目

我们以vue2为例创建项目，uni-app中针对vue2的组件库和插件比较多，比较稳定，问题较少，可以先参考官方文档：

由于你使用的是 vue 脚手架，所以必须全局安装 @vue/cli。如果你已经安装了，可以跳过。

注意：使用 Vue2 创建的项目，脚手架版本必须是@4，使用@5 运行项目会报错，建议使用@4.5.15。

npm install -g @vue/cli@4.5.15

创建一个项目，后跟您的项目名称。

vue create -p dcloudio/uni-preset-vue uni_vue2_cli

这里我们选择默认模板。

打开这个项目之后可以看一下整个项目结构，src下的项目结构和创建的根目录基本一致，也就是说两个项目之间的转换比较方便。

提示：因为是Vue2项目，有scss文件，所以必须安装这两个插件和sass，希望还没人安装。

.json 错误问题

2022.09 更新：

之前评论区有人提到过这个问题，好久没写博客了，这篇博客开了5个月，收获了不少点赞和收藏，谢谢大家的支持！

但是这个教程已经跟不上变化了，所以我需要更新这个教程，现在开发uni-app的体验比以前好了。

目前通过 vue-cli 命令行创建的项目已经不再只是 .json 了，只有使用 ts 的项目才会是 .json，否则都是 .json。所以这个问题已经不存在了。

增强.json和.json开发体验。在json文件中写注释

我们打开.json和.json的时候发现会报红，这是因为json里不能写注释，但是.json里可以写注释。

解决办法：我们将.json和.json两个文件关联到，然后就可以写注释了。在设置里打开.json，添加：

千万不要把所有的json文件都和.json联系起来，你觉得json可以写注释，用起来更方便，其实json就是json，这两个是不一样的，比如你在.json写注释不会报错，但是编译的时候还是会报错，因为.json不能写注释。

语法提示

可以为.json、.json等提供语法提示和验证，如果不使用这个插件的话体验会大打折扣，这也是我觉得开发uni-app时必须要安装的一个插件。

而且鼠标悬停的时候还有提示，很贴心。

内联颜色修饰符

2022.09 更新：

我偶然发现可以在 json 文件中显示内置的内联颜色修饰符，并且我向插件作者提了建议。

，目前uni-app-已经可以支持在.json和其他json中显示内联颜色修饰符和颜色选择器！

也欢迎大家一起来完善它：uni-。该作者开发了很多与uni-app相关的包和插件。

之前我是推荐使用这个插件辅助使用的，现在这个已经没有必要了，内置的色彩修改器显然提供了更好的体验。

路径提示

安装这个插件，感觉比内置的要好用，如果不用的话，.json等json文件中就无法使用路径提示

如果你使用这个插件，建议关闭默认的自动完成功能

"typescript.suggest.paths": false "javascript.suggest.paths": false

并且在..json中配置项目的根路径和路径别名，这样也可以让你知道路径别名和跳转。当然你也可以使用插件的全局配置path-.，使用其中一个就行，推荐使用.json。

.json 文件

{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] }, "types": ["@dcloudio/types", "miniprogram-api-typings", "mini-types"] } }

那我给大家推荐一款超级实用的插件：可以通过鼠标悬停来预览图片。

"gutterpreview.showImagePreviewOnGutter": false,// 关闭在行号中显示缩列图

最终效果

一键创建页面、组件和子包

那么问题来了，如何快速创建页面、组件、分包呢，我给大家推荐下面这个插件，支持一键创建并添加到json中。

条件编译注释突出显示

将X条件注释高亮显示，以区别于普通注释，并且有相应的插件实现，不得不说生态真的很棒，各种各样的插件都有。

2022.09 更新：

注意：目前该插件还无法使用，希望后续能修复该问题。

这个插件可以自定义我们的注释，比如颜色，粗体，斜体，只要好看就行。

"better-comments.tags":[ { "tag": "#", "color": "#18b566", "strikethrough": false, "underline": false, "backgroundColor": "transparent", "bold": true, "italic": false }, ]

API、组件、uni.scss 语法提示 API 语法提示

使用Vue2创建的uni-app的cli项目，已经默认安装了对应的Api语法提示，在..json中已经默认配置好了，一共有三项：

组件提示

接下来是组件语法提示，如，和其他uni-app原生组件，需要我们手动安装相应的依赖包。

npm i @dcloudio/uni-helper-json

2022.09 更新：

如果你使用的是vue3，那么可以使用uni-app-包，因为@/uni--json不支持vue3。

npm i -D uni-app-types

然后在 ..json 配置中，确保包含了相应的 vue 文件。

{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] }, "types": ["@dcloudio/types", "uni-app-types"] }, "vueCompilerOptions": { "experimentalRuntimeMode": "runtime-uni-app" }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] }

如果要使用uni-ui等，可以安装uni--、uni-ui-等。

还有其他的，你可以去这个大学看看。

如果你觉得还不够好，你也可以安装第三方插件，提供和X一样的代码块。推荐插件：uni-app-，小程序扩展。

uni.scss 变量提示

注意：cli创建的uni-app项目和web项目一样，在编写scss之前需要安装相应的sass模块，安装sass-，建议使用@10版本，否则可能造成vue与sass的兼容性问题，导致错误。

npm i sass sass-loader@10 -D

安装 SCSS 插件以提示您输入项目中 scss 文件中定义的变量。

运行并发布项目

对应的命令在.json里，你可以自行查看。

例如：运行到微信小程序的命令：npm run dev:mp-

发现命令还是挺长的，其实还有更简单的方式，支持一键运行npm ，我们以微信小程序为例。

与x不同的是，项目不会在微信开发者工具中自动导入打开，需要我们手动导入项目，只需要导入一次，之后就可以直接打开微信开发者工具了。

需要注意的是，微信小程序需要在.json中进行配置，否则微信开发者工具会报错。

在微信开发者工具中导入打包后的文件夹。

然后你就可以开心的写代码了，不管是运行项目还是差分编译，速度还是很快的。

使用vue3创建项目

余宇熙宣布 Vue 3 将于 2022 年 2 月 7 日成为新的默认版本，但目前与 对应的 Vue3 组件库和插件太少，生态尚未成熟，容易遇到问题，不建议直接用于业务。

使用 Vue3 创建项目与使用 Vue2 有点不同。使用 Vue3 创建的项目使用 vite。说实话，vite 确实很快。我在初始化项目时遇到了一些陷阱，在这里说一下。

我一开始也是卡住了，无法访问仓库，官方文档里也提到了解决办法，看了一下发现是更新@/uvm。

npx @dcloudio/uvm

然后重试就不会有问题了。下面是模板的示例

npx degit dcloudio/uni-preset-vue#vite uni_vue3_cli

还有一个坑，就是Vue3创建的项目默认没有安装API语法提示依赖，所以需要我们手动安装，然后在.json中进行配置。

npm i @dcloudio/types miniprogram-api-typings mini-types -D

有游宇熙团队专门为 Vue3 做的插件，写 Vue3 的时候用一下就行，结合 Vite 开发体验确实不错，这里就不多说了。

插件市场的使用

不能像X一样一键导入插件，一般用cli创建的项目使用插件有两种方式，第一种支持npm安装，所以最好使用npm，比如 。另一种不支持npm安装，所以下载对应的zip压缩包放到项目中，这种类型一般有两个版本，我们选择无版本的，比如 。

这个确实没有X那么方便，不过因为导入第三方插件不是经常做的事情，所以这个还是可以接受的。

结论

2022.09 更新：

目前仓库已经同步了最新的官方uni-app cli模板，另外我还上传了vue3+vite+ts版本，可以作为学习参考的示例。

仓库地址：uni--。

总的来说，配置还是比较麻烦，插件也比较多，不过最终的体验还是很好的。

因为uni-app项目和其他前端项目还是有比较大区别的，所以我还是建议给uni-app项目单独做一个工作区，关于工作区的概念可以看我的文章：工作区指南：回归轻量，打造全能编辑器。

换句话说，为每个项目创建一个单独的.json。

感谢您阅读本文。希望对您有所帮助。如果您有任何疑问或有自己的实用技巧，请随时在评论部分分享和讨论。

创作不容易，希望大家可以点赞支持我❤️❤️。

相关参考：