記錄一下，使用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/'; //你的接口地址

未完待續...