首页 >> js开发 >> jsvue 封装 Adminlte3组件的实现js大全
jsvue 封装 Adminlte3组件的实现js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
之前找了一下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);
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);
相关文章:
- jsvue中echarts图表大小适应窗口大小且不需要刷新案例js大全
- js深入理解 ES6中的 Reflect用法js大全
- JavaScriptvuejs element table 表格添加行,修改,单独删除行,批量删除行操作
- js解决echarts图表使用v-show控制图表显示不全的问题js大全
- JavaScriptecharts.js 动态生成多个图表 使用vue封装组件操作
- jsvue-router为激活的路由设置样式操作js大全
- js完美解决vue 中多个echarts图表自适应的问题js大全
- js解决Vue @submit 提交后不刷新页面问题js大全
- jsJS中作用域以及变量范围分析js大全
- jsvue cli4.0项目引入typescript的方法js大全