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

 更新时间:2019年05月16日 10:13:36   作者:爱迷路的小迷弟   我要评论

这篇文章主要介绍了详解如何搭建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 中直接使用组件

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

在开发者工具中预览示例小程序

# 安装项目依赖
npm install

# 执行组件编译
npm run dev

3. 使用 mpvue

 

mpvuegithub 地址请参见) 是一个使用 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建立代码规范

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 详解vue+webpack+express中间件接口使用

    详解vue+webpack+express中间件接口使用

    这篇文章主要介绍了详解vue+webpack+express中间件接口使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 浅谈Vue下使用百度地图的简易方法

    浅谈Vue下使用百度地图的简易方法

    本篇文章主要介绍了浅谈Vue下使用百度地图的简易方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Vue.js实现简单动态数据处理

    Vue.js实现简单动态数据处理

    本篇文章主要介绍了Vue.js实现简单动态数据处理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 用vuex写了一个购物车H5页面的示例代码

    用vuex写了一个购物车H5页面的示例代码

    本篇文章主要介绍了用vuex写了一个购物车H5页面的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • vue前端框架—Mint UI详解(更适用于移动端)

    vue前端框架—Mint UI详解(更适用于移动端)

    这篇文章主要介绍了vue前端框架—Mint UI的详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 一个Vue页面的内存泄露分析详解

    一个Vue页面的内存泄露分析详解

    这篇文章主要介绍了一个Vue页面的内存泄露分析详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 浅析Proxy可以优化vue的数据监听机制问题及实现思路

    浅析Proxy可以优化vue的数据监听机制问题及实现思路

    这篇文章主要介绍了浅析Proxy可以优化vue的数据监听机制问题及实现思路,需要的朋友可以参考下
    2018-11-11
  • Vue使用mixins实现压缩图片代码

    Vue使用mixins实现压缩图片代码

    本篇文章主要介绍了Vue使用mixins实现压缩图片代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Vue中在新窗口打开页面及Vue-router的使用

    Vue中在新窗口打开页面及Vue-router的使用

    这篇文章主要介绍了Vue中在新窗口打开页面 及 Vue-router的使用,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • vue2滚动条加载更多数据实现代码

    vue2滚动条加载更多数据实现代码

    本篇文章主要介绍了vue2滚动条加载更多数据实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01

最新评论