vue 封装 Adminlte3组件的实现

站长资源 2024/12/23 佚名

15 1538 15

铁雪资源网 Design By www.gsvan.com

之前找了一下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