vue 封装 Adminlte3组件的实现
更新时间：2020年03月18日 08:37:49 作者：nejinn
这篇文章主要介绍了vue 封装 Adminlte3组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
之前找了一下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 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
最近在写一个关于vue的商城项目，然后集成在移动端中，开发需求中有一界面，类似淘宝商城评价界面！接下来通过本文给大家分享vue实现类似淘宝商品评价页面星级评价及上传多张图片功能，需要的朋友参考下吧2018-10-10
在本篇文章里小编给大家整理的是一篇关于Vue3.0的优化总结内容，有需要的朋友们可以学习下。2020-10-10
在现代电商系统开发中,后台管理界面经常需要根据商品规格和规格值动态生成SKU表格,本文通过element-ui框架,展示了如何在Vue.js的环境下,利用子组件和动态绑定的方式,实现SKU表格的增删改查功能2024-11-11
vue使用this.$message不生效的部分原因及解决方案
这篇文章主要介绍了vue使用this.$message不生效的部分原因及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
这篇文章主要介绍了vue使用echarts实现中国地图和点击省份进行查看功能,本文通过实例代码给大家详细讲解，对vue echarts 中国地图相关知识感兴趣的朋友一起看看吧2022-12-12
这篇文章主要为大家详细介绍了vue-cropper实现裁剪图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
通过本文,您可以了解如何使用Vue CLI创建Vue 3项目,配置Vite,利用其优势进行开发,具有一定的参考价值,感兴趣的可以了解一下2023-08-08
相信大部分Vue开发者都使用过vue-cli来构建项目,它的确很方便,但对于很多初级开发者来说,还是要踩不少坑的,下面这篇文章主要给大家介绍了关于使用vue-cli创建vue2项目的实战步骤,需要的朋友可以参考下2023-01-01
这篇文章主要为大家介绍了Slots Emit和Props穿透组件封装实现示例详解，为摸鱼加个钟，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了vue-router清除url地址栏路由参数,本文给大家介绍的非常详细,需要的朋友可以参考下2015-11-11
最新评论