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文件作为组件，然后再页面中引入组件并挂载，然后组件名当做标签名直接使用。

 

用后的结论就是，登录--全局管理--鉴权 是核心，搞懂了就没有啥了，开箱即用哈哈哈。

结束