【微信小程式】【mpvue】搭建mpvue環境及第一個程式

• 搭建環境
• • 安裝Node.js，并初始一個mpvue項目
  • 微信小程式IDE運作
  • 分包機制 2018.7.23+
  • webpack 配置
• 參考

搭建環境

由于依賴于Node.js，是以先安裝Node.js

安裝Node.js，并初始一個mpvue項目

打開指令工具：

# 1. 先檢查下 Node.js 是否安裝成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由于衆所周知的原因，可以考慮切換源為 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安裝 vue-cli
# 一般是要 sudo 權限的
$ npm install --global vue-[email protected]2.9

# 4. 建立一個基于 mpvue-quickstart 模闆的新項目
# 新手一路回車選擇預設就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev
           

随着運作成功的回顯之後，可以看到本地多了個 dist 目錄，這個目錄裡就是生成的小程式相關代碼。

微信小程式IDE運作

使用微信小程式IDE打開建立的項目

分包機制 2018.7.23+

mpvue-loader 1.1.2-rc.2 之後，優化了 build 後的檔案生成結構，生成的目錄結構保持了源檔案夾下的目錄結構，有利于對分包的支援。

webpack 配置

注意事項

新增的頁面需要重新 npm run dev 來進行編譯
           

參考

微信小程式開發資源彙總

mpvue官方文檔