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。