詳解如何搭建mpvue框架搭配vant組件庫(kù)的小程序項(xiàng)目

更新時(shí)間：2019年05月16日 10:13:35 作者：愛(ài)迷路的小迷弟

這篇文章主要介紹了詳解如何搭建mpvue框架搭配vant組件庫(kù)的小程序項(xiàng)目，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1. vant 介紹

### 掃碼體驗(yàn)

Vant - 輕量、可靠的移動(dòng)端 Vue 小程序組件庫(kù)。由 有贊 公司開(kāi)發(fā)與維護(hù)。提供了一系列美觀、優(yōu)質(zhì)的移動(dòng)端組件。vant 官網(wǎng)

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

使用之前

使用 Vant Weapp 前，請(qǐng)確保你已經(jīng)學(xué)習(xí)過(guò)微信官方的小程序簡(jiǎn)易教程和自定義組件介紹

安裝

方式一. 通過(guò) npm 安裝 (推薦)

小程序已經(jīng)支持使用 npm 安裝第三方包，詳見(jiàn)npm 支持

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

# yarn
yarn add vant-weapp --production

方式二. 下載代碼

直接通過(guò) git 下載 Vant Weapp 源代碼，并將 dist 或 lib 目錄拷貝到自己的項(xiàng)目中

git clone https://github.com/youzan/vant-weapp.git

使用組件

以按鈕組件為例，只需要在 json 文件中引入按鈕對(duì)應(yīng)的自定義組件即可

某些小程序框架會(huì)要求關(guān)閉 ES6 轉(zhuǎn) ES5 選項(xiàng)，可以引入 lib 目錄內(nèi) 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>

在開(kāi)發(fā)者工具中預(yù)覽示例小程序

# 安裝項(xiàng)目依賴
npm install

# 執(zhí)行組件編譯
npm run dev

3. 使用 mpvue

mpvue （github 地址請(qǐng)參見(jiàn)）是一個(gè)使用 Vue.js 開(kāi)發(fā)小程序的前端框架?？蚣芑?Vue.js 核心， mpvue 修改了 Vue.js 的 runtime 和 compiler 實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中，從而為小程序開(kāi)發(fā)引入了整套 Vue.js 開(kāi)發(fā)體驗(yàn)。

初始化一個(gè) mpvue 項(xiàng)目

如果沒(méi)有安裝 vue-cli ，先安裝 vue-cli

 npm install --global vue-cli

創(chuàng)建一個(gè)基于 mpvue-quickstart 模板的新項(xiàng)目

 vue init mpvue/mpvue-quickstart my-project

安裝依賴

cd my-project

# npm
npm install
npm run dev

#yarn
yarn
yarn start

4. 在 mpvue 里使用 less

下載 less 到項(xiàng)目中

npm install less less-loader --save

導(dǎo)入 loader

在 webpack.base.conf.js 里 rules 里添加一條規(guī)則

{
  test: /.less$/,
  loader: "style-loader!css-loader!less-loader"
},

在 mpvue 里使用 axios

axios 介紹

axios 是一個(gè)易用、簡(jiǎn)潔且高效的 http 庫(kù),使用 Promise 管理異步，告別傳統(tǒng) callback 方式, 支持?jǐn)r截器等高級(jí)配置

安裝 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 () {
 //請(qǐng)求攔截器
 axios.interceptors.request.use(function ( request ) {
  // request.headers.token = 'token=11124654654687';
  // console.log(request) //請(qǐng)求成功
  return request
 }, function ( error ) {
  // console.log(error); //請(qǐng)求失敗
  return Promise.reject(error);
 });
 
 // 添加響應(yīng)攔截器
 axios.interceptors.response.use(function ( response ) {
  console.log(response.data.data) //響應(yīng)成功
  return response;
 }, function ( error ) {
  // console.log(error); //響應(yīng)失敗
  return Promise.reject(error);
 });
}

axios 配置請(qǐng)求函數(shù)

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小程序 發(fā)起請(qǐng)求相應(yīng) 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 的配置請(qǐng)移步 webpack項(xiàng)目使用eslint建立代碼規(guī)范

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: