vue-element-admin項目核心總結

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很簡單的一個效果

 

 

　　　　　　import * as THREE from 'three'

　　　　　　camera: null,

   　　　　 scene: null,

    　　　  renderer: null,

   　　　　 group: null,

    　　　　mouseX:0,

    　　　　mouseY: 0,

    　　　　renderer:null,

    　　　　img:require('xxx.jpg')

　　　　　　let container = document.getElementById('container');

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文件作為組件，然后再頁面中引入組件並掛載，然后組件名當做標簽名直接使用。

 

用后的結論就是，登錄--全局管理--鑒權 是核心，搞懂了就沒有啥了，開箱即用哈哈哈。

 

 

結束