用 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",