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

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

離開時原來公司項目裏剩下不少問題沒有解決，如今本身還在作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 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::服務器開發分支目錄/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)
            });
    })
}
複製代碼

登陸

原來項目登陸是跳轉到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等等，最近的項目筆記總結尚未寫完，先把目錄貼出來，指望進步吧。

若是大家還在從事前端，相忘於江湖吧🤣😂。