在離職的最后一個(gè)月，幫兩位同事申請(qǐng)加薪，確切的說，申請(qǐng)加薪是導(dǎo)火索，我被扣上了哄抬同事工資以提高自己工資的帽子，在推動(dòng)前后端分離工作中處處碰壁，點(diǎn)燃了壓抑許久的離職沖動(dòng)，領(lǐng)導(dǎo)培養(yǎng)自己四五年，不讓聲張，答應(yīng)悄悄離開。

離開時(shí)原來公司項(xiàng)目里剩下很多問題沒有解決，現(xiàn)在自己還在做vue和動(dòng)畫的項(xiàng)目，現(xiàn)在或許之前的問題已經(jīng)解決了，但我還是把思路寫下來，也算對(duì)的起自己悄悄離職的事情了，看到你們獲得優(yōu)秀團(tuán)隊(duì)獎(jiǎng)的照片了，很棒，祝福你們????。

自動(dòng)部署

這邊用的是gitLab做git服務(wù)器，可以配置commit的鉤子函數(shù)，實(shí)現(xiàn)自動(dòng)部署和線上發(fā)布，就相當(dāng)服務(wù)器監(jiān)聽你的提交，在你commit之后，服務(wù)器自動(dòng)執(zhí)行了一下npm run build，放到對(duì)應(yīng)的測(cè)試服務(wù)器目錄，配置文件在根目錄下有.gitlab-ci.yml文件，起作用的是下邊一段代碼，script是linux腳本，拷貝文件到指定的靜態(tài)資源CDN目錄和web服務(wù)器目錄，這塊知識(shí)點(diǎn)是gitlab-ci 持續(xù)集成，可以關(guān)注一下，svn應(yīng)該也有類似的配置，讓運(yùn)維幫忙給配一下吧。

npm-build-test:image: cdn路徑stage: buildcache:untracked: truepaths:- 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.html ip::服務(wù)器開發(fā)分支目錄/trunk/resources/views/index/"- "rsync -auvz dist/* 靜態(tài)資源cdn目錄/trunk/bi/"only:- master 分支名稱復(fù)制代碼

版本管理

以前咱們經(jīng)常出現(xiàn)這種情況， v0.1的需求已經(jīng)上線，v0.2的需求已經(jīng)提測(cè)了，v0.3的需求在開發(fā)中，現(xiàn)在要修復(fù)一下v1.0的線上bug，用svn的話可能就是把修復(fù)后的文件更新到三個(gè)分支上繼續(xù)開發(fā)，更新來更新去就lock了。

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

腳手架升級(jí)與優(yōu)化

我們目前在用webpack 4.0 和 vue-cli3.0，編譯很快，建議升級(jí)，記得之前項(xiàng)目用vue-cli2.0編譯和打包時(shí)間很長(zhǎng)。

Ajax全局設(shè)置

原來項(xiàng)目里用的是jQuery.ajax方法，其實(shí)也可以其實(shí)也可以全局設(shè)置攔截，我們用的是axios，在main.js中引用，設(shè)置根路徑、狀態(tài)碼、token、超時(shí)時(shí)間等全局設(shè)置，代碼如下:

// 引入axios import axios from 'axios' // axios配置 Vue.prototype.$http = axios// 配置默認(rèn)axios參數(shù) axios.defaults.baseURL = '/' axios.defaults.timeout = 1000000 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'// 添加請(qǐng)求攔截器 axios.interceptors.request.use(function (config) {let token = localStorage.getItem('token')if(token== null && router.currentRoute.path == '/login'){// 本地?zé)otoken,不為登錄 跳轉(zhuǎn)至登錄頁(yè)面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('請(qǐng)求失敗')return Promise.reject(error) })// 返回結(jié)果攔截 axios.interceptors.response.use(function (response) {if(response.hasOwnProperty("data") && typeof response.data == "object"){if(response.data.code === 998){// 登錄超時(shí) 跳轉(zhuǎn)至登錄頁(yè)面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) {// 請(qǐng)求取消 不彈出if(error.message != '0000'){iView.Message.error('請(qǐng)求失敗')}// 請(qǐng)求錯(cuò)誤時(shí)做些事return Promise.reject(error) })復(fù)制代碼

異步操作與數(shù)據(jù)遍歷

原來的項(xiàng)目是保險(xiǎn)項(xiàng)目，大家沒有前后端分離的業(yè)務(wù)系統(tǒng)經(jīng)驗(yàn)，都是最基礎(chǔ)的接口，一個(gè)一個(gè)接口都是從數(shù)據(jù)字典中取出，業(yè)務(wù)邏輯往前端移，導(dǎo)致前端有很多的串行、并行的異步操作，請(qǐng)求各種接口，然后遍歷合并各種數(shù)據(jù)，串行并行我們用promise寫，異步操作的問題就解決了，數(shù)據(jù)的操作我們用lodash.js，效率比手寫快，這兩塊可以加深一下。

initializationTab(obj){let This = thisreturn new Promise((resolve, reject) => {This.$http.post('/api/show/ograde-header',obj).then(function(response) {return resolve(response.data.datas)}).catch(function(error) {//數(shù)據(jù)丟失的狀態(tài)This.isContent=false //是否展示加載后內(nèi)容This.isLoading=false //是否展示loadingThis.isContentError=true This.isReady = false //是否展示數(shù)據(jù)準(zhǔn)備中狀態(tài)reject(error)});}) } 復(fù)制代碼

登錄

原來項(xiàng)目登錄是跳轉(zhuǎn)到j(luò)sp登錄頁(yè)面，然后再跳回靜態(tài)頁(yè)面，sessionID就存到cookie里了，建立會(huì)話，也可以Form提交做登錄， 正常走接口，也會(huì)在cookie里存上sessionID建立會(huì)話。

當(dāng)然前后端分離最好用JWT方案，把生成的token放在redis里，建立事務(wù),token過期后自動(dòng)刪除，如有提前退出，則給改token打上標(biāo)識(shí)，不通過該token通過即可，續(xù)簽也好解決，在如果token在到期5分鐘前訪問，則生成新token返回給前端，給即將過期的token打上標(biāo)識(shí)，到期后自動(dòng)刪除。

H5動(dòng)畫

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

之前藍(lán)精靈動(dòng)畫需求用的TweenMax.js和gka生成的css幀動(dòng)畫做了那么復(fù)雜的一個(gè)效果，性能不是特別好，畢竟操作的是DOM，如果動(dòng)畫需求還多，就多熟悉熟悉PIXI.js+TweenMax.js兩個(gè)工具吧，我剛用它們做了一個(gè)需求，PIXI.js有加載器、精靈圖、濾鏡、物理引擎、音視頻等好多輔助工具，基本可以實(shí)現(xiàn)大部分我們?cè)谂笥讶吹降腍5效果，PIXI.js支持canvas和webGL兩種渲染。

通讀API

最新的項(xiàng)目是自己搭建的vue架子，功能和場(chǎng)景也慢慢復(fù)雜起來，還是要多看api和文檔，多了解原理，才能游刃有余的使用這些工具，高效的完成開發(fā)任務(wù)，比如vue的組件遞歸、緩存、強(qiáng)制刷新、混入、過濾器，Axios的默認(rèn)配置、CancelToken等等，最近的項(xiàng)目筆記總結(jié)還沒有寫完，先把目錄貼出來，期望進(jìn)步吧。

如果你們還在從事前端，相忘于江湖吧??。

總結(jié)

以上是生活随笔為你收集整理的离职后才搞懂vue项目开发流程中的疑惑点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。