之前找了一下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都在这里 :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 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: