離職後才搞懂vue專案開發流程中的疑惑點

Vue · 發表 2019-01-24 02:32:38

摘要：在離職的最後一個月，幫兩位同事申請加薪，確切的說，申請加薪是導火索，我被扣上了哄抬同事工資以提高自己工資的帽子，在推動前後端分離工作中處處碰壁，點燃了壓抑許久離職的衝動，領導培養自己四五年，不讓聲張，答應悄悄離開。離開時原來公司專案裡剩下很多問題沒有解決，現在自己還在做vue和動畫的專案...

在離職的最後一個月，幫兩位同事申請加薪，確切的說，申請加薪是導火索，我被扣上了哄抬同事工資以提高自己工資的帽子，在推動前後端分離工作中處處碰壁，點燃了壓抑許久離職的衝動，領導培養自己四五年，不讓聲張，答應悄悄離開。

離開時原來公司專案裡剩下很多問題沒有解決，現在自己還在做vue和動畫的專案，現在或許之前的問題已經解決了，但我還是把思路寫下來，也算對的起我悄悄離職的事情了，看到你們獲得優秀團隊獎的照片了，很棒，祝福你們:+1::clap::clap::clap:。

自動部署

這邊用的是gitLab做git伺服器，可以配置commit的鉤子函式，實現自動部署和線上釋出，就相當伺服器監聽你的提交，在你commit之後，伺服器自動執行了一下 npm run build ，放到對應的測試伺服器目錄，根目錄下有一個 .gitlab-ci.yml 檔案，起作用的是下邊一段程式碼， script 是linux指令碼，拷貝檔案到指定的靜態資源CDN目錄和web伺服器目錄，這塊知識點是 gitlab-ci 持續整合 ，可以關注一下，svn應該也有類似的配置，讓運維幫忙給配一下吧。

npm-build-test:
image: cdn路徑
stage: build
cache:
untracked: true
paths:
- node_modules/
before_script:
- export BI_ENV="test"
script:
- "npm install --registry=http://代理地址 --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/" 
- "npm run build"
- "rsync -auvz dist/index.htmlip::伺服器開發分支目錄/trunk/resources/views/index/"
- "rsync -auvz dist/* 靜態資源cdn目錄/trunk/bi/"
only:
- master分支名稱

複製程式碼

版本管理

以前咱們經常出現這種情況， v0.1的需求已經上線，v0.2的需求已經提測了，v0.3的需求在開發中，現在要修復一下v1.0的線上bug，用svn的話可能就是把修復後的檔案更新到三個分支上繼續開發，更新來更新去就 lock 了。

如果用git做版本管理，就方便很多，按照分支規範，常用4個分支， Develop 持續開發分支， Release 版本分支， Hotfix 緊緊熱修復分支， Master 上線版本主分支，可以看看 GitFlow工作流 方面的資料，真的比svn的分支好用太多了。

腳手架升級與優化

我們目前在用webpack 4.0 和 vue-cli3.0，編譯很快，建議升級，記得之前專案用vue-cli2.0編譯和打包時間很長。

Ajax全域性設定

原來專案裡用的是 jQuery.ajax 方法，其實也可以其實也可以全域性設定攔截，我們用的是 axios ，在 main.js 中引用，設定 根路徑、狀態碼、token、超時時間 等全域性設定，程式碼如下:

// 引入axios
import axios from 'axios'
// axios配置
Vue.prototype.$http = axios

// 配置預設axios引數
axios.defaults.baseURL = '/'
axios.defaults.timeout = 1000000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// 新增請求攔截器
axios.interceptors.request.use(function (config) {
let token = localStorage.getItem('token')
if(token== null && router.currentRoute.path == '/login'){// 本地無token,不為登入 跳轉至登入頁面
router.push('/login')
}else{
if(config.data==undefined){
config.data = {
"token":token
}
}else{
Object.assign(config.data,{"token":token})
}

}
return config
}, function (error) {
iView.Message.error('請求失敗')
return Promise.reject(error)
})

// 返回結果攔截
axios.interceptors.response.use(function (response) {
if(response.hasOwnProperty("data") && typeof response.data == "object"){
if(response.data.code === 998){// 登入超時 跳轉至登入頁面
iView.Message.error(response.data.msg)
router.push('/login')
return Promise.reject(response)
}else if (response.data.code === 1000) {// 成功
return Promise.resolve(response)
}
} else {
return Promise.resolve(response)
}

}, function (error) {
// 請求取消 不彈出
if(error.message != '0000'){
iView.Message.error('請求失敗')
}

// 請求錯誤時做些事
return Promise.reject(error)
})

複製程式碼

非同步操作與資料遍歷

原來的專案是保險專案，大家沒有前後端分離的業務系統經驗，都是 最基礎的介面 ，一個一個介面都是從資料字典中取出，業務邏輯往前端移， 導致前端有很多的序列、並行的非同步操作 ，請求各種介面，然後遍歷合併各種資料，序列並行我們用 promise 寫，非同步操作的問題就解決了，資料層的操作我們用 lodash.js ，效率比手寫快，這兩塊可以加深一下。

initializationTab(obj){
let This = this
return new Promise((resolve, reject) => {
This.$http
.post('/api/show/ograde-header',obj)
.then(function(response) {
return resolve(response.data.datas)
})
.catch(function(error) {

//資料丟失的狀態
This.isContent=false//是否展示載入後內容
This.isLoading=false//是否展示loading
This.isContentError=true 
This.isReady = false //是否展示資料準備中狀態
reject(error)
});
})
}
複製程式碼

當然前後端分離最好用 JWT 方案，把生成的 token 放在 redis 裡，建立 事務 , token 過期後自動刪除，如有提前退出，則給改 token 打上標識，不通過該 token 通過即可， 續簽也好解決 ，在如果 token 在到期5分鐘前訪問，則生成新 token 返回給前端，給即將過期的 token 打上標識，到期後自動刪除。

H5動畫

我們H5動畫做了很多嘗試，民生銀行的藍精靈主題、租房分期、招聘3D、消消樂等，在適配、時間軸、精靈圖、動畫效能等方面有了一定積累，筆記夭折在我的MWeb編輯器裡，如果後邊有時間再更新出來吧。

之前藍精靈動畫需求用的 TweenMax.js 和 gka 生成的css幀動畫做了那麼複雜的一個效果，效能不是特別好，畢竟操作的是DOM，如果動畫需求還多，就多熟悉熟悉 PIXI.js+TweenMax.js 兩個工具吧，我剛用它們做了一個需求， PIXI.js 有載入器、精靈圖、濾鏡、物理引擎、音視訊等好多工具，基本可以實現大部分我們在朋友圈看到的H5效果， PIXI.js 支援 canvas 和 webGL 兩種渲染。