mpvue框架搭建採坑記錄

慰塵發表於2018-08-09
Vue框架

簡介：

　　mpvue框架對於從沒有接觸過小程式又要嘗試小程式開發的人員來說，無疑是目前最好的選擇。mpvue從底層支援 Vue.js 語法和構建工具體系，同時再結合相關UI元件庫，便可以高效的實現小程式開發

前言：

　　本文講述如何搭建完整的小程式專案框架，因為是第一次使用，有不完善的地方請大佬指正。

　　搭建內容包括：

　　1、使用scss語法：依賴外掛sass-loader 、node-sass

　　2、像vue一樣使用路由：依賴外掛 mpvue-entry 和 mpvue-router-patch

　　3、使用ZanUI:有贊團隊的小程式版UI元件庫（GitHub）

　　4、使用vuex進行狀態管理

　　5、使用flyio進行資料互動：GitHub地址

專案結構：

mpvue框架搭建採坑記錄

講解：

　　一、使用scss語法

　　1、安裝依賴

　　cnpm install node-sass sass-loader --save-dev

　　因為一些不知名的原因導致node-sass經常安裝失敗，所以採用cnpm方式安裝最好

　　2、在.vue檔案中的style節點加上lang=”scss”，這樣就可以愉快地使用sass進行開發了，無需再webpack.base.config.js中配置loader，webpack會自動識別.scss檔案以及.vue中的scss程式碼。

　　二、像vue一樣使用路由

　　在使用mpvue提供的命令 vue init mpvue/mpvue-quickstart my-project 建立專案後，會發現每個頁面都要配置main.js 檔案，不僅繁瑣而且顯得多餘，所以我們是否可以改造成像vue一樣使用路由的方式呢，答案是可以的，需要用到mpvue-entry 和 mpvue-router-patch外掛（集中式頁面配置，自動生成各頁面的入口檔案，優化目錄結構，支援新增頁面熱更新）和

　　mpvue-entry: 集中式頁面配置，自動生成各頁面的入口檔案，優化目錄結構，支援新增頁面熱更新

　　mpvue-router-patch: 在 mpvue 中使用 vue-router 相容的路由寫法

　　1、安裝依賴

　　cnpm install mpvue-entry --save-dev

　　cnpm install mpvue-router-patch --save

　　2、專案src資料夾下建立router資料夾和router.js檔案

      mpvue框架搭建採坑記錄

3、專案引入src下的main.js檔案

import Vue from 'vue'
import MpvueRouterPatch from 'mpvue-router-patch'

Vue.use(MpvueRouterPatch)複製程式碼

注：main.js的 export default {} 不能為空，不然編譯時不生成app.json檔案


4、修改webpack.base.conf.js配置檔案

const MpvueEntry = require('mpvue-entry')

module.exports = {
    entry:MpvueEntry.getEntry('./src/router/router.js'),
    .......
}複製程式碼


5、配置router.js 檔案

// 首個路由為首頁
module.exports = [{
    path: 'pages/index',
    name: 'Index',
    config: {
        navigationBarTitleText: '文章詳情',
　　　　//引入UI元件，後面會講到
        usingComponents:{
            "zan-button": "../dist/btn/index"
        }
    }
}, {
    path: 'pages/list/list',
    name: 'List',
    config: {
        navigationBarTitleText: 'list詳情'
    }
}]複製程式碼


三、使用小程式UI元件

　　1、將UI元件庫克隆到本地       mpvue框架搭建採坑記錄

      2、將上圖中的dist目錄拷貝到mpvue專案的輸出目錄中

mpvue框架搭建採坑記錄

      3、在router.js檔案中引入UI元件　

module.exports = [{
    path: 'pages/index',
    name: 'Index',
    config: {
        navigationBarTitleText: '文章詳情',
        //引入UI元件
        usingComponents:{
            //元件名和引用路徑
            "zan-button": "../dist/btn/index"
        }
    }
}]複製程式碼

4、頁面中使用UI元件

<template>
    <div class="index">
        <zan-button type="primary" size="small">確認付款</zan-button>
    </div>
</template>複製程式碼

5、小程式使用自定義元件：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

ZanUI元件庫使用講解：https://github.com/youzan/zanui-weapp/blob/dev/README.md

四、使用vuex進行狀態管理

　　1、安裝

　　　　cnpm install vuex --save

　　2、引入（main.js檔案）

　　　　impotr store from './vuex/index'

　　　　Vue.prototrype.$store = store//掛在到vue原型上

五、使用flyio進行資料互動

　　1、安裝

　　　　cnpm install flyio --save

　　2、引入（main.js檔案）

　　　　const Fly = require("flyio/dist/npm/wx")//引入

　　　　const fly = new Fly

　　　　Vue.prototrype.$fly = fly//掛在到vue原型上

　　3、使用

           add(){
                //在add方法中執行介面請求
                this.$fly.get('http://******/user?id=133')
                    .then(function (res) {
                            //請求成功
                           console.log('res',res);
                    })
                    .catch(function (err) {
                        //請求失敗
                        console.log('err',err);
                    });
            }    複製程式碼


相關文章