1，搭建路由
系統(tǒng)路由配置文件分五種視角及五個路由文件（eg:@/src/router/normalUserRouter.js）规伐，每次c更改路由則需要重新登陸賬才有效，（緩存的原因）枚荣。
(1)搭建一級路由（只有一個（ children長度為1）子菜單會渲染成一級頁面）
（2）搭建分組路由（isGroupMenu）
（3）搭建三級菜單：(定制化)當前只有應用開發(fā)才有三級目錄灵再，且渲染的頁面固定，只需要在應用視角下增加路由即可奴艾，在頁面上增加name與之對應
（4）搭建隱藏菜單：配置 hidden: true,
2净当，頁面結構
注解：
1.template：也叫模版占位符，幫助我們包裹元素握侧，在循環(huán)過程中不被渲染在頁面上,且每個頁面有且只有一個根元素
2.props是來自父級蚯瞧，而data中的是組件自己的數(shù)據(jù)。作用域是組件的本身品擎。 這兩種數(shù)據(jù)都可以在模板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,
2,父子組件傳值和方法調(diào)用
（1）父組件->子組件：通過子組件props屬性來傳遞數(shù)據(jù)， props是一個數(shù)組秀菱，屬性的值必須在組件中通過props屬性顯示指定振诬，
子組件：<Hello v-bind:msg="您好"></Hello>-===<Hello my-Msg="您好"></Hello>
2.子組件->父組件：父組件給子組件傳遞一個函數(shù)，由子組件中通過$emit()觸發(fā)自定義事件事件
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辫呻，接口數(shù)據(jù)渲染
1.引入接口文檔
import { OrganizationService ，HostService琼锋，...} from "@/services";
import Message from "@/views/Messages.js";
6放闺，vue基礎補充
Vue.js的指令是以v-開頭的，它們作用于HTML元素缕坎，指令提供了一些特殊的特性怖侦，將指令綁定在元素上時，指令會為綁定的目標元素添加一些特殊的行為谜叹，我們可以將指令看作特殊的HTML特性.當表達式的值改變時匾寝，將其產(chǎn)生的連帶影響，響應式地作用于 DOM
v-if指令:v-if是條件渲染指令叉谜，v-if指令是根據(jù)條件表達式的值來執(zhí)行元素的插入或者刪除行為,他的值可以是一個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指令基于一個數(shù)組渲染一個列表，使用?v-for?的時候提供?key?屬性码倦，以獲得性能提升
v-bind指令：v-bind:aaa指令可以在其名稱后面帶一個參數(shù)（簡寫? :aaa=""）企孩，中間放一個冒號隔開，指令將aaa屬性和vue實例變量進行綁定袁稽，當表達式的值改變時勿璃，將其產(chǎn)生的連帶影響，響應式地作用于 DOM
v-on指令:v-on指令用于給監(jiān)聽DOM事件,簡寫：@click="",可以增加修飾符（）
v-text指令：更新DOM對象的 textContent
v-html：更新DOM對象的 innerHTML
v-model：在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定推汽，監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)
v-once：vue只渲染元素和組件一次补疑。隨后的重新渲染，元素/組件及其所有的子節(jié)點將被視為靜態(tài)內(nèi)容并跳過歹撒。這可以用于優(yōu)化更新性能莲组。
7. vue的生命周期
生命周期鉤子函數(shù)的定義：從組件被創(chuàng)建，到組件掛載到頁面上運行暖夭，再到頁面關閉組件被卸載锹杈，這三個階段總是伴隨著組件各種各樣的事件，這些事件迈着，統(tǒng)稱為組件的生命周期函數(shù)竭望！簡單說：一個組件從開始到最后消亡所經(jīng)歷的各種狀態(tài)，就是一個組件的生命周期,Vue在執(zhí)行過程中會自動調(diào)用生命周期鉤子函數(shù).
1.beforeCreate():在實例初始化之后裕菠，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用,
2.created():可以調(diào)用methods中的方法咬清、改變data中的數(shù)據(jù),發(fā)送請求獲取數(shù)據(jù)
3.?beforeMounted():在掛載開始之前被調(diào)用
4.mounted():vue實例已經(jīng)掛載到頁面中，可以獲取到el中的DOM元素奴潘，進行DOM操作
5.?beforeUpdated():數(shù)據(jù)更新時調(diào)用枫振，?DOM 還未更新
6.updated()：?DOM 已經(jīng)更新完畢
7.beforeDestroy()：實例銷毀之前,可以執(zhí)行清楚定時器等操作
8.destroyed()：實例銷毀，Vue 實例指示的所有東西都會解綁定萤彩，所有的事件監(jiān)聽器會被移除
附錄：
（1）當前封裝的公共組建和方法，
（1.Tools中時間轉換斧拍，優(yōu)美時間等
（2.跳轉路由雀扶，根據(jù)視角不同，跳同一頁面Tools.RouteJumpName('BranchJobsDetail')
（3.獲取視角并帶視角對應的ID: this.getCurrentViewTypeData().then(parmer => {});
（2）如何正確使用已存在的組件肆汹，注意你使用的組件需要傳啥值!
（3）多寫備注,少寫行內(nèi)樣式
