记录一下，使用vue进行微信开发遇到的问题

最近使用vue进行微信开发了两个项目，遇到不少问题和新的知识点，记录一下。

选型

• 首先，搭建使用vue-cli脚手架，基本能知足业务需求，并且底子start数多，bug少；
• ui用vux，结合了微信风格，组件众多；
• 接口用vue推荐的axios，作了一下封装。

vue-cli改造

css预处理用sass，vue-cli已经配置了sass，只需安装sass-loader、node-sass模块便可：

npm i sass-loader node-sass --save-dev

在组件里使用sass：

<style lang="scss" scoped>
h1{
  color: red;
}
</style>

配置vux和vux-loader，首先安装：

npm i vux vux-loader --save-dev

请在build/webpack.base.conf.js里参照以下代码进行配置：

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

安装less-loader以正确编译less源码：

npm i less less-loader --save-dev

全局变量设置

在根目录新建config.js文件：

//全局变量
export default {
  install(Vue,options) {
    Vue.prototype.URL = {
          BASE: 'www.baidu.com',
    },

    Vue.prototype.WX = {
          appId: '123456'
    }
  }
}

在根目录的main.js里面设置config.js暴露给Vue对象：

import config from './config'
Vue.use(config);

在组件里就很方便的使用啦：

created(){
    console.log(this.URL.BASE); //www.baidu.com
    console.log(this.WX.appId); //123456
}

全局函数设置

全局函数和全局变量同理，在根目录新建util/common.js文件：

//全局函数方法
export default {
  install(Vue,options) {
    /**
    *  获取url后面的参数
    */
    Vue.prototype.getUrlParams = (name) => {
      var _reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"),
          _regNext = window.location.search.substr(1).match(_reg);
      if (_regNext != null) return decodeURI(_regNext[2]) || '';
      else return '';
    },
  }
}

在根目录的main.js里面设置common.js暴露给Vue对象：

import util from './util/common'
Vue.use(util);

在组件里使用：

created(){
    this.getUrlParams('id');
}

axios封装

axios安装：

npm i axios qs --save-dev
//qs是一个序列化模块

在根目录新建fetch/api.js，引入相关模块并设置全局方法：

import axios from 'axios'
import qs from 'qs'

// axios 配置
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL = 'http://api.baidu.cn/'; //你的接口地址

未完待续...