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

2019-11-19 11:33:08

字体：大中小

来源：转载

供稿：网友

1. vant 介绍

### 扫码体验

Vant - 轻量、可靠的移动端 Vue 小程序组件库。由 有赞 公司开发与维护。提供了一系列美观、优质的移动端组件。vant 官网

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

使用之前

使用 Vant Weapp 前，请确保你已经学习过微信官方的小程序简易教程和自定义组件介绍

安装

方式一. 通过 npm 安装 (推荐)

小程序已经支持使用 npm 安装第三方包，详见npm 支持

# npmnpm i vant-weapp -S --production# yarnyarn 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# npmnpm installnpm run dev#yarnyarnyarn 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

# npmnpm install axios# yarnyarn 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建立代码规范

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：详解mpvue中使用vant时需要注意的onChange事件的坑

下一篇：微信端调取相册和摄像头功能，实现图片上传，并上传到服务器