
接下來。。。。。 1. 初始化一個(gè) mpvue 項(xiàng)目現(xiàn)代前端開發(fā)框架和環(huán)境都是需要 Node.js 的,如果沒有的話,請(qǐng)先下載 nodejs 并安裝。 然后打開命令行工具: # 2. 由于眾所周知的原因,可以考慮切換源為 taobao 源 $ npm set registry https://registry.npm./ $ npm install --global vue-cli@2.9 # 4. 創(chuàng)建一個(gè)基于 mpvue-quickstart 模板的新項(xiàng)目 $ vue init mpvue/mpvue-quickstart my-project
隨著運(yùn)行成功的回顯之后,可以看到本地多了個(gè) dist 目錄,這個(gè)目錄里就是生成的小程序相關(guān)代碼。 2. 搭建小程序的開發(fā)環(huán)境小程序自己有一個(gè)專門的微信開發(fā)者工具,最新版本下載地址。 這一步比較簡單,按照提示一步步安裝好就行,然后用微信掃描二維碼登陸。 至此小程序的開發(fā)環(huán)境差不多完成。 3. 調(diào)試開發(fā) mpvue選擇 小程序項(xiàng)目 并依次填好需要的信息: 如圖: 
點(diǎn)擊“確定”按鈕后會(huì)跳到正式的開發(fā)頁面,點(diǎn)擊“編輯器”按鈕,關(guān)閉自帶的小程序編輯器。然后如圖: 
此時(shí),整個(gè) mpvue 項(xiàng)目已經(jīng)跑起來了。 用自己趁手的編輯器(或者IDE)打開 my-project 中的 src 目錄下的代碼試試,如示例: 有詳細(xì)視頻地址鏈接 http:///assets/quick-start/dev.mp4 到此,上手完畢。 4. 分包機(jī)制 2018.7.23 mpvue-loader 1.1.2-rc.2 之后,優(yōu)化了 build 后的文件生成結(jié)構(gòu),生成的目錄結(jié)構(gòu)保持了源文件夾下的目錄結(jié)構(gòu),有利于對(duì)分包的支持。 5. webpack 配置注意事項(xiàng)新增的頁面需要重新 npm run dev 來進(jìn)行編譯
項(xiàng)目開發(fā),更新中。。。 按上面的步驟創(chuàng)建的項(xiàng)目,新建頁面的時(shí)候是要建一個(gè)文件夾 
但是用下面 github的項(xiàng)目已經(jīng)創(chuàng)建好的,是單獨(dú)的一個(gè)文件就行,和之前vue的頁面一樣 
|