一、安裝開發(fā)環(huán)境
? ? ? ? 1） node.js
? ??????????下載地址：https://nodejs.org/en/download/? ?安裝完成后，打開你的命令行輸入如下命令褂痰，驗(yàn)證安裝是否成功：
????????????node --version? //成功則會(huì)輸出相應(yīng)版本
? ? ? ? ? ? 安裝成功之后即npm安裝成功兼搏，由于國外環(huán)境安裝速度較慢，可以切換到國內(nèi)的淘寶鏡像來提高效率
? ? ? ? ? ? ?npm set registry https://registry.npm.taobao.org/
二连霉、開發(fā)環(huán)境安裝成功之后我們需要安裝開發(fā)依賴?
? ? ? ? 1）vue-cli
? ??????????vue-cli是一個(gè)vue專用的項(xiàng)目腳手架工具榴芳，可以用于方便的創(chuàng)建vue項(xiàng)目骨架代碼，
? ? ? ? ????cnpm install vue-cli -g
? ? ? ? 2）下載微信開發(fā)者工具跺撼，調(diào)試和模擬運(yùn)行微信小程序
? ??????????下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
三窟感、創(chuàng)建機(jī)遇mpvue的小程序項(xiàng)目
? ? 1）快速構(gòu)建mpvue小程序項(xiàng)目，按照命令行的引導(dǎo)一路回車：
? ? ? ? 結(jié)束之后會(huì)在我的F盤下面的test文件下新建一個(gè)vuetest的文件歉井，即我們項(xiàng)目文件地址柿祈，在這個(gè)過程中vue幫我們下載了一份注冊名為? ? mpvue/mpvue-quickstart的模板代碼，然后根據(jù)開發(fā)者在命令行提示過程中輸入的信息哩至，生成一份經(jīng)過配置后的代碼躏嚎。安裝成功之后我們還需要對項(xiàng)目安裝開發(fā)所需要的依賴：
? ? ? ? 結(jié)束之后開發(fā)所需要的依賴環(huán)境就自動(dòng)安裝在了vuetest下（node_modules），執(zhí)行以下代碼即可將項(xiàng)目運(yùn)行起來：
? ? ? ? 成功運(yùn)行之后項(xiàng)目就可以進(jìn)入開發(fā)模式菩貌，一但源代碼發(fā)生變化就會(huì)觸發(fā)自動(dòng)編譯卢佣，可以用正常的vue語句開發(fā)，但最終還需要轉(zhuǎn)換成小程序的的代碼才可以在微信小程序環(huán)境下運(yùn)行箭阶，編譯后的代碼會(huì)在dist目錄下：：
cnpm run build
運(yùn)行查看結(jié)果虚茶，打開微信開發(fā)者工具——>新建項(xiàng)目
? ? ? ? 項(xiàng)目目錄選擇我們剛剛新建的vuetest目錄，若無AppID則可使用測試號：
? ? ? ? 點(diǎn)擊導(dǎo)入則可進(jìn)入小程序開發(fā)界面：
? ? ? ? 左側(cè)為運(yùn)行結(jié)果仇参，右側(cè)可以查看小程序源碼
三嘹叫、mpvue小程序頁面構(gòu)成
? ? 1）src目錄
? ? ? ? src目錄下是我們編寫程序的目錄文件，默認(rèn)生成的模板已經(jīng)給我們創(chuàng)建了三個(gè)文件夾作為參考案例诈乒，可以參考這里面的邏輯代碼自己來編寫自己的風(fēng)格
? ??????components：一般我們會(huì)將公共的模板或者說重復(fù)較多的部分提取成vue組件存放在這里
? ??????pages：存放小程序的頁面
????????utils：可選（可刪）罩扇。可以將代碼中一些公用工具函數(shù)組織成模塊放入該目錄下
? ??????main.js + App.vue：這兩個(gè)是入口文件抓谴，相當(dāng)于原生小程序框架中的app.json和app.js的復(fù)合體暮蹂。
? ? 2）config目錄
? ??????config目錄下包含了用于開發(fā)和生產(chǎn)環(huán)境下的不同配置，dev.env.js用于開發(fā)環(huán)境癌压，prod.env.js用于生產(chǎn)環(huán)境仰泻，可以將開發(fā)階段和生產(chǎn)階段不一樣的信息配置到這兩個(gè)文件中去，比如說后臺(tái)請求的api地址滩届，圖片地址等集侯，然后在代碼中以變量的形式進(jìn)行引用：
? ??????// dev.env.js
module.exports = merge(prodEnv, {
? NODE_ENV: '"development"',
? BASE_URL: '"http://xxxx/api"'
})
// prod.env.js
module.exports = {
? NODE_ENV: '"production"',
? BASE_URL: '"http://xxxxadd/api"'
}
? ? ? ? 后面在使用api接口的時(shí)候可以直接使用：
const baseURL = process.env.API_BASE_URL
wx.request({url:`${baseURL}/xxx`})
? ? 3）build目錄
? ??????build目錄下是一些用于項(xiàng)目編譯打包的node.js腳本和webpack配置文件被啼。一般情況下不需要修改這些文件。
? ? 4)static目錄
? ? ? ? 主要存放一些靜態(tài)資源棠枉，比如圖片浓体、文本文件等
四、小程序入口
? ? 1）app.json
? ??????app.json是小程序的全局配置文件辈讶，其包含了小程序的頁面文件路徑配置命浴、窗口的全局樣式信息、底部選項(xiàng)卡式菜單欄的配置贱除，以及一些小程序網(wǎng)絡(luò)超時(shí)的配置等等生闲。
? ? 2）App.vue
? ??????App.vue組件中可以編寫小程序的生命周期方法（通常使用Vue的生命周期方法，但也兼容原生的生命周期方法）月幌，也可以在其中加入小程序的全局樣式
? ? 3）其他頁面
? ??????我們新建一個(gè)名為index的子目錄（請遵循每個(gè)頁面放入一個(gè)子目錄的良好習(xí)慣）碍讯，然后在該子目錄下，新建2個(gè)文件：一個(gè)用于實(shí)現(xiàn)頁面主體功能的index.vue組件扯躺，另一個(gè)則用于將這個(gè)頁面組件生成Vue實(shí)例并加載的main.js捉兴。以后的每一個(gè)mpvue頁面組件都會(huì)擁有這樣的結(jié)構(gòu)。然后在main.js中編寫如下代碼录语，非常簡單的一段代碼倍啥，它的功能是引入index.vue并創(chuàng)建Vue實(shí)例：
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
