离职后才搞懂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等等，最近的项目笔记总结尚未写完，先把目录贴出来，指望进步吧。

若是大家还在从事前端，相忘于江湖吧🤣😂。