學完vue再做項目還是一邊做一邊學（離職後才搞懂vue項目開發流程中的疑惑點）

2023-04-18 16:23:51 3

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

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

自動部署

這邊用的是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 script: - "npm install --registry=http://代理地址 --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/" - "npm run build" - "rsync -auvz dist/index.html ip::伺服器開發分支目錄/trunk/resources/views/index/" - "rsync -auvz dist/* 靜態資源cdn目錄/trunk/bi/" only: - master 分支名稱複製代碼

版本管理

腳手架升級與優化

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

Ajax全局設置

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

// 引入axiosimport axios from 'axios'// axios配置Vue.prototype.$http = axios// 配置默認axios參數axios.defaults.baseURL = '/'axios.defaults.timeout = 1000000axios.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) }); })}複製代碼

登錄

原來項目登錄是跳轉到jsp登錄頁面，然後再跳回靜態頁面，sessionID就存到cookie裡了，建立會話，也可以Form提交做登錄， 正常走接口，也會在cookie裡存上sessionID建立會話。

當然前後端分離最好用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兩種渲染。

通讀API

最新的項目是自己搭建的vue架子，功能和場景也慢慢複雜起來，還是要多看api和文檔，多了解原理，才能遊刃有餘的使用這些工具，高效的完成開發任務，比如vue的組件遞歸、緩存、強制刷新、混入、過濾器，Axios的默認配置、CancelToken等等，最近的項目筆記總結還沒有寫完，先把目錄貼出來，期望進步吧。