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很简单的一个效果
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文件作为组件,然后再页面中引入组件并挂载,然后组件名当做标签名直接使用。
用后的结论就是,登录--全局管理--鉴权 是核心,搞懂了就没有啥了,开箱即用哈哈哈。
结束