vue 封裝 Adminlte3組件的實(shí)現(xiàn)
之前找了一下vue關(guān)于adminlte3的組件庫，github大部分都是2的。比較老了，都是幾年前更新的。有adminlte3的，但是都只封裝了一兩個(gè)組件，而且居然還引入jq，然后一股腦把a(bǔ)dminlte3的html代碼復(fù)制進(jìn)去，這樣就成了一個(gè)組件。感覺沒啥用。感覺是那些作者在練手。
vue引入jq我覺得真的沒必要，會(huì)產(chǎn)生很多bug，可能可以解決，但是我之前遇到過引入jq出現(xiàn)單頁面進(jìn)入之后jq沒法掛載，要刷新才能掛載的情況，一直沒解決。所有我打算自己封裝一個(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
- 開關(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
- 折疊版收起展開指令 v-nly-toggle
使用github下載項(xiàng)目
git clone https://github.com/nejinn/nly-adminlte-vue.git npm 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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中div contenteditable 的光標(biāo)定位方法
今天小編就為大家分享一篇Vue中div contenteditable 的光標(biāo)定位方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue3?reactive響應(yīng)式依賴收集派發(fā)更新原理解析
這篇文章主要為大家介紹了vue3響應(yīng)式reactive依賴收集派發(fā)更新原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Vue中進(jìn)行分布式鑒權(quán)與認(rèn)證的過程
在Vue應(yīng)用中，我們通常需要實(shí)現(xiàn)分布式鑒權(quán)和認(rèn)證，以確保用戶的安全性和數(shù)據(jù)的保密性，本文將介紹在Vue中如何進(jìn)行分布式鑒權(quán)與認(rèn)證,需要的朋友可以參考下2023-06-06
el-input無法輸入的問題和表單驗(yàn)證失敗問題解決
在做項(xiàng)目的時(shí)候發(fā)現(xiàn)一個(gè)情況,輸入框無法輸入值并且表單校驗(yàn)失靈,所以下面這篇文章主要給大家介紹了關(guān)于el-input無法輸入的問題和表單驗(yàn)證失敗問題解決的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要為大家介紹了tdesign vue初始化組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了vue實(shí)現(xiàn)登錄攔截，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue中的axios配置及接口請求路徑api配置方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
使用 JSON.stringify() 列化一個(gè)Error
這篇文章主要介紹了使用 JSON.stringify() 列化一個(gè)Error,需要的朋友可以參考下2023-10-10
Vue3+TypeScript實(shí)現(xiàn)遞歸菜單組件的完整實(shí)例
Vue.js中的遞歸組件是一個(gè)可以調(diào)用自己的組件,遞歸組件一般用于博客上顯示評(píng)論,形菜單或者嵌套菜單,文章主要給大家介紹了關(guān)于Vue3+TypeScript實(shí)現(xiàn)遞歸菜單組件的相關(guān)資料,需要的朋友可以參考下2021-08-08
本文主要介紹了vue中使用typescript配置，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11