腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

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

更新時間：2019年05月16日 10:13:35 作者：愛迷路的小迷弟

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

1. vant 介紹

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

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

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

使用之前

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

安裝

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

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

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

# yarn
yarn add vant-weapp --production

方式二. 下載代碼

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

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

使用組件

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

某些小程序框架會要求關(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>

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

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

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

3. 使用 mpvue

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

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

如果沒有安裝 vue-cli ，先安裝 vue-cli

 npm install --global vue-cli

創(chuàng)建一個基于 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 是一個易用、簡潔且高效的 http 庫,使用 Promise 管理異步，告別傳統(tǒng) callback 方式, 支持?jǐn)r截器等高級配置

安裝 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);
 });
 
 // 添加響應(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 配置請求函數(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ā)起請求相應(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 的配置請移步 webpack項(xiàng)目使用eslint建立代碼規(guī)范

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

您可能感興趣的文章: