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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實(shí)現(xiàn)類似淘寶商品評(píng)價(jià)頁面星級(jí)評(píng)價(jià)及上傳多張圖片功能
最近在寫一個(gè)關(guān)于vue的商城項(xiàng)目，然后集成在移動(dòng)端中，開發(fā)需求中有一界面，類似淘寶商城評(píng)價(jià)界面！接下來通過本文給大家分享vue實(shí)現(xiàn)類似淘寶商品評(píng)價(jià)頁面星級(jí)評(píng)價(jià)及上傳多張圖片功能，需要的朋友參考下吧2018-10-10
在本篇文章里小編給大家整理的是一篇關(guān)于Vue3.0的優(yōu)化總結(jié)內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。2020-10-10
element根據(jù)輸入動(dòng)態(tài)生成表格的示例代碼
在現(xiàn)代電商系統(tǒng)開發(fā)中,后臺(tái)管理界面經(jīng)常需要根據(jù)商品規(guī)格和規(guī)格值動(dòng)態(tài)生成SKU表格,本文通過element-ui框架,展示了如何在Vue.js的環(huán)境下,利用子組件和動(dòng)態(tài)綁定的方式,實(shí)現(xiàn)SKU表格的增刪改查功能2024-11-11
vue使用this.$message不生效的部分原因及解決方案
這篇文章主要介紹了vue使用this.$message不生效的部分原因及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
vue使用echarts實(shí)現(xiàn)中國地圖和點(diǎn)擊省份進(jìn)行查看功能
這篇文章主要介紹了vue使用echarts實(shí)現(xiàn)中國地圖和點(diǎn)擊省份進(jìn)行查看功能,本文通過實(shí)例代碼給大家詳細(xì)講解，對(duì)vue echarts 中國地圖相關(guān)知識(shí)感興趣的朋友一起看看吧2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue-cropper實(shí)現(xiàn)裁剪圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
使用vite構(gòu)建vue3項(xiàng)目的實(shí)現(xiàn)步驟
通過本文,您可以了解如何使用Vue CLI創(chuàng)建Vue 3項(xiàng)目,配置Vite,利用其優(yōu)勢進(jìn)行開發(fā),具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
使用vue-cli創(chuàng)建vue2項(xiàng)目的實(shí)戰(zhàn)步驟詳解
相信大部分Vue開發(fā)者都使用過vue-cli來構(gòu)建項(xiàng)目,它的確很方便,但對(duì)于很多初級(jí)開發(fā)者來說,還是要踩不少坑的,下面這篇文章主要給大家介紹了關(guān)于使用vue-cli創(chuàng)建vue2項(xiàng)目的實(shí)戰(zhàn)步驟,需要的朋友可以參考下2023-01-01
Slots Emit和Props穿透組件封裝實(shí)現(xiàn)摸魚加鐘
這篇文章主要為大家介紹了Slots Emit和Props穿透組件封裝實(shí)現(xiàn)示例詳解，為摸魚加個(gè)鐘，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue-router清除url地址欄路由參數(shù)的操作代碼
這篇文章主要介紹了vue-router清除url地址欄路由參數(shù),本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2015-11-11