微信小程序的mpvue框架快速上手指南

一.什么是mpvue框架？

mpvue 是一個(gè)使用 Vue.js 開(kāi)發(fā)小程序的前端框架。框架基于 Vue.js 核心（所以建議熟練掌握vue再使用mpvue框架，否則還是建議去使用原生框架去寫(xiě)小程序），mpvue 修改了 Vue.js 的 runtime 和 compiler 實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中，從而為小程序開(kāi)發(fā)引入了整套 Vue.js 開(kāi)發(fā)體驗(yàn)。

二.必要的開(kāi)發(fā)基礎(chǔ)

① 熟練掌握vue.js（未曾使用過(guò)vue這個(gè)框架的話，建議vue的官方文檔進(jìn)行學(xué)習(xí)：https://cn.vuejs.org/v2/guide/）

② 微信開(kāi)發(fā)者工具（這個(gè)工具是開(kāi)發(fā)、調(diào)試和模擬運(yùn)行微信小程序的最核心的工具了，下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html）

③ Visual Studio Code（一個(gè)輕量級(jí)代碼編輯器，擁有非常多好用的輔助開(kāi)發(fā)插件，下載地址：https://code.visualstudio.com）

④ node.js（前端工具鏈現(xiàn)在基本都依賴Node.js，下載地址：https://nodejs.org/en/download/）

⑤ vue-cli （vue專用的項(xiàng)目腳手架工具，打開(kāi)cmd,輸入命令：npm install --global vue-cli）

三.初始化項(xiàng)目

1.打開(kāi)cmd，快捷鍵win+R；

2.檢查node.js是否安裝成功,輸入命令：

node -v

出現(xiàn)版本號(hào)即為成功；

3.檢查vue-cli是否安裝成功，輸入命令：

vue -V

出現(xiàn)版本號(hào)即為成功；

4.然后我們執(zhí)行以下命令，將npm的下載源切換到國(guó)內(nèi)淘寶的鏡像，以提高下載時(shí)的速度和成功率；

npm set registry https://registry.npm.taobao.org/

5.進(jìn)入你想保存項(xiàng)目的文件夾（比如d盤(pán),就先輸入命令d:），創(chuàng)建一個(gè)基于 mpvue-quickstart 模板的新項(xiàng)目：

vue init mpvue/mpvue-quickstart wxvueshop

接著我們選擇或填寫(xiě)項(xiàng)目的配置信息，不知道的你就回車(chē)（依次是，項(xiàng)目名稱，小程序appid，項(xiàng)目介紹，作者，然后是否安裝vuex等等，你想安裝就寫(xiě)yes,否則no）

這個(gè)時(shí)候你就能看見(jiàn)d盤(pán)有一個(gè)wxvueshop的項(xiàng)目文件了。

6.不急，我們這時(shí)候進(jìn)入這個(gè)文件夾，輸入命令：

cd wxvueshop

7.然后，我們進(jìn)行依賴庫(kù)的安裝，輸入命令：

npm install

8.安裝完成后，我們運(yùn)行一下，輸入命令：

npm run dev

隨著運(yùn)行成功的運(yùn)行之后，可以看到本地wxvueshop多了個(gè)dist目錄，這個(gè)目錄里就是生成的小程序相關(guān)代碼，這個(gè)時(shí)候我們就成功初始化項(xiàng)目了。跑起來(lái)了...

四.運(yùn)行查看項(xiàng)目

打開(kāi)微信web開(kāi)發(fā)者工具，選擇新增項(xiàng)目，打開(kāi)我們剛剛創(chuàng)建的項(xiàng)目，如圖：

點(diǎn)擊“確定”按鈕，進(jìn)入小程序開(kāi)發(fā)主界面，在左邊的小程序模擬器中就能看到wxvueshop小程序的執(zhí)行結(jié)果了：

五.編寫(xiě)代碼

如上圖，我們新創(chuàng)建的項(xiàng)目有生成默認(rèn)頁(yè)面，現(xiàn)在我們把它全部去掉，具體如下：

1.刪掉src/components、src/pages、src/utils三個(gè)目錄下的所有代碼文件；

2.將src/App.vue文件中的內(nèi)容重置成：

<script>
/* 這部分相當(dāng)于原生小程序的 app.js */
export default {
 created () {
  console.log('miniapp created!!!')
 }
}
</script>

<style>
/* 這部分相當(dāng)于原生小程序的 app.wxss */
.container {
 background-color: #cccccc;
}
</style>

3.將src/main.js文件中的內(nèi)容重置成：

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue(App)
app.$mount()
export default {
 config: {
  pages: [
    '^pages/login/main'
  ],
  window: {
   backgroundTextStyle: 'light',
   navigationBarBackgroundColor: '#fff',
   navigationBarTitleText: '我的小程序',
   navigationBarTextStyle: 'black'
  }
 }
}

現(xiàn)在，我們的代碼就成了一個(gè)小程序頁(yè)面都沒(méi)有的初始狀態(tài)。

4.新建頁(yè)面，以后的每一個(gè)mpvue頁(yè)面組件都會(huì)擁有如下圖片這樣的結(jié)構(gòu)。

頁(yè)面寫(xiě)法如下：

login.vue:

<template>
 <div class="container" @click="clickHandle">
  <div class="message">{{msg}}</div>
 </div>
</template>
<script>
export default {
 data () {
  return {
   msg: 'login'
  }
 },
 methods: {
  clickHandle () {
   this.msg = 'yes!!!!!!'
  }
 }
}
</script>
<style scoped>
.message {
 color: red;
 padding: 10px;
 text-align: center;
}
</style>

main.js:

import Vue from 'vue'
import App from './login'
const app = new Vue(App)
app.$mount()
export default {
  config: {
   // 注意，頁(yè)面級(jí)可配置屬性相當(dāng)于只是`src/main.js`中配置里的`window`部分
   "navigationBarBackgroundColor": "#3dc1c7",
   "navigationBarTitleText": "登錄",
   "navigationBarTextStyle": "white"
  }
 }

5.我們?cè)趕rc里面用vue寫(xiě)法創(chuàng)建頁(yè)面的時(shí)候，小程序的頁(yè)面會(huì)自動(dòng)創(chuàng)建和代碼轉(zhuǎn)化，文件夾為dist,圖片如下：

就這樣我們已經(jīng)初步了解mpvue框架了，之后有時(shí)間會(huì)寫(xiě)進(jìn)階版，上面內(nèi)容如果有出錯(cuò)的地方，麻煩大佬們指正，謝謝！

總結(jié)

以上所述是小編給大家介紹的微信小程序的mpvue框架快速上手指南，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！