vue.js 3.0前端技术

社会在发展，技术在进步。前端技术日新月异，虽然之前学过一篇关于vue.js的学习心得，但如今又有新的玩法，故再写一篇关于最新的前端技术。

前端常用技术

vue.js、vue-cli（基于vue的脚手架工具）、webpack、vue-router、vuex

element UI、iview UI、vux UI(主要针对手机端)

构建项目

安装好node.js后，也就集成安装了npm工具。通过npm，全局安装vue-cli脚手架，具体安装可参考vue-cli官方网站。

通过vue-cli脚手架，即可一键生成基于vue的项目，具体也可查看vue-cli官方。

基于vue-cli 3.0 脚手架，可通过vue add命令添加相关组件，比如添加vue-router，vuex，以及UI框架（如：elementUI和iViewUI），可以两个同时添加进去，想用哪个就用哪个，不会出现冲突的。

前端开发

具体开发，可参考vue.js官方网站或对应UI框架官网。

接口请求

所谓前后端分离，即前端通过REST API方式请求后端数据，前端后端相当于是两个服务，当然，也可以放到同一个web服务器上。前端rest api的配置，需要配置相关的代理请求。本质上是通过基于webpack的代理，现在的基于vue-cli 3.0，可直接在vue-config.js上配置，如没有对应文件，可自行添加在与package.json同级根目录下。

代理配置参考：

var proxyConfig = require('./config/proxyConfig')
// vue.config.js
module.exports = {
    // 选项...
    devServer: {
        open: true,
        host: '0.0.0.0',
        port: 8080,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: proxyConfig.proxy,
        before: function(app, server) {
          app.use(
            "/static",
            express.static(path.resolve(__dirname, "public/static/"))
          );
        }
    },
...
}

config/proxyConfig.js如下：

module.exports = {
    proxy: {
        '/api': {
            // target: 'https://diwang.webshao.com', // 接口域名
            target: 'http://127.0.0.1:3000', // 接口本地
            ws: true,
            changeOrigin: true, //是否跨域
            pathRewrite: {
                '^/api': '/api'
              }
        }
    }
}

即可实现，前端以/api开头的请求，都进入到后端服务端口为3000的本地服务，且入口地址也是以/api开头。

前端请求可以使用基于jQuery的ajax，但是有些重，也可以使用轻量级的axios

打包运行

完成开发后，可通过npm run build进行打包，打包后，会生成dist文件夹，直接复制这个文件夹到一个web服务器上，如：apache、nginx、IIS、或者直接基于nodejs的express或者其他。但是要注意，代理需要重新在web服务器上进行配置。具体可自行百度。提供nodejs的配置方式：

app.use('/api', proxy('http://127.0.0.1:3000', {
  proxyReqPathResolver: function (req) {
    return new Promise(function (resolve, reject) {
      setTimeout(function () { // simulate async
        var parts = req.url.split('?');
        var queryString = parts[1];
        var updatedPath = parts[0].replace(/test/, 'tent');
        var resolvedPathValue = '' + updatedPath + (queryString ? '?' + queryString : '');
        resolve(resolvedPathValue);
      }, 20);
    });
  }
}));

直接在创建web服务器的时候，添加对应的以/api开头的请求，代理到本地服务端口为3000的web服务。

安全性

用户信息

一般用户登录后，后台通过用户名和密码，以及登录时间之类的信息，生成token认证。登录成果后，后端把生成的认证码发送给前端，前端存储在浏览器的localStorage中，然后在请求的全局配置中，验证是否有认证信息，并且把认证信息添加到请求的header中，后端来统一判断认证是否有效。

权限信息

权限信息如权限菜单列表等信息，可在登录时候直接请求一次，然后存储在localStorage中，以此就不需要每次刷新都要去请求用户权限信息。

状态信息

一些实时状态信息，如监控系统的设备状态信息等，可通过socket.io的方式传输，前端可通过配置vuex来与socket.io通讯，绑定到对应的vuex中，在需要用到的组件当中，直接使用vuex，这样能够达到状态的及时响应。vuex能够有很好的实时性和大数据I/O。