# pc-admin-base-construct **Repository Path**: jzfai/pc-admin-base-construct ## Basic Information - **Project Name**: pc-admin-base-construct - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-01-07 - **Last Updated**: 2021-10-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README #### 前言 ######基础架构地址：https://gitee.com/jzfai/pc-admin-base-construct.git ``` 本架构采用： 基础架构：vue-admin-element + vue2.6 + webpack 4.0 ui组件：element-ui iview(view-design) 建议统一用element书写 请求api: "axios": "0.18.1", 时间格式化: "moment-mini": "^2.22.1", 地图： 高德地图 websocket等 ``` #### 规范建议 ``` 1.全部采用scss语言书写 且嵌套一般不超过3层 2.js方法和css的class，命名尽量唯一，不建议使用（map,socket，name,title）后期不以利维护 ``` #### 架构详解 #### 1.路由部分 #### 1.1 路由配置 [输入链接说明](http://https://upload-images.jianshu.io/upload_images/21080604-ff43c2f54f993ac0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ##### 1.2 路由分为： ``` 1.静态路由: 如登录页 ，404错误页面等 ``` ![1609916726001.png](https://upload-images.jianshu.io/upload_images/21080604-090cc8e8d78ad0bf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ``` 2.动态路由: 受权限控制的页面，也就是我们要写的业务页面 ``` ![1609916835597.png](https://upload-images.jianshu.io/upload_images/21080604-49d9ba0b83e8160f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) >注：路由配置后页面就能直接渲染出来 #### 2 CSS全局样式 ![1609917228386.png](https://upload-images.jianshu.io/upload_images/21080604-bb2e416ee0698d2f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) #### 3.mixin混合 ``` 本项目中加入了globolMixins.js作为全局混合，也就是说所有的页面都可以使用混合里面的方法，主要包括以下 1.公共的用到的属性 如 pageNum pageSize 等 2.公共的js Api 如 提示elMessage 数组筛选api等 ``` ![1609917801074.png](https://upload-images.jianshu.io/upload_images/21080604-9a04f5ddec2954a5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) #### 4.请求axios ![1609919557074.png](https://upload-images.jianshu.io/upload_images/21080604-ff6696988926f2e1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ![image.png](https://upload-images.jianshu.io/upload_images/21080604-f103f53f33727d4f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) #### 5.VUEX ![1609919842548.png](https://upload-images.jianshu.io/upload_images/21080604-ed654c9549ed98c6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ``` VUEX直接增加一个.js文件就能使用 如： experimentCenter.js 应为在index.js文件中已经配置了自定引入 ``` ![1609919889125.png](https://upload-images.jianshu.io/upload_images/21080604-fda15608db4b0c05.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ###### 5.1如何使用 ``` 1.引入 import { mapState, mapMutations, mapActions } from 'vuex' 1.1 state computed: { ...mapState({ webSocketPullData: state => state.vehicleMonitor.webSocketPullData }) }, console.log(this.webSocketPullData) 1.2 方法 methods: { ...mapMutations({ M_ADD_CACHED_VIEW: (commit, data) => { commit('tagsView/M_ADD_CACHED_VIEW', data) }, M_DEL_CACHED_VIEW: (commit, data) => { commit('tagsView/M_DEL_CACHED_VIEW', data) }, M_RESET_CACHED_VIEW: (commit) => { commit('tagsView/M_RESET_CACHED_VIEW') } }), } this.M_ADD_CACHED_VIEW(data) 1.3 或者用commit方法（推荐） this.$store.commit('tagsView/M_DEL_CACHED_VIEW',"TestIndex") this.$store.commit('tagsView/M_ADD_CACHED_VIEW',"TestIndex") ``` >所有mutation 建议以 M_开头 ； 如：M_ADD_CACHED_VIEW >所有 Actions建议以 A_开头 ； 如：A_ADD_CACHED_VIEW #### 6.icon的使用 ##### 6.1 使用element里的icon ##### 6.2使用之定义icon ![1609920676881.png](https://upload-images.jianshu.io/upload_images/21080604-8ae80267f663d99b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ##### 使用例子： ![1609920835696.png](https://upload-images.jianshu.io/upload_images/21080604-7fe718f019ac9d46.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ##### 7.登录以及权限控制 ##### 7.1登录权限 ![![1609921183178.png](https://upload-images.jianshu.io/upload_images/21080604-1a0f42f3b4d6da3d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ](https://upload-images.jianshu.io/upload_images/21080604-834d423718088e03.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ##### 7.2 菜单权限 ![1609921219594.png](https://upload-images.jianshu.io/upload_images/21080604-cff5ed92b77f38e9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) #### 8 页面跳转$router.push,$router.replace和keepAlive ##### 8.1页面跳转 ``` #跳转 toTestIndexPage() { const urlData = { params: {name:"邝华"}, form: 'TestIndex' } this.routerPushMixin('KeepAliveTest', urlData) }, #参数接收 if (this.queryParamsMixin) { const {params,form } = this.queryParamsMixin console.log(this.queryParamsMixin) } ``` ![1610011281328.png](https://upload-images.jianshu.io/upload_images/21080604-fb6fe1f766c8a19e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) >注：this.routerPushMixin()和this.queryParamsMixin已经在globolMixins.js全局混合中注入可以直接使用 ##### 8.2 keepAlive ``` 如果页面加入keepAlive中进行缓存 生命周期就会增加两个方法 activated deactivated 此时mounted不在有作用 加入keepAlive this.$store.commit('tagsView/M_ADD_CACHED_VIEW',"TestIndex") 移除keepAlive this.$store.commit('tagsView/M_DEL_CACHED_VIEW',"TestIndex") ``` ##### 8.2.1 keepAlive原理图 ![1610012581224.png](https://upload-images.jianshu.io/upload_images/21080604-e482d61364d2575f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)