接下來(lái)。。。。。

1. 初始化一個(gè) mpvue 項(xiàng)目

現(xiàn)代前端開(kāi)發(fā)框架和環(huán)境都是需要 Node.js 的，如果沒(méi)有的話，請(qǐng)先下載 nodejs 并安裝。

然后打開(kāi)命令行工具：

隨著運(yùn)行成功的回顯之后，可以看到本地多了個(gè) dist 目錄，這個(gè)目錄里就是生成的小程序相關(guān)代碼。

2. 搭建小程序的開(kāi)發(fā)環(huán)境

小程序自己有一個(gè)專(zhuān)門(mén)的微信開(kāi)發(fā)者工具，最新版本下載地址。

這一步比較簡(jiǎn)單，按照提示一步步安裝好就行，然后用微信掃描二維碼登陸。 至此小程序的開(kāi)發(fā)環(huán)境差不多完成。

3. 調(diào)試開(kāi)發(fā) mpvue

選擇 小程序項(xiàng)目 并依次填好需要的信息：

• 項(xiàng)目目錄：就是剛剛創(chuàng)建的項(xiàng)目目錄（非 dist 目錄）

• AppID：沒(méi)有的話可以點(diǎn)選體驗(yàn)“小程序”，只影響是否可以真機(jī)調(diào)試。

• 項(xiàng)目名稱(chēng)。

如圖：

點(diǎn)擊“確定”按鈕后會(huì)跳到正式的開(kāi)發(fā)頁(yè)面，點(diǎn)擊“編輯器”按鈕，關(guān)閉自帶的小程序編輯器。然后如圖：

此時(shí)，整個(gè) mpvue 項(xiàng)目已經(jīng)跑起來(lái)了。

用自己趁手的編輯器（或者IDE）打開(kāi) 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)

1. 新增的頁(yè)面需要重新 npm run dev 來(lái)進(jìn)行編譯

項(xiàng)目開(kāi)發(fā)，更新中。。。

按上面的步驟創(chuàng)建的項(xiàng)目，新建頁(yè)面的時(shí)候是要建一個(gè)文件夾

但是用下面 github的項(xiàng)目已經(jīng)創(chuàng)建好的，是單獨(dú)的一個(gè)文件就行，和之前vue的頁(yè)面一樣