快速页面demo搭建

1，搭建路由

系统路由配置文件分五种视角及五个路由文件（eg:@/src/router/normalUserRouter.js），每次c更改路由则需要重新登陆账才有效，（缓存的原因）。

(1)搭建一级路由（只有一个（ children长度为1）子菜单会渲染成一级页面）

（2）搭建分组路由（isGroupMenu）

（3）搭建三级菜单：(定制化)当前只有应用开发才有三级目录，且渲染的页面固定，只需要在应用视角下增加路由即可，在页面上增加name与之对应

（4）搭建隐藏菜单：配置 hidden: true,

2，页面结构

注解：

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属性显示指定，

父组件->子组件

子组件：-===

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垂直居中);

使用：

注：别写行类型样式，不好维护

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）如何正确使用已存在的组件，注意你使用的组件需要传啥值!