之前找了一下vue關(guān)于adminlte3的組件庫(kù)，github大部分都是2的。比較老了，都是幾年前更新的。有adminlte3的，但是都只封裝了一兩個(gè)組件，而且居然還引入jq，然后一股腦把a(bǔ)dminlte3的html代碼復(fù)制進(jìn)去，這樣就成了一個(gè)組件。感覺(jué)沒(méi)啥用。感覺(jué)是那些作者在練手。

vue引入jq我覺(jué)得真的沒(méi)必要，會(huì)產(chǎn)生很多bug，可能可以解決，但是我之前遇到過(guò)引入jq出現(xiàn)單頁(yè)面進(jìn)入之后jq沒(méi)法掛載，要刷新才能掛載的情況，蛋疼，一直沒(méi)解決。所有我打算自己封裝一個(gè)vue版本的adminlte3.目前已經(jīng)封裝了快30個(gè)組件了。npm版本到0.1.8了。

github 地址nly-adminlte-vue

目前完成事情

組件

皮膚 theme 折疊板 collapse 導(dǎo)航欄 navbar 導(dǎo)航 nav 柵格布局 grid row col 容器 container 正文容器 content 包裝容器 wrapper 文字路由 link 按鈕 button 開(kāi)關(guān) switch 卡片 card 小標(biāo)簽 badge 下拉菜單 dropdown 圖標(biāo) icon 右側(cè)收縮板 control-sidebar 罩層 overlay 彈框消息 toast 旋轉(zhuǎn)loading spinner 進(jìn)度條 progress 時(shí)間軸 timeline 面包屑導(dǎo)航 breadcrumb

指令

左側(cè)導(dǎo)航欄收起指令 v-nly-sidebar-collapse 右側(cè)收縮版收起指令 v-nly-control-sidebar-collapse 卡片最大化指令 v-nly-card-maximized 折疊版收起展開(kāi)指令 v-nly-toggle

使用github下載項(xiàng)目

git clone https://github.com/nejinn/nly-adminlte-vue.gitnpm install npm run server// 查看example，所有組件demo都在這里http://localhost:8080

npm下載

npm install nly-adminlte-vue

main.js

import 'nly-adminlte-vue/dist/adminlte/css/adminlte.css';import 'nly-adminlte-vue/dist/adminlte/fontawesome-free/css/all.css';import 'nly-adminlte-vue/dist/adminlte/icon/iconfont.css';import 'nly-adminlte-vue/dist/nly-adminlte-vue.css';import { NlyAdminlteVue } from 'nly-adminlte-vue';Vue.use(NlyAdminlteVue);

到此這篇關(guān)于vue 封裝 Adminlte3組件的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue 封裝Adminlte3 內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！