vue 封裝 Adminlte3組件的實現(xiàn)

更新時間：2020年03月18日 08:37:49 作者：nejinn

這篇文章主要介紹了vue 封裝 Adminlte3組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

vue引入jq我覺得真的沒必要，會產(chǎn)生很多bug，可能可以解決，但是我之前遇到過引入jq出現(xiàn)單頁面進(jìn)入之后jq沒法掛載，要刷新才能掛載的情況，一直沒解決。所有我打算自己封裝一個vue版本的adminlte3.
目前已經(jīng)封裝了快30個組件了。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
時間軸 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下載項目

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組件的實現(xiàn)的文章就介紹到這了,更多相關(guān)vue 封裝Adminlte3 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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