当 uni-app 遇见 vscode，我该如何让它臣服

前言

uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架，官方推荐的开发工具为 HBuilderX，使用起来有很好的开发体验。

不过，由于 HBuilderX 没有 Linux 版以及一些不为人知的秘密，想要使用 vs code。如果直接使用 vscode 开发 uni-app，其体验并不是很好，但是碰上了神通广大的我们，必须要让他臣服。

其实 uni-app 和 vscode 也可以很搭，接下来为各位小伙伴带来 vscode 中 uni-app 的正确打开姿势。

使用

一、CLI 工程

1. 全局安装 vue-cli（如已安装请跳过此步骤）

   npm install -g @vue/cli
   

2. 通过 CLI 创建 uni-app 项目

   vue create -p dcloudio/uni-preset-vue my-project
   

   注意：项目名不允许出现大写

   此时，会提示选择 uni-app 模板，初次体验建议选择 Hello uni-app 项目模板，如下所示：
   
   自定义模板：
   选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 userName/repositoryName，如 dcloudio/uni-template-picture 就是下载图片模板。

3. 创建好之后就会出现如下内容：

   �  Successfully created project my-project.
   �  Get started with the following commands:
   
    $ cd my-project
    $ yarn serve
   

二、在 vscode 中打开项目

安装插件

1. 安装 vue 语法提示插件 vetur
   

2. CLI 工程默认带了 uni-app 语法提示和 5+App 语法提示
   

3. 安装组件语法提示（组件语法提示是uni-app的亮点，其他框架很少能提供。）

   npm i @dcloudio/uni-helper-json
   

   

导入 HBuilderX 自带的代码块

从 github 下载 uni-app 代码块，放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。

三、运行项目

npm run dev:%PLATFORM%

四、发布项目

npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

值	平台
h5	H5
mp-weixin	微信小程序
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-toutiao	头条小程序
mp-qq	qq 小程序

---

CLI 方式参考文档

HBuilderX 方式官网已经讲的很详细了。

---

希望大家使用起来可以更加得心应手。有任何问题欢迎留言讨论。