vscode创建uni-app项目

小鱼儿 2023-03-13 02:13 24阅读 0赞

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

不过，由于 HBuilderX 没有 Linux 版以及很多前端之前已经习惯了 vscode，不想更换编辑器。直接使用 vscode 开发 uni-app，其体验并不是很好。

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

## CLI 工程 ##

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

复制代码npm install -g @vue/cli

### 通过 CLI 创建 uni-app 项目 ###

复制代码vue create -p dcloudio/uni-preset-vue my-project

此时，会提示选择项目模板，初次体验建议选择 `hello uni-app` 项目模板，如下所示：

安装vue语法提示插件vetur

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

### 安装组件语法提示 ###

组件语法提示是uni-app的亮点，其他框架很少能提供。

复制代码npm i @dcloudio/uni-helper-json

### 导入 HBuilderX 自带的代码块 ###

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

### 运行项目 ###

复制代码npm run dev:%PLATFORM%

### 发布项目 ###

复制代码npm run build:%PLATFORM%

`%PLATFORM%` 可取值如下：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>平台</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>h5</td> 
   <td>H5</td> 
  </tr> 
  <tr> 
   <td>mp-alipay</td> 
   <td>支付宝小程序</td> 
  </tr> 
  <tr> 
   <td>mp-baidu</td> 
   <td>百度小程序</td> 
  </tr> 
  <tr> 
   <td>mp-weixin</td> 
   <td>微信小程序</td> 
  </tr> 
  <tr> 
   <td>mp-toutiao</td> 
   <td>头条小程序</td> 
  </tr> 
  <tr> 
   <td>mp-qq</td> 
   <td>qq 小程序</td> 
  </tr> 
 </tbody> 
</table>

[CLI 方式参考文档][CLI]

## HBuilderX 工程 ##

HBuilderX 创建的工程默认不带 types 语法提示，在 vscode 中编辑的时候，可以自行安装

### 初始化npm（如已初始化跳过此步骤） ###

复制代码npm init -y

### 安装 uni-app 语法提示 ###

复制代码npm i @types/uni-app @types/html5plus -D

另外，uni-app 项目下的 manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开。

关于uni-app插件市场的插件，vscode一样可以使用。

*  如果这些插件有npm使用方式（如uni-ui），可以用npm
 *  如果作者没提供npm方式，那么下载zip包解压也是可以用的

[uni-app]: https://github.com/zhetengbiji/uniapp-snippets-vscode
[CLI]: https://uniapp.dcloud.io/quickstart?id=_2-%E9%80%9A%E8%BF%87vue-cli%E5%91%BD%E4%BB%A4%E8%A1%8C