快速上手小程序的mpvue框架

 

一.什麼是mpvue框架？

 

        mpvue 是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心（因此建議熟練掌握vue再使用mpvue框架，不然仍是建議去使用原生框架去寫小程序），mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套 Vue.js 開發體驗。

 

二.必要的開發基礎

 

      ①   熟練掌握vue.js（不曾使用過vue這個框架的話，建議vue的官方文檔進行學習：https://cn.vuejs.org/v2/guide/）

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

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

      ④   node.js（前端工具鏈如今基本都依賴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

出現版本號即爲成功；

 

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

vue -V

出現版本號即爲成功；

 

4.而後咱們執行如下命令，將npm的下載源切換到國內淘寶的鏡像，以提升下載時的速度和成功率；

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

 

5.進入你想保存項目的文件夾（好比d盤,就先輸入命令d:），建立一個基於 mpvue-quickstart 模板的新項目：

vue init mpvue/mpvue-quickstart wxvueshop

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

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

 

6.不急，咱們這時候進入這個文件夾，輸入命令：

cd wxvueshop

 

7.而後，咱們進行依賴庫的安裝，輸入命令：

npm install

 

8.安裝完成後，咱們運行一下，輸入命令：

npm run dev

隨着運行成功的運行以後，能夠看到本地wxvueshop多了個 dist 目錄，這個目錄裏就是生成的小程序相關代碼，這個時候咱們就成功初始化項目了。跑起來了...

 

四.運行查看項目

 

打開微信web開發者工具，選擇新增項目，打開咱們剛剛建立的項目，如圖：

 

 

點擊「肯定」按鈕，進入小程序開發主界面，在左邊的小程序模擬器中就能看到wxvueshop小程序的執行結果了：

 

五.編寫代碼

 

如上圖，咱們新建立的項目有生成默認頁面，如今咱們把它所有去掉，具體以下：

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

 

2.將src/App.vue文件中的內容重置成：

<script>
/* 這部分至關於原生小程序的 app.js */
export default {
  created () {
    console.log('miniapp created!!!')
  }
}
</script>

<style>
/* 這部分至關於原生小程序的 app.wxss */
.container {
  background-color: #cccccc;
}
</style>

 

3.將src/main.js文件中的內容重置成：

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'
    }
  }
}

如今，咱們的代碼就成了一個小程序頁面都沒有的初始狀態。

 

4.新建頁面，之後的每個mpvue頁面組件都會擁有以下圖片這樣的結構。

 

頁面寫法以下：

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: {
      // 注意，頁面級可配置屬性至關於只是`src/main.js`中配置裏的`window`部分
      "navigationBarBackgroundColor": "#3dc1c7",
      "navigationBarTitleText": "登陸",
      "navigationBarTextStyle": "white"
    }
  }

 

5.咱們在src裏面用vue寫法建立頁面的時候，小程序的頁面會自動建立和代碼轉化，文件夾爲dist,圖片以下：

 

 

就這樣咱們已經初步瞭解mpvue框架了，以後有時間會寫進階版，上面內容若是有出錯的地方，麻煩大佬們指正，謝謝！