如何搭建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 源代码,并将distlib目录拷贝到自己的项目中

git clone https://github.com/youzan/vant-weapp.git
复制代码

使用组件

以按钮组件为例,只需要在 json 文件中引入按钮对应的自定义组件即可

某些小程序框架会要求关闭ES6ES5选项,可以引入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 中直接使用组件

type="primary">按钮
复制代码
在开发者工具中预览示例小程序
# 安装项目依赖
npm install

# 执行组件编译
npm run dev
复制代码

3. 使用 mpvue

mpvue (github 地址请参见) 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.jsruntimecompiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 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.jsrules 里添加一条规则

{
    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建立代码规范


关注前端撸客公众号

转载于:https://juejin.im/post/5cdc3ab051882568d154cb84

你可能感兴趣的:(如何搭建mpvue框架搭配vant组件库的小程序项目)