打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
vue后台管理框架
https://github.com/herozhou/vue-framework-wz
vue后台管理框架👏
Latest commit b82c769 Sep 23, 2017
herozhou
change favicon.ico

bin add removeqiniu Sep 19, 2017

build fix fonts Sep 11, 2017

config webpack config Aug 16, 2017

src 增加多TAB功能 Sep 21, 2017

static change favicon.ico Sep 23, 2017

.babelrc .js Aug 16, 2017

.eslintignore .js Aug 16, 2017

.eslintrc.js .js Aug 16, 2017

.gitignore ignore package-lock.json Sep 17, 2017

LICENSE 更新协议 Sep 6, 2017

README.md update README.md Sep 21, 2017

favicon.ico change favicon.ico Sep 23, 2017

index.html move jquery Sep 17, 2017

package.json add commander Sep 17, 2017

README.md

vue-framework-wz

立即体验(国内)

online-website

Englist Document

本项目是后台管理框架,集成了权限管理、登录功能、UI组件、七牛上传等功能,建议直接使用。

注意:便于前端调试,所以数据请求都是用了mockjs模拟。在需要请求外部api时请移除mock文件

Features 特性

  • 👍wz脚手架👍(脚手架助你安装/卸载组件更方便)
  • 工业化UI组件(上手即用,无需自己造轮子)
  • 自适应布局(完美适配大中小屏)
  • 登录/注销
  • 权限验证
  • 👉多TAB导航(没有多TAB怎么能称为后台管理界面呢?)
  • Tinymce 编辑器
  • Markdown 编辑器
  • 动态侧边栏(支持多级路由)
  • 面包屑导航
  • JSON展示组件
  • echartjs图表
  • 404错误页面
  • 表格数据直接导出cvs
  • 多环境发布
  • mock数据
  • 炫酷hover特效

Preview 效果图

自适应布局

多TAB效果

丰富功能表格

炫酷登录界面

炫酷图表

编辑器

更多demo

系列教程

《一步步带你做vue后台管理框架》第一课:介绍框架

《一步步带你做vue后台管理框架》第二课:上手使用

《一步步带你做vue后台管理框架》第三课:登录功能

Run 开发

    # 克隆项目    git clone https://github.com/herozhou/vue-framework-wz.git    # 安装依赖    npm install    //or # 建议不要用cnpm  安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题    npm install --registry=https://registry.npm.taobao.org    # 本地开发 开启服务    npm run dev

浏览器访问 http://localhost:9001

wz脚手架

为了便于大家使用和精简体积 故开发了基于node的命令行构建工具,可安装/删除插件,比如你所开发的项目无需Tinymce插件就wz remove -p Tinymce删除Tinymce 。需要请求外部API就 执行wz remove -p Mockjs,并根据提示修改相应的api地址

请在项目初期对结构改动不大时使用cli

    # 如需使用脚手架在npm install 之后执行    npm link       # 随后即可使用wz脚手架    wz remove -p Tinymce  //卸载Tinymce插件    wz remove -p Mockjs  //卸载Mock.js插件    wz  -h 查看命令帮助

当前可卸载的插件有 Tinymce|Markdown|Mockjs|Jsontree不久会支持卸载更多插件,便于开发精简体积

Build 发布

    # 发布测试环境 带webpack ananalyzer    npm run build:sit-preview    # 构建生成环境    npm run build:prod

FileTree 目录结构

├── bin                       // node 命令行构建工具 ├── build                      // 构建相关  ├── config                     // 配置相关├── src                        // 源代码│   ├── api                    // 所有请求│   ├── components             // 全局UI组件│   ├── mock                   // mock数据│   ├── router                 // 路由│   ├── store                  // 全局store管理│   ├── utils                  // 全局公用方法│   ├── containers              // 自适应布局组合│   ├── view                   // view界面│   │    ├── charts             //图表组件│   │    ├── components         //首页组件│   │    ├── login              //登录界面│   │    ├── errorPages           //错误界面│   │    └── permission        //权限测试界面│   ├── App.vue                // 入口页面│   └── main.js                // 入口 加载组件 初始化等├── static                     // 静态资源│   ├── bower_components        //七牛SDK│   ├── css                     //css│   ├── js                      //js├── .babelrc                   // babel-loader 配置├── eslintrc.js                // eslint 配置项├── .gitignore                 // git 忽略项├── favicon.ico                // favicon图标├── index.html                 // html模板└── package.json               // package.json

About me 关于作者

  const herozhou = {    blogName  : `herozhou工巧`,    blog : `https://www.cnblogs.com/herozhou`,    email:`Zhouhero@hotmail.com`,    School:`NCHU",    Grade:`Junior`  }  //有任何问题请提issues或直接联系我 //正在开发一系列帮助新手学习前端的项目,旨在和大家一起成为大前端工程师,有意请follow 我,一起加油💪

Thanks 感激

感谢以下的项目,排名不分先后

License

MIT

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【Vue】搭建开发环境
Vuejs自己的构建工具
工程化实践:项目结构设计与组织
React环境搭建
从0搭建vue-cli4脚手架
推荐 10 款常用的富文本编辑器
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服