一、VSCode + uni-app + 微信开发者工具

由于本人不想使用HBuilderX进行开发，所以采用vue-cli的方式创建uniapp项目，并且在vscode中进行编辑。项目编译成微信小程序后可在微信开发者工具中打开、预览。

vue-cli 创建 uni-app 项目

• 官方文档中有详细说明，故不做过多说明。详见，通过vue-cli创建uni-app官方文档。
• 参考文档：当uni-app遇见vscode。

安装组件语法提示

会自动提示uni-app自带的组件语法。 npm i @dcloudio/uni-helper-json

导入HBuilderX自带的代码块

从GitHub上下载uni-app代码块，放到项目的.vscode目录，即可拥有和HbuilderX一样的代码块（条件编译语句等）。 下载地址

HbuilderX工程

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

• 初始化npm（已初始化过的，可自行忽略）

  npm init -y
  

• 安装uni-app语法提示

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

uni-app项目下json文件

uni-app项目下的manifest.json、pages.json文件可能包含一些注释，就需要用jsonc(JSON with Comments)编辑器打开。

二、安装sass/less

安装sass

uni-app项目中自带sass，但仍然需要引入node-sass和sass-loader。

• 安装node-sass

  npm install node-sass@4.14.1 --save-dev
  

• 安装sass-loader

  npm install sass-loader@8.0.2 --save--dev
  

• 建议不要安装最新版本，版本号过高会报错。

安装less

本人习惯使用less，这里也提供了引入less的方法。

• 安装less

  npm install less@4.1.1 --save-dev
  

• 安装less-loader

  npm install less-loade@5.0.0 --save-dev
  

• 建议不要安装最新版本，版本号过高会报错。