這篇文章將為大家詳細(xì)講解有關(guān)怎么在vue中對Adminlte3組件進(jìn)行封裝，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)建站專注于中大型企業(yè)的網(wǎng)站建設(shè)、成都做網(wǎng)站和網(wǎng)站改版、網(wǎng)站營銷服務(wù)，追求商業(yè)策劃與數(shù)據(jù)分析、創(chuàng)意藝術(shù)與技術(shù)開發(fā)的融合，累計(jì)客戶近千家，服務(wù)滿意度達(dá)97%。幫助廣大客戶順利對接上互聯(lián)網(wǎng)浪潮，準(zhǔn)確優(yōu)選出符合自己需要的互聯(lián)網(wǎng)運(yùn)用，我們將一直專注高端網(wǎng)站設(shè)計(jì)和互聯(lián)網(wǎng)程序開發(fā)，在前進(jìn)的路上，與客戶一起成長！

組件

• 皮膚 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組件進(jìn)行封裝就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。