vue 管理後台手把手搭建 (5)

2021-08-28 07:52:02 字數 1228 閱讀 1215

許可權寫完了,開始寫主頁面,如下

主要由側邊欄,頭部,tag標籤和主頁面構成。

主要介紹tag標籤。

a   側邊欄:

引用element-ui框架,從全域性導航鉤子開始說起,當我們拉取完使用者token後,需要拉取使用者許可權,我們需要對拉取來的使用者許可權做處理,判斷是否為超管許可權或者為該使用者應展示的許可權內容,將其存放到vuex中,當我們渲染的時候,在從vuex中獲取資料。

b   tag標籤:

(1)在store/modules/下新建tagsview.js

const tagsview = ,

mutations: )

if (!view.meta.nocache)

},del_visited_views: (state, view) =>

}for (const i of state.cachedviews) }},

del_others_views: (state, view) =>

}for (const i of state.cachedviews) }},

del_all_views: (state) =>

},actions: , view) ,

delvisitedviews(, view) )

},delothersviews(, view) )

},delallviews() )}}}

export default tagsview

接著 在store中註冊,在getter.js中引用

如何渲染,在vue頁面編寫如下:

methods: 

return false

},isactive(route) ,

addviewtags()

this.$store.dispatch('addvisitedviews', route)

},movetocurrenttag() }})

},closeselectedtag(view) else }})

},closeotherstags() )

},closealltags() ,

openmenu(tag, e) ,

closemenu() }}

vue 管理後台手把手搭建 (2)

我們搭建webpack框架,並引入element 搭建框架之前有講過,從引入element開始 1 引入element.ui a cnpm i element ui s b 在main.js中引入 import elementui from element ui import element ui ...

手把手教你搭建 vue 環境

安裝成功後 右鍵選單 我們可以看到 gti bash here 說明我們已經安裝成功git 1.2 檢測node 是否安裝成功 右鍵空白,選擇 gti bash here 彈出 1.2.1 在終端輸入 node v 如果輸出版本號,說明我們安裝node 環境成功 隨便我們可以檢視 npm 的 版本號...

手把手搭建vps FQ

廢話不多說了,直接上手幹起來 一 vps選擇及購買 樓主選擇的是搬瓦工,網上口碑還是很不錯的,而且 也較便宜。購買 已被牆。可訪問國內備用 購買方案 如果只是個人用推薦購買 19.99 year,有時可能會斷貨。且現在支援支付寶購買。配置如下 關於架構和線路選擇樓主不是很熟悉,等日後會了更新 購買流...