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

 

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

 

 

结束

 

posted @ 2020-12-28 17:36  JS-Feng  阅读(656)  评论(0编辑  收藏  举报