近期打算做乙個進銷存系統，因為好久沒做前端了，花了一天的時間複習了下vue，用element-ui做了個折疊式選單。其中複習到的知識點有
transition動畫，vuex狀態管理，vue-route路由。1.設定路由
import vue from 'vue'
import vuerouter from 'vue-router'
import home from '../pages/home'
import sale from '../pages/sale/index'
import stock from '../pages/stock/index'
vue.use(vuerouter)
//將路由配置在陣列物件中
export const mapmenu = [
, ,
, component: null
},, children: [},}
]},, children: [,
component: null},,
component: null},,
component: null}]
}]//例項化路由
const router = new vuerouter()
export default router
2.vuex狀態管理
因為後期需要進行前後端互動，涉及到使用者的許可權問題，所以把路由資訊放進vuex狀態管理中。這裡我新建乙個user.js，主要用來管理使用者資訊（以後的文章中會講解）
import from '../../router'
const user =
}export default user
const getters =
export default getters
state：定義狀態儲存的物件和物件初始化，state確認之後，程式執行時便不可動態新增物件。
mutations：對state的物件進行操作，切記，該操作為同步actions：同樣是對state的物件進行操作，那有了mutations，為什麼還要用actions呢？mutations是只支援同步，而actions能通過非同步來觸發mutations裡的操作。
state:
},mutations:
},actions: ) =>
}}以上定義了乙個bareffect物件，用來儲存選單欄是否摺疊的狀態
3.選單欄
首先我們需要編寫乙個leftmenu元件
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
:collapse="iscollapse"
:default-active="$route.path"> //傳遞的是user中的menus
import from 'vuex'
import menuitem from './modules/menuitem'
export default ,
computed: }}
el-scrollbar是element預設的滾動條，可通過wrapclass和viewclass設定外部樣式和內部樣式。
el-menu中的屬性自己去element-ui中檢視。
接下來我們在定義menu-item選單項
//判斷是否有子路由，有的話需要遍歷子路由
}
}
//沒有子路由則直接進入這一步
}
到了這一步我們的摺疊選單基本就完成了，實現的效果如下
vue elementUI專案搭建
安裝node 基於node之npm環境下操作vue，所以先部署node 安裝gitwget http 7 extras x86 64 packages epel release 7 11.noarch.rpm yum install y epel release 7 11.noarch.rpm yu...
重置表單（vue elementui）
第一種 在methods下的具體方法中直接乙個乙個地將表單繫結的值賦值為空 最笨的方法，只適用於僅幾個繫結值的情況下 第二種 elementui官網的方法 從這裡直接進入官網表單相關位置 model ruleform rules rules ref ruleform label width 100p...
vue elementUi許可權管理
第一次摸索著完成vue的許可權管理，在此記錄下自己搬磚的點點滴滴，希望以後回望的時候，有跡可循，也分享給需要的小夥伴們，參考哦 思路如下 1，登入成功後，把後台返回的使用者資訊，存vuex的state 2，vuex的actions調介面，返回資料後，賦值給state，然後呼叫遞迴，來把返回的資料處理...