用 vscode 开发 uni-app 搭建

简介 & 需求

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

很多前端之前已经习惯了 vscode，不想更换编辑器。其实 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 helloproject

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

等待模板下载完成，然后自动安装依赖..

如果中间提示 缺少 yarn （可以安装一个，也可以不装）

# npm install -g yarn 或者
cnpm install -g yarn

如果中间有失败，可以重试，如果只是安装依赖失败，则可以重新安装一次依赖即可

# 进入项目根目录
cd helloproject

# 安装依赖，如果中间有失败，可多次执行，知道所有安装完成
# npm i 或者
cnpm i

测试项目

执行下列指令，编译 uniapp项目

npm run serve
# 或者 npm run dev:h5

如果能看到这个界面，说明项目没问题，后续自由发挥了

浏览器打开上面地址即可测试

附1：其他机器执行报错的解决

正常在 git 提交后， node_modules 是被忽略的，其他伙伴下载代码后，编译，会报个错，如下：

这种错就是最新的babel已经不是这样配置的了，最新配置步骤:

npm install babel-loader babel-core babel-preset-env -D
npm i @babel/plugin-transform-runtime -D
npm i @babel/runtime -D
npm i @babel/core@^7.0.0 -D
npm i @babel/preset-env -D
npm i @babel/plugin-proposal-class-properties -D
npm i babel-loader @babel/core @babel/runtime @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D

执行之后，配置表为（也可以直接改配置表，然后执行 npm i 自动安装：

"@babel/core": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/runtime": "^7.4.5",
"babel-loader": "^8.0.6",

另外配置也要修改 在.babelrc文件中 要配置成：（如果有）

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}

附2：使用scss，建议使用版本（太高会报错）

"node-sass": "^4.14.1",
"sass-loader": "^7.3.1",