nly-adminlte-vue

1. nly-adminlte-vue

• 1. nly-adminlte-vue
• 2. demo
• 3. 文档
• 4. 进度
  • 4.1. 组件
  • 4.2. 指令
  • 4.3. 使用
    • 4.3.1. 可以直接clone下载项目
    • 4.3.2. 从npm下载
• 5. 感谢

nly-adminlte-vue是一个基于adminlte3封装的vue组件库。干掉jq，让vue更好的使用adminlte3。

欢迎加群交流 QQ群：927568606

目前版本为测试版本，欢迎体验更新代码。可能会 存在新版本不兼容旧版本prop的情况，请注意

2. demo

demo可以看到跟master同步的组件。点击下面 demo-国内 demo-github

3. 文档

nly-daminlte-vue-docs

注意 : 目前文档还没有完全迁移到网站上，网站上没有文档的可以在对应组件文件夹下面的README.md查看

4. 进度

目前已经封装完成

4.1. 组件

• 皮肤 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
• 信息箱 infobox
• 表格 table 表格是bootstrapVue的组件。传送门bootstrapVue
• 提示工具 tooltip
• 分页 paginaton
• 渲染函数 renderfunction 根据数组渲染整个页面的组件
• 表单 form
• input框 input
• 表单验证 feedback
• 日志组件 log
• 列表 list-group
• 弹框 modal
• tab标签 tabs

4.2. 指令

• 左侧导航栏收起指令 v-nly-sidebar-collapse
• 右侧收缩版收起指令 v-nly-control-sidebar-collapse
• 卡片最大化指令 v-nly-card-maximized
• 折叠版收起展开指令 v-nly-toggle
• 提示工具指令 v-nly-tooltip
• 弹框工具指令 v-nly-modal
• 滚动条工具指令 v-nly-scrollspy

4.3. 使用

4.3.1. 可以直接clone下载项目

git clone https://github.com/nejinn/nly-adminlte-vue.git

npm install 

npm run serve

// 查看example，所有组件demo都在这里
http://localhost:8080

4.3.2. 从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, NlyAdminlteVueIcons } from "nly-adminlte-vue";
Vue.use(NlyAdminlteVue);
Vue.use(NlyAdminlteVueIcons);

• 单包引入

比如引入 nly-badge

import { NlyBadge } from "nly-adminlte-vue";
Vue.component('nly-badge', NlyBadge)

整个badgePlugin导出

import { badgePlugin } from "nly-adminlte-vue";
Vue.use(badgePlugin);

5. 感谢

bootstrapVue