前言：
目前前端框架由三大主流框架构成Vue、Angular、React，UI库更是层出不穷还有TypeScript超集等等
技术选型
但是对于个人开发者或者中小企业来说Vue更适合作为前端框架使用，因为Vue框架在国内目前是相对盛行的，入门简单、上手容易，人员招聘上以及开发进度上都能很好的把控住
搭建
选择的是Vue2.0，UI库是采用iview，为什么不采用大家较为熟知的elementUi，个人比较偏向iview虽然部分定制功能收费，但是容易上手，文档清晰。直接使用vue-cli生成项目目录，下面会一一分析
config //配置文件夹
src
└─ api //api配置，请求拦截请求响应
| └─index.js
├─ router //路由配置，路由拦截路由相应
| └─index.js
├─ views
└─ main.js
package-lock.json
package.json
vue.config.js //webpack配置
环境配置
项目肯定有不同环境配置，开发环境，测试环境，生产环境
在config文件下配置
module.exports = {
//开发环境
development:{
target:'http://111.111.111:8080', //需要指向的IP
wsTarget:'http://111.111.111:8080', //websocket地址
staticTarget:'http://111.111.111:8080' //静态服务地址
},
//测试环境 同上
test:{ },
//生产环境 同上
production:{}
}
安装
npm install --save-dev cross-env
在package.json中配置指定的环境命令
"dev": "cross-env NODE_ENV=development vue-cli-service serve",
"dev-build": "cross-env NODE_ENV=development vue-cli-service build"
在vue.config.js中即可指定相应的环境
const config = require('./config/index')
const target = config[process.env.NODE_ENV].target
module.exports = {
devServer:{
proxy:{
'/':{
target:target,
ws:true,
changOrigin:true
}
}
}
}
axios配置
可以在api文件夹下统一封装axios，包括状态码拦截，请求头添加，上个简单的代码
import axios from 'axios';
//封装post请求
function postMethon(url, data, header){
return new Promise((resolve, reject) => {
axios.request({
url:url,
method:'post',
data:data,
headers:{
'Content-Type': 'application/json; charset=UTF-8',
}
})
.then(res => {
//这里可以不直接resolve，可以在封装一个状态码校验的方法过滤一下
resolve(res)
})
.catch(error => {
reject(error)
})
})
}
路由拦截
一般路由拦截适用于的场景比较多的是登录，或者是SSO单点登录
router.beforeEach((to, from, next) => {
//如果进入的不是登录页并且用户信息不存在
if(to.name != 'login' && !sessionStorage.getItem('userInfo')){
//你想干嘛
}else{
next()
}
})
也有人问为什么不用Vuex，我个人更倾向于sessionStorage，因为Vuex在定义初始值，去动态改变后手动刷新页面，Vuex的值会初始化，so还是sessionStorage
还有SSO的实现方式，以及按钮级别颗粒度的用户权限控制，以及灰度发布的实现等等等.....改变再写...
