前言：
目前前端框架由三大主流框架構(gòu)成Vue、Angular、React，UI庫更是層出不窮還有TypeScript超集等等
技術(shù)選型
但是對于個(gè)人開發(fā)者或者中小企業(yè)來說Vue更適合作為前端框架使用，因?yàn)閂ue框架在國內(nèi)目前是相對盛行的，入門簡單、上手容易，人員招聘上以及開發(fā)進(jìn)度上都能很好的把控住
搭建
選擇的是Vue2.0，UI庫是采用iview，為什么不采用大家較為熟知的elementUi，個(gè)人比較偏向iview雖然部分定制功能收費(fèi)，但是容易上手，文檔清晰。直接使用vue-cli生成項(xiàng)目目錄，下面會一一分析
config //配置文件夾
src
└─ api //api配置，請求攔截請求響應(yīng)
| └─index.js
├─ router //路由配置，路由攔截路由相應(yīng)
| └─index.js
├─ views
└─ main.js
package-lock.json
package.json
vue.config.js //webpack配置
環(huán)境配置
項(xiàng)目肯定有不同環(huán)境配置，開發(fā)環(huán)境，測試環(huán)境，生產(chǎn)環(huán)境
在config文件下配置
module.exports = {
//開發(fā)環(huán)境
development:{
target:'http://111.111.111:8080', //需要指向的IP
wsTarget:'http://111.111.111:8080', //websocket地址
staticTarget:'http://111.111.111:8080' //靜態(tài)服務(wù)地址
},
//測試環(huán)境 同上
test:{ },
//生產(chǎn)環(huán)境 同上
production:{}
}
安裝
npm install --save-dev cross-env
在package.json中配置指定的環(huán)境命令
"dev": "cross-env NODE_ENV=development vue-cli-service serve",
"dev-build": "cross-env NODE_ENV=development vue-cli-service build"
在vue.config.js中即可指定相應(yīng)的環(huán)境
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文件夾下統(tǒng)一封裝axios，包括狀態(tài)碼攔截，請求頭添加，上個(gè)簡單的代碼
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，可以在封裝一個(gè)狀態(tài)碼校驗(yàn)的方法過濾一下
resolve(res)
})
.catch(error => {
reject(error)
})
})
}
路由攔截
一般路由攔截適用于的場景比較多的是登錄，或者是SSO單點(diǎn)登錄
router.beforeEach((to, from, next) => {
//如果進(jìn)入的不是登錄頁并且用戶信息不存在
if(to.name != 'login' && !sessionStorage.getItem('userInfo')){
//你想干嘛
}else{
next()
}
})
也有人問為什么不用Vuex，我個(gè)人更傾向于sessionStorage，因?yàn)閂uex在定義初始值，去動態(tài)改變后手動刷新頁面，Vuex的值會初始化，so還是sessionStorage
還有SSO的實(shí)現(xiàn)方式，以及按鈕級別顆粒度的用戶權(quán)限控制，以及灰度發(fā)布的實(shí)現(xiàn)等等等.....改變再寫...
