1、搭建專案

按照官方文件把整個專案下載下來，安裝依賴包npm install， 然後npm run dev 啟動專案。

2、專案自定義優化

刪除不要的檔案，啟動專案登入後，發現裡面有很多頁面，對我們不需要的頁面檔案和自定義元件進行刪除，同步刪除路由下的配置。

3、全域性配置調整

修改.env.development（開發環境）下的IP地址，以便對utils/request.js中axios.js設定全域性請求地址。並且配置axios的interceptors傳送請求之前token等請求頭資訊，也可以設定請求響應的攔截，對狀態碼做統一處理，最後export出axios配置物件server，在main.js頁面引入賦值給vue.prototype.$axios(個人用慣了$axios這種寫法)。

因為個人不太喜歡編譯時eslint提示的錯誤，可以找到 vue.config.js 檔案。 進行如下設定 lintOnSave: false 就ok了。

4、登入頁調整

按設計修改頁面結構和樣式，新增粒子背景，使用了一款外掛https://www.cnblogs.com/styleFeng/articles/12782514.html給個父節點，子絕父相就搞定了。為了美觀背景弄了個3D旋轉的地球，這裡使用的是Three.js很簡單的一個效果

this.camera = new THREE.PerspectiveCamera(60, 300 / 300, 1, 1000);
        this.camera.position.z = 600;
        this.scene = new THREE.Scene();
        this.scene.background = new
 
 THREE.Color( 0x182a64 );
        
        this.group = new THREE.Group();
        this.scene.add( this.group );
        
        // earth
        
        var loader = new THREE.TextureLoader();
        var textureNormal = new THREE.TextureLoader().load(this.img);
        loader.load( this.img, ( texture )=> {
        
            var geometry = new THREE.SphereGeometry( 300, 80, 80 );
        
            var material = new THREE.MeshLambertMaterial({ 
                map: texture,
                normalMap: textureNormal ,
                normalScale: new THREE.Vector2(100, 100),
                });
            var mesh = new THREE.Mesh( geometry, material );
            this.group.add( mesh );
        
        } );
        
          //點光源
            var point = new THREE.PointLight(0x666666);
            point.position.set(1000, -1200, 1000); //點光源位置
            this.group.add(point); //點光源新增到場景中
        //環境光
        var ambient = new THREE.AmbientLight(0xe0e0e0);
        this.group.add(ambient);
            
        this.renderer = new THREE.WebGLRenderer({antialias: true});
        // this.renderer.setPixelRatio( window.devicePixelRatio );
        this.renderer.setSize( 300, 300 );
        container.appendChild( this.renderer.domElement );

5、登入--鑑權

登入邏輯處理。點選登入執行store.dispatch 把登入邏輯交給action非同步處理把賬號密碼經過base64 btoa加密請求後端，返回token並且把返回的資料resolve出去然後進行路由跳轉，在路由跳轉請做請求攔截,獲取個人資訊，store.dispatch('user/getInfo')全域性管理設定個人資訊，並把許可權規則資訊resolve()出去，在攔截器中接收，在對許可權資訊進行全域性store.dispatch('permission/generateRoutes', roles)處理，匹配我們自定義的許可權欄位，進行管理儲存，並把路由規則匯出去，進行router.addRoutes(accessRoutes)鑑權。

6、路由配置

如果不做許可權這把路由配置寫到constantRoutes就行了，如果做許可權劃分，就把需要做鑑權的部分寫到asyncRoutes中，對meta下的roles陣列進行許可權欄位分配（注意專案程式碼的寫法是想要給子路由配置許可權，那父路由也要有相應的許可權）。

7、自定義元件

在components資料夾中新建自定義元件資料夾，裡面新建.vue檔案作為元件，然後再頁面中引入元件並掛載，然後元件名當做標籤名直接使用。

用後的結論就是，登入--全域性管理--鑑權 是核心，搞懂了就沒有啥了，開箱即用哈哈哈。

結束