如何搭建mpvue框架搭配vant組件庫的小程序項目

1. vant 介紹

### 掃碼體驗

Vant - 輕量、可靠的移動端 Vue 小程序 組件庫。由有贊公司開發與維護。提供了一系列美觀、優質的移動端組件。 vant 官網

2. 在普通小程序怎麼使用 vant 組件

使用以前

使用 Vant Weapp 前，請確保你已經學習過微信官方的 小程序簡易教程 和 自定義組件介紹

安裝

方式一. 經過 npm 安裝 (推薦)

小程序已經支持使用 npm 安裝第三方包，詳見 npm 支持

# npm
npm i vant-weapp -S --production

# yarn
yarn add vant-weapp --production
複製代碼

方式二. 下載代碼

直接經過 git 下載 Vant Weapp 源代碼，並將dist或lib目錄拷貝到本身的項目中

git clone https://github.com/youzan/vant-weapp.git
複製代碼

使用組件

以按鈕組件爲例，只須要在 json 文件中引入按鈕對應的自定義組件便可

某些小程序框架會要求關閉ES6轉ES5選項，能夠引入lib目錄內es5版本的組件

es6

"usingComponents": {
  "van-button": "/path/to/vant-weapp/dist/button/index"
}
複製代碼

es5

"usingComponents": {
  "van-button": "/path/to/vant-weapp/lib/button/index"
}
複製代碼

接着就能夠在 wxml 中直接使用組件

<van-button type="primary">按鈕</van-button>
複製代碼

在開發者工具中預覽示例小程序

# 安裝項目依賴
npm install

# 執行組件編譯
npm run dev
複製代碼

3. 使用 mpvue

mpvue （github 地址請參見） 是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套 Vue.js 開發體驗。

初始化一個 mpvue 項目

若是沒有安裝vue-cli，先安裝vue-cli

npm install --global vue-cli
複製代碼

建立一個基於 mpvue-quickstart 模板的新項目

vue init mpvue/mpvue-quickstart my-project
複製代碼

安裝依賴

cd my-project

# npm
npm install
npm run dev

#yarn
yarn
yarn start
複製代碼

4. 在 mpvue 裏使用 less

下載 less 到項目中

npm install less less-loader --save
複製代碼

導入 loader

在 webpack.base.conf.js 裏 rules 裏添加一條規則

{
    test: /.less$/,
    loader: "style-loader!css-loader!less-loader"
},
複製代碼

在 mpvue 裏使用 axios

axios 介紹

axios 是一個易用、簡潔且高效的 http 庫,使用 Promise 管理異步，告別傳統 callback 方式, 支持攔截器等高級配置

安裝 axios

# npm
npm install axios
# yarn
yarn add axios
複製代碼

使用 axios

import axios from 'axios'

function get (url,params) {
  return axios({
    method:'get',
    url:url,
    params:params
  })
}
function post (url,params) {
  return axios({
    method:'post',
    url:url,
    data:params
  })
}
複製代碼

爲 axios 配置攔截器

// axios 攔截器
function Instance () {
  //請求攔截器
  axios.interceptors.request.use(function ( request ) {
    // request.headers.token = 'token=11124654654687';
    // console.log(request) //請求成功
    return request
  }, function ( error ) {
    // console.log(error); //請求失敗
    return Promise.reject(error);
  });
  
  // 添加響應攔截器
  axios.interceptors.response.use(function ( response ) {
    console.log(response.data.data) //響應成功
    return response;
  }, function ( error ) {
    // console.log(error); //響應失敗
    return Promise.reject(error);
  });
}
複製代碼

axios 配置請求函數

axios.defaults.timeout = 30000;
axios.defaults.headers.post[ 'Content-Type' ] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.adapter = function (config) {
  return new Promise((resolve, reject) => {
    // console.log(config,'adapter')
    let data = config.method === 'get' ? config.params : qs.stringify(config.data)
    // wx小程序 發起請求相應 log 就能夠看到熟悉的返回啦
    wx.request({
      url:config.url,
      method:config.method,
      data:data,
      success:(res)=>{ return resolve(res)},
      fail:(err)=>{return reject(err)}
    })
  })
}
複製代碼

5. 在 mpvue 裏配置 eslint

eslint 的配置請移步 webpack項目使用eslint創建代碼規範

---

關注前端擼客公衆號