1，搭建路由
系统路由配置文件分五种视角及五个路由文件（eg:@/src/router/normalUserRouter.js），每次c更改路由则需要重新登陆账才有效，（缓存的原因）。
(1)搭建一级路由（只有一个（ children长度为1）子菜单会渲染成一级页面）
1
（2）搭建分组路由（isGroupMenu）
2
（3）搭建三级菜单：(定制化)当前只有应用开发才有三级目录，且渲染的页面固定，只需要在应用视角下增加路由即可，在页面上增加name与之对应
3
（4）搭建隐藏菜单：配置 hidden: true,
2，页面结构
4
注解：
1.template：也叫模版占位符，帮助我们包裹元素，在循环过程中不被渲染在页面上,且每个页面有且只有一个根元素
2.props是来自父级，而data中的是组件自己的数据。作用域是组件的本身。 这两种数据都可以在模板template以及计算属性和mothods中使用
3，js
1.使用vuex,
（1）页面引入：import { mapGetters, mapMutations } from 'vuex';
eg：使用vuex方法则在methods中注入:...mapMutations(['SET_VIEW_TYPE',...........]),
（2）当前使用较多的vuex，视角和当前信息，菜单等使用占多，
（例如：视角变量页面中使用如下）：
IS_SUPER_VIEW: this.$store.getters.IS_SUPER_VIEW,
IS_ORGANIZATION_VIEW: this.$store.getters.IS_ORGANIZATION_VIEW,
IS_DEPARTMENT_VIEW: this.$store.getters.IS_DEPARTMENT_VIEW,
IS_PROJECT_VIEW: this.$store.getters.IS_PROJECT_VIEW,
vuex变量
2,父子组件传值和方法调用
（1）父组件->子组件：通过子组件props属性来传递数据， props是一个数组，属性的值必须在组件中通过props属性显示指定，
父组件->子组件
子组件：<Hello v-bind:msg="您好"></Hello>-===<Hello my-Msg="您好"></Hello>
2.子组件->父组件：父组件给子组件传递一个函数，由子组件中通过$emit()触发自定义事件事件
子组件->父组件的方法
3.非父子组件通讯：
aaa.$on('名称一致',function(id) {// ...})
aaa.$emit('名称一致,1)
4.通过vm.$refs.aaa 获取元素和该组件
5,provide和inject注入
4，less/css
1,公用的样式(距离和flex布局)
(m,p)(0,5,10,15,20,25)=>(margin,padding):(0,5,10,15,20,25)px;
(m,p)((t,l,r,b)(0,5,10,15,20,25)=>(margin,padding)-(top,left,right,bottom):(0,5,10,15,20,25)px;
flex-center(between,start,around)(使一级child水平居中;
flex-column-center(between,start,around)(使一级child垂直居中);
使用：
6
注：别写行类型样式，不好维护
2.elemnt-Ui:element组件
（1）布局，可以采用shan ge mo shi
（2）目前仅限elementUi图标，但可以拓展
5，接口数据渲染
1.引入接口文档
import { OrganizationService ，HostService，...} from "@/services";
import Message from "@/views/Messages.js";
接口
6，vue基础补充
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性.当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
v-if指令:v-if是条件渲染指令，v-if指令是根据条件表达式的值来执行元素的插入或者删除行为,他的值可以是一个bool属性，也可以是一个返回bool的运算式
v-show指令:v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。
v-if/v-else指令：v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别
v-for=“item in Arry”指令：v-for指令基于一个数组渲染一个列表，使用 v-for 的时候提供 key 属性，以获得性能提升
v-bind指令：v-bind:aaa指令可以在其名称后面带一个参数（简写 :aaa=""），中间放一个冒号隔开，指令将aaa属性和vue实例变量进行绑定，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
v-on指令:v-on指令用于给监听DOM事件,简写：@click="",可以增加修饰符（）
v-text指令：更新DOM对象的 textContent
v-html：更新DOM对象的 innerHTML
v-model：在表单元素上创建双向数据绑定，监听用户的输入事件以更新数据
v-once：vue只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
7. vue的生命周期
生命周期钩子函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，这些事件，统称为组件的生命周期函数！简单说：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期,Vue在执行过程中会自动调用生命周期钩子函数.
1.beforeCreate():在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用,
2.created():可以调用methods中的方法、改变data中的数据,发送请求获取数据
3. beforeMounted():在挂载开始之前被调用
4.mounted():vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作
5. beforeUpdated():数据更新时调用， DOM 还未更新
6.updated()： DOM 已经更新完毕
7.beforeDestroy()：实例销毁之前,可以执行清楚定时器等操作
8.destroyed()：实例销毁，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除
附录：
（1）当前封装的公共组建和方法，
（1.Tools中时间转换，优美时间等
（2.跳转路由，根据视角不同，跳同一页面Tools.RouteJumpName('BranchJobsDetail')
（3.获取视角并带视角对应的ID: this.getCurrentViewTypeData().then(parmer => {});
（2）如何正确使用已存在的组件，注意你使用的组件需要传啥值!
（3）多写备注,少写行内样式
网友评论