之前找了一下vue关于adminlte3的组件库,github大部分都是2的。比较老了,都是几年前更新的。有adminlte3的,但是都只封装了一两个组件,而且居然还引入jq,然后一股脑把adminlte3的html代码复制进去,这样就成了一个组件。感觉没啥用。感觉是那些作者在练手。
vue引入jq我觉得真的没必要,会产生很多bug,可能可以解决,但是我之前遇到过引入jq出现单页面进入之后jq没法挂载,要刷新才能挂载的情况,蛋疼,一直没解决。所有我打算自己封装一个vue版本的adminlte3.
目前已经封装了快30个组件了。npm版本到0.1.8了。github 地址nly-adminlte-vuenly-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
皮肤 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
左侧导航栏收起指令 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
git clone https://github.com/nejinn/nly-adminlte-vue.git

npm install

npm run server

// 查看example,所有组件demo都在这里
http://localhost:8080npm下载
npm install nly-adminlte-vue
npm install nly-adminlte-vuemain.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);

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);