后台pc端配置基础架构设计-CFANZ编程社区

前言

基础架构地址：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 路由配置

1.2 路由分为：

1.静态路由: 如登录页 ，404错误页面等

2.动态路由: 受权限控制的页面，也就是我们要写的业务页面

2 CSS全局样式

3.mixin混合

本项目中加入了globolMixins.js作为全局混合，也就是说所有的页面都可以使用混合里面的方法，主要包括以下
1.公共的用到的属性 如 pageNum pageSize 等
2.公共的js Api 如 提示elMessage  数组筛选api等

4.请求axios

5.VUEX

VUEX直接增加一个.js文件就能使用 如： experimentCenter.js
应为在index.js文件中已经配置了自定引入

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")

6.icon的使用

6.1 使用element里的icon

6.2使用之定义icon

使用例子：

7.登录以及权限控制

7.1登录权限

7.2 菜单权限

8 页面跳转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)
}

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")