一.什么是mpvue框架？

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

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

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

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

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

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

⑤ vue-cli （vue專用的項目腳手架工具，打開cmd,輸入命令：npm install --global vue-cli）

三.初始化項目

1.打開cmd，快捷鍵win+R；

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

node -v

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

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

vue -V

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

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

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

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

vue init mpvue/mpvue-quickstart wxvueshop

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

這個時候你就能看見d盤有一個wxvueshop的項目文件了。

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

cd wxvueshop

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

npm install

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

npm run dev

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

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

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

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

五.編寫代碼

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

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

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)在，我們的代碼就成了一個小程序頁面都沒有的初始狀態(tài)。

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

頁面寫法如下：

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: {
   // 注意，頁面級可配置屬性相當(dāng)于只是`src/main.js`中配置里的`window`部分
   "navigationBarBackgroundColor": "#3dc1c7",
   "navigationBarTitleText": "登錄",
   "navigationBarTextStyle": "white"
  }
 }

5.我們在src里面用vue寫法創(chuàng)建頁面的時候，小程序的頁面會自動創(chuàng)建和代碼轉(zhuǎn)化，文件夾為dist,圖片如下：

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

總結(jié)

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

最新評論