在中国如何开发uni-app？下面这篇文章给大家分享一下国内开发uni-app的教程。这可能是最好、最详细的教程。快来看看吧！

我们将使用 uni-app 来创建项目。与X不同，uni-app通过脚手架创建项目。为什么我应该使用uni-app？可能我还是不太习惯X等，不想换开发工具。我感觉前端开发一个就够了，不需要比较哪个好哪个差。喜欢哪个就用哪个，这里就不多说了。 【推荐学习：《入门教程》】

我也在几个uni-app项目上使用过，主要是写小程序，整体体验非常好。

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

可以说开发uni-app的缺点已经基本解决了，还有很多地方我觉得体验更好。

文章比较长，写的比较详细，即使是新手也能看懂。

初始化项目

我们以使用vue2创建项目为例。 uni-app的Vue2版本有很多组件库和插件，稳定，问题少。可以先参考官方文档：

由于您使用的是vue脚手架，因此必须全局安装@vue/cli。如果您已经安装过，则可以跳过它。

注意：对于Vue2创建的项目，脚手架版本必须使用版本@4。如果运行版本@5的项目，会报错。这里推荐@4.5.15。

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

vue -p /uni--vue

这里我们选择默认的模板。

打开这个项目后，可以看一下整个项目结构。 src下的项目结构与创建的根目录基本相同，说明两个项目转换还是比较方便的。

提示：由于是Vue2项目，并且有scss文件，所以必须安装sass和sass这两个插件。还有人还没有安装过吗？

.json报错问题

创建.json配置文件时，会自动检测当前项目中是否存在ts文件。如果没有，就会报错，提示用户先创建一个ts文件再使用。其实就算报红报，运行项目是没有问题的，但是有强迫症的人肯定受不了，不可能一直看着报错。

解决办法很简单，只要在项目根目录下创建一个ts文件，什么都不写，然后在.json中配置即可。

我们在项目根目录下新建一个.ts，意思是，哈哈，你可以随意命名。

.json：

“”：{

"": ["@/", "-api-", "mini-"]

},

“”：[“.ts”]

增强 .json 和 .json 开发体验以在 json 文件上编写注释

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

解决方案：我们将.json和.json这两个文件关联起来，然后写注释。在设置中打开 .json 并添加：

不要将json中的所有json文件关联起来。你感觉可以用json写注释，感觉比较好用。其实json就是json，就是两者是不同的。例如，如果你在.json中写注释时不会报错，但是编译时仍然会报错，因为.json中不能写注释。

语法提示

很多人刚开始使用uni-app的时候，直接被劝退了，因为.json没有任何语法提示。一开始我几乎灰心丧气，但经过我的不懈努力，终于解决了问题。

其实已经有第三方插件提供语法提示和简单验证，体验也相当不错。

鼠标悬停的时候还有提示，还是比较贴心的。

色块显示

json文件不会显示与css中相同的颜色块，但是有一个插件可以帮助我们做到这一点。

当然，我们需要对这个插件进行配置才能更好的使用。

"-.": true, // 启用插件

// 色块的样式。这里我选择了一个和CSS中类似的色块。只需选择您喜欢的即可。

"-.": "点-",

// 该插件工作的语言，仅此设置生效

“-.”：[“”]，

// 是否在旁边的滚动条中显示颜色。我个人觉得不太好看，所以关掉了。

“-.”: ,

// 是否匹配单词，例如，

“-.”: ,

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

然后就是如何快速创建页面、组件、分包。那么推荐下面这个插件，支持一键创建和添加json。

条件编译注释高亮

X条件注释被高亮显示以区别普通注释，并且有相应的插件来实现。不得不说X的生态真的很棒，你需要的插件都有。

这个插件可以自定义我们的注释，比如颜色、粗细、斜体，任何让它们看起来好看的东西。

10

11

“-.标签”：[

“标签”： ”＃”，

“”：“#”，

“”：，

“”：，

“”：“”，

“大胆”：真实，

“”：

},

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

使用Vue2创建的uni-app的cli项目默认安装了相应的Api语法提示，并且已经默认配置在.json中。有以下三种：

组件提示

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

npm 我@/uni--json

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

uni.scss变量提示

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

npm 我 sass sass-@10 -D

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

运行并发布项目

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

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

不同于

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

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

然后就可以愉快的写代码了。无论是运行项目还是差分编译，速度还是很快的。

使用vue3创建项目

游宇熙宣布Vue 3将于2022年2月7日成为新的默认版本，但uni-app对应的Vue3版本的组件库和插件还有些欠缺。

使用 Vue3 创建项目与 Vue2 略有不同。 Vue3创建的项目使用Vite。有一件事要说的是，Vite 确实很快。初始化项目时存在一些陷阱。我们就在这里说说吧。

一开始就卡住了，没能进入仓库。官方文档也提到了解决方案。读完后，我刚刚更新了@/uvm。

npx@/uvm

然后再试一下就没有问题了。这里以模板为例。

npx /uni--vue#vite

另一个陷阱是，Vue3 创建的项目默认不安装 API 语法提示依赖项，因此我们需要手动安装它们，然后在 .json 中配置它们。

npm i @/-api- mini- -D

有一个尤玉溪团队专门为Vue3打造的插件。写Vue3的时候就可以用它。与Vite结合起来，开发体验确实不错。我这里就不详细说了。

插件市场的使用

不能像Yes那样一键导入插件，然后下载对应的zip包放入项目中。这种类型通常有两个版本。我们选择非版本的，比如。

这个确实不如X方便，但是导入第三方插件并不经常做，所以还是可以接受的。

插件推荐

然后我推荐几个非常实用的插件来帮助我们提高开发效率。

将鼠标悬停在预览图像上。

".tter": ,//关闭行号中显示缩略图

这个插件可以帮助我们配置路径别名和路径智能。

“小路-。”： {

"@": "${}/src/",

"": "${}/src/"

},

还有组件库语法提示和代码块两个插件。大家可以根据自己的需要来安装，这里不再赘述。

结论

我在仓库建了一个模板项目，大家可以参考：uni--。

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

因为uni-app项目与其他前端项目有很大不同，所以我还是建议为uni-app项目创建一个单独的工作区。关于工作区的概念，你可以阅读我的这篇文章：工作区指南：回归轻量级，创建一个万能编辑器。

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