最近使用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：

配置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 代码赋值给变量 webpackConfigmodule.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/'; //你的接口地址

未完待续...