mpvue项目开发

一、创建项目

1.初始化项目

vue init mpvue/mpvue-quickstart project-name

2.安装依赖

cd 至目录下
npm install

3.删除无关内容

二、按需安装依赖

1.安装scss

安装依赖
npm i -D sass-loader node-sass

安装有报错时可试试将package.json文件中的sass-loader改成7.0.0
之后删除目录下的node_modules，重新执行npm install后再安装scss

2.安装vant-weapp组件库

官网
https://youzan.github.io/vant-weapp/#/intro

安装依赖
npm i vant-weapp -S --production

增加webpack配置
打开build目录下的webpack.base.conf.js
在末尾添加

// 微信平台打包时，将vant-weapp组件库拷贝到编译后微信代码中
if (/^wx$/.test(PLATFORM)) {
  baseWebpackConfig = merge(baseWebpackConfig, {
    plugins: [
      new CopyWebpackPlugin([{
        from: resolve('node_modules/vant-weapp/dist'),
        to: resolve('dist/wx/vant-weapp/dist'),
        ignore: ['.*']
      }])
    ]
  })
}

否则实际编译后的代码读取不到node_modules中的vant-weapp组件库

引入组件示例

页面中使用组件

3.安装mpvue-router-patch插件

安装依赖
npm i -S mpvue-router-patch

导入插件

导入该插件后就可以在项目开发中使用vue-router的语法进行路由跳转

4.集成flyio

安装依赖
cnpm i -S flyio

封装一些方法

// 创建fly对象
function createFly () {
  //校验平台
  if (mpvuePlatform === 'wx') {
    const Fly = require('flyio/dist/npm/wx')
    return new Fly()
  }
  return null
}

// 报错时...
function handleError (err) {
  console.log(err)
}

// get请求
export function get (url, params = {}) {
  const fly = createFly()
  if (fly) {
    return new Promise((resolve, reject) => {
      fly.get(url, params).then(response => {
        resolve(response)
      }).catch(err => {
        handleError(err)
        reject(err)
      })
    })
  }
}

// post请求
export function post (url, params = {}) {
  const fly = createFly()
  if (fly) {
    return new Promise((resolve, reject) => {
      fly.post(url, params).then(response => {
        resolve(response)
      }).catch(err => {
        handleError(err)
        reject(err)
      })
    })
  }
}