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

前言

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

不过，因为 HBuilderX 没有 Linux 版以及一些鲜为人知的秘密，想要使用 vs code。若是直接使用 vscode 开发 uni-app，其体验并非很好，可是碰上了神通广大的咱们，必需要让他臣服。

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

使用

1、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
   复制代码

2、在 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 同样的代码块。

3、运行项目

npm run dev: %PLATFORM%
复制代码

4、发布项目

npm run build: %PLATFORM%
复制代码

%PLATFORM% 可取值以下：

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

---

CLI 方式参考文档

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

---

但愿你们使用起来能够更加驾轻就熟。有任何问题欢迎留言讨论。