VsCode开发uni-app

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

CLI 工程

全局安装 vue-cli 3.x(如已安装请跳过此步骤)

1
cnpm install -g @vue/cli

通过 CLI 创建 uni-app 项目

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

此时,会提示选择项目模板,初次体验建议选择 hello uni-app 项目模板。

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

安装组件

语法提示

1
cnpm i @dcloudio/uni-helper-json

代码块

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

HBuilderX 工程

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

初始化

如已初始化跳过此步骤

1
cnpm init -y

语法提示

安装 uni-app 语法提示

1
npm i @types/uni-app @types/html5plus -D

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

运行项目

1
npm run dev:%PLATFORM%

发布项目

1
npm run build:%PLATFORM%

%PLATFORM% 可取值如下:

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

其他配置

less-loader

1
cnpm install less-loader