Vue前端路线执行与落地--新项目实施与落地篇

新项目基于vue技术路线的开发

运用到的工具、框架或库

• VueJS 2.x
• Vue-router
• axios
• Vuex
• Element UI 2.x(PC端组件库)
• VUX(移动端组件库)
• Babel
• Webpack 3
• Npm

开发流程

• 使用脚手架工具创建前端工程、后端工程，配置数据库，导入示例数据。

• 根据项目实际需求，配置路由和菜单，准备各路由所对应的vue文件，vue文件内容为空白，待分配给项目成员实现。

• 在mock目录下准备mock数据，设计好数据结构（控件需要的数据结构）和字段名（最好同数据库中表结构字段名）

• 实现vue文件的界面部分，使用mockjs来拦截ajax请求，返回mock数据。

• 后端实现RESTful接口，并维护接口文档（接口文档推荐使用markdown格式）

注意事项

• JS风格使用ECMAScript 6编码风格，建议使用VSCode作为js/vue的编辑器，并安装以下插件EditorConfig for VSCode , Prettier-Standard - JavaScript formatter , JavaScript Standard Style , stylefmt , Vetur，注意不要再安装其他JS格式化工具以免冲突。

• 并且vscode的配置里要加下面的命令，防止格式化时自动加分号。
  "prettier.singleQuote": true,
  "prettier.semi": false,

• 在开发界面时使用ElementUI提供的栅格系统（24列），对界面进行响应式布局，以便移动端访问。

• 不要使用ElementUI提供的图标组件，使用Font Awesome 图标。

• 后端接口符合RESTful规范

• 注意后端返回前端的数据，字段名同数据库中的字段名，并转为小写字母开头的驼峰式命名，构造mock数据时也要注意这一点。

• 工程编译时，source目录下的lib、assets目录下的文件会被直接复制到dist目录下。

• 不要提交node_modules和dist目录到svn工程里

• 写接口的同事可维护markdown格式接口文档，并利用gitlab wiki功能编写接口文档

• 为了便于维护，对话框、页签等如果里面的内容比较多（超过30行），要独立成vue组件，尽量不要让一个vue组件的代码太多（超过500行超过20K）,尽量把vue文件里的js移到单独的文件，便于使用编辑器的js校验/js格式化功能。vue文件中css代码行数较多时（超过50行），亦可将css移到单独的css文件。模板部分要保持在vue文件里，以使用Vetur插件的模板语法校验功能。

• 从后台请求的数据有分页的情况下，Request参数的约定：pageIndex 第几页（从第1页开始）；pageSize 每页返回多少行。Response中返回数据除了有列表外，还要有total供分页条显示总记录数。特定的api也可以支持 startIndex 从第几行记录开始,count 返回多少行记录。

新项目基于vue技术路线的实施

多环境打包部署配置-测试环境

一般使用vue-cli脚手架创建的vue工程中都会有一个打包的配置目录build，其中对开发环境编译运行和生产环境打包做了相关配置，如果需要自定义测试环境的打包，我们把build.js复制一份，改名为bulid.test.js作为测试环境打包的总入口，同时复制一份webpack.prod.conf.js---->webpack.test.conf.js，修改成测试环境的相应配置即可。最后在config/index.js中增加如下配置:

 buildtest: {

    index:path.resolve(__dirname, '../dist/index.html'),

    assetsRoot:path.resolve(__dirname, '../dist'),

    assetsSubDirectory:'static',

    assetsPublicPath:'./',

    productionSourceMap:true,

    devtool:'#source-map',

    productionGzip:false,

    productionGzipExtensions: ['js', 'css'],

    bundleAnalyzerReport:process.env.npm_config_report

  },

这里对几个比较重要的配置做下说明：

• assetsPublicPath：打包后引用的静态资源位置，这里使用的是相对路径，生产环境部署的时候如果需要把静态资源部署到cdn上，这个配置改为所在cdn的绝对路径即可。

• productionSourceMap：打包以后是否保留源码map，测试环境为了调试方便，这里选择true，生产环境为了安全需要，建议配置成false。最终打包结果的区别在于是否有下图中的map文件

测试环境配置完成以后，在package.json的scripts对象中增加

"buildtest": "nodebuild/build.test.js"

然后就可以使用npmrun buildtest命令来进行测试环境的打包了。

打包静态资源问题

如果在打包的过程中想压缩资源文件,可以开启gzip压缩功能(config/index.js文件)

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true,
    productionGzipExtensions: ['js', 'css', 'jpg', 'png'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

productionGzip：true|false，是否开始压缩功能，开启压缩功能之后, 打包出来的成果物要小很多.

IE兼容性问题

Vue官方文档有对IE兼容性的说明，因为 Vue 使用了IE8 无法模拟的 ECMAScript 5 特性。所以Vue不支持 IE8 及以下版本，它支持所有兼容ECMAScript 5 的浏览器。

在项目开发完成后，却出现了IE11无法访问的情况，具体报错信息：

SCRIPT5022: [vuex] vuex requires a Promisepolyfill inthis browser.

造成这种现象的原因归根究底就是浏览器对ES6中的promise无法支持，因此需要通过引入babel-polyfill来使我们的浏览器正常使用es6的功能，解决方案：

• 首先通过npm来安装polyfill：

npm install babel-polyfill --save-dev

• 修改webpack.base.conf.js文件module.exports的配置：

  entry: {

    app: ['babel-polyfill','./src/main.js']

  },

登录状态路由拦截

一般系统都会有对所有需要权限控制的路由进行拦截，确保登录状态下才能访问某些路由这类需求。利用vue-router提供的钩子函数beforeEach()可以很简单的实现。

• 第一步：定义路由是否需要拦截

首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。

{
    path:'/xxx,
    meta: {
      requireAuth:true, // 添加该字段，表示进入这个路由是需要登录的
    },
    component:xxx,
    redirect:'/xxx/xxx,
    children: [{
      meta: {
        requireAuth:true,

      },
      path:xxx/',
      component:xxx
    }
  }

• 第二步：使用钩子函数beforeEach()拦截路由

// 全局导航钩子

router.beforeEach((to, from, next) => {

  if (to.meta.requireAuth) {
    getCurrentUser().then((curUser)=>{//getCurrentUser是封装的调用后台http接口的promise接口
      if (curUser) {
        next();
      } else {
        next({
          path:'/login',
          query: {
            redirect:to.fullPath //登录页面获取该参数，在重新登录后重定向到该路由
          }
        })
      }
    }).catch((err)=>{
      next({
        path:'/login',
        query: {
          redirect:to.fullPath
        }
      })
    }); 
  } else {
    next();
  }
  
})

每个钩子方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象

• from: Route: 当前导航正要离开的路由

• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

• next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。

• next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

• next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。