最近使用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/'; //你的接口地址
未完待续...