之前找了一下vue關於adminlte3的元件庫，github大部分都是2的。比較老了，都是幾年前更新的。有adminlte3的，但是都只封裝了一兩個元件，而且居然還引入jq，然後一股腦把adminlte3的html程式碼複製進去，這樣就成了一個元件。感覺沒啥用。感覺是那些作者在練手。

vue引入jq我覺得真的沒必要，會產生很多bug，可能可以解決，但是我之前遇到過引入jq出現單頁面進入之後jq沒法掛載，要重新整理才能掛載的情況，蛋疼，一直沒解決。所有我打算自己封裝一個vue版本的adminlte3.
目前已經封裝了快30個元件了。npm版本到0.1.8了。

github 地址nly-adminlte-vue

目前完成事情

元件

• 面板 theme
• 摺疊板 collapse
• 導航欄 navbar
• 導航 nav
• 柵格佈局 grid row col
• 容器 container
• 正文容器 content
• 包裝容器 wrapper
• 文字路由 link
• 按鈕 button
• 開關 switch
• 卡片 card
• 小標籤 badge
• 下拉選單 dropdown
• 圖示 icon
• 右側收縮板 control-sidebar
• 罩層 overlay
• 彈框訊息 toast
• 旋轉loading spinner
• 進度條 progress
• 時間軸 timeline
• 麵包屑導航 breadcrumb

指令

• 左側導航欄收起指令 v-nly-sidebar-collapse
• 右側收縮版收起指令 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);

到此這篇關於vue 封裝 Adminlte3元件的實現的文章就介紹到這了,更多相關vue 封裝Adminlte3 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！