详解如何搭建mpvue框架搭配vant组件库的小程序项目

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

# yarn
yarn add vant-weapp --production

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

"usingComponents": {
 "van-button": "/path/to/vant-weapp/dist/button/index"
}

"usingComponents": {
 "van-button": "/path/to/vant-weapp/lib/button/index"
}

<van-button type="primary">按钮</van-button>

# 安装项目依赖
npm install

# 执行组件编译
npm run dev

 npm install --global vue-cli

 vue init mpvue/mpvue-quickstart my-project

cd my-project

# npm
npm install
npm run dev

#yarn
yarn
yarn start

npm install less less-loader --save

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

# npm
npm install axios
# yarn
yarn add 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 拦截器
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.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)}
  })
 })
}