Coder Social home page Coder Social logo

herozhou / vue-framework-wz Goto Github PK

View Code? Open in Web Editor NEW
4.3K 202.0 1.3K 106.02 MB

👏vue后台管理框架👏

Home Page: http://herozhou.coding.me/vue-framework-wz/#/dashboard

License: MIT License

JavaScript 25.18% HTML 0.31% Vue 72.50% CSS 2.01%
vue vue-framework-wz vue-demo admin vue-admin vue-template admin-ui admin-tool admin-template admin-dashboard

vue-framework-wz's Introduction

vue-framework-wz

TeamCity CodeBetter npm npm Chrome Web StoreSourcegraph for Repo Reference CountGitHub watchers

立即体验(国内)

online-website

Englist Document

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

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

有话要说

非常感谢大家喜欢这个项目,但是由于工作太忙实在是没时间维护这个项目,所以耽搁了一大段时间,给大家带来的麻烦我非常抱歉。
接下来我会抽时间维护这个项目,有什么问题可以随时找我,或者提issue,我看到就会直接回。
并且我在开发一系列新的开源项目,目的是帮助大家提升生产力,解放双手。
我建了一个qq群 1051755653 ,方便大家交流,提升前端技能,分享招聘信息等等。

Features 特性

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

Preview 效果图

自适应布局

自适应布局 手机端

多TAB效果

第二个Tab

炫酷登录界面

炫酷登录界面

炫酷图表

炫酷图表

编辑器

丰富功能表格

更多demo

Run 开发

    # 克隆项目
    git clone https://github.com/herozhou/vue-framework-wz.git

    # 安装依赖
    npm install
    //or 
    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

License

MIT

vue-framework-wz's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-framework-wz's Issues

网络请求错误的全局提示没有用。

在src/utils/fetch.js 中的respone拦截器中有个vue.$Message的iview 的全局提示,但是在使用中发现请求出错错误时,提示组件并没有显示。并且在console 中打印vue.$Message 时为undefined

CSS框架布局的问题

请教下,网页上AppHeader、Sidebar、AppAside、AppFooter和Breadcrumb等的框架布局的CSS文件在哪里? 没有看到相关配置的地方。谢谢了。

关于路由列表,我想请教一下

如果不用做鉴权的,只需要发送请求后台验证登录的跳转应该怎么写呢,关于您写的有点复杂有点看不懂,不过功能一定可以实现

Markdown编辑器层叠不合理

hi 你好,

在我这里,Markdown的编辑器把正上方的导航栏覆盖在下面了, 对于侧边的导航按钮的弹出按钮也是, 编辑器也把它们覆盖在下面了, 我觉得应该修改一下编辑器的z-index

左侧权限菜单路由BUG

先用非admin登录,退出;然后用admin登录,会发现左侧菜单依然保持之前权限菜单结构,必须刷新页面。BUG在于先前那次登录,由于方法filterAsyncRouter改变了asyncRouterMap数据内容。

怎么使用axios发送ajax请求

现在前端已经可以独立跑起来了,我看了源码,你对axios进行了一层封装,怎么才能调用到你封装的axios实现请求后台

(node:23633) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3

root@ubuntu:/opt/vue-framework-wz# npm run dev

[email protected] dev /opt/vue-framework-wz
node build/dev-server.js

(node:23633) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3

ERROR Failed to compile with 2 errors 3:45:04 AM

error in ./src/views/login/index.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/opt/vue-framework-wz/node_modules/node-sass/vendor'
at Error (native)
at Object.fs.readdirSync (fs.js:953:18)
at Object.getInstalledBinaries (/opt/vue-framework-wz/node_modules/node-sass/lib/extensions.js:124:13)
at foundBinariesList (/opt/vue-framework-wz/node_modules/node-sass/lib/errors.js:20:15)
at foundBinaries (/opt/vue-framework-wz/node_modules/node-sass/lib/errors.js:15:5)
at Object.module.exports.missingBinary (/opt/vue-framework-wz/node_modules/node-sass/lib/errors.js:45:5)
at module.exports (/opt/vue-framework-wz/node_modules/node-sass/lib/binding.js:15:30)
at Object. (/opt/vue-framework-wz/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/opt/vue-framework-wz/node_modules/sass-loader/lib/loader.js:3:14)

@ .//vue-style-loader!.//css-loader?{"minimize":false,"sourceMap":false}!.//vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-0f310798","scoped":false,"hasInlineConfig":false}!.//sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=1!./src/views/login/index.vue 4:14-406 13:3-17:5 14:22-414
@ ./src/views/login/index.vue
@ ./src/views ^./.*.vue$
@ ./src/router/_import_development.js
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

error in ./src/components/SidebarItem.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/opt/vue-framework-wz/node_modules/node-sass/vendor'
at Error (native)
at Object.fs.readdirSync (fs.js:953:18)
at Object.getInstalledBinaries (/opt/vue-framework-wz/node_modules/node-sass/lib/extensions.js:124:13)
at foundBinariesList (/opt/vue-framework-wz/node_modules/node-sass/lib/errors.js:20:15)
at foundBinaries (/opt/vue-framework-wz/node_modules/node-sass/lib/errors.js:15:5)
at Object.module.exports.missingBinary (/opt/vue-framework-wz/node_modules/node-sass/lib/errors.js:45:5)
at module.exports (/opt/vue-framework-wz/node_modules/node-sass/lib/binding.js:15:30)
at Object. (/opt/vue-framework-wz/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/opt/vue-framework-wz/node_modules/sass-loader/lib/loader.js:3:14)

@ .//vue-style-loader!.//css-loader?{"minimize":false,"sourceMap":false}!.//vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-c00c548e","scoped":true,"hasInlineConfig":false}!.//sass-loader/lib/loader.js?{"sourceMap":false}!.//vue-loader/lib/selector.js?type=styles&index=0!./src/components/SidebarItem.vue 4:14-399 13:3-17:5 14:22-407
@ ./src/components/SidebarItem.vue
@ ./
/babel-loader/lib!.//vue-loader/lib/selector.js?type=script&index=0!./src/components/Sidebar.vue
@ ./src/components/Sidebar.vue
@ ./
/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/containers/Full.vue
@ ./src/containers/Full.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

Listening at http://localhost:9001


os@Ubuntu 16.04.3 LTS
arch@x86
[email protected]
[email protected]

studio

开发工具是啥,dalao

wz 卸载插件不成功

卸载插件不成功,是按照步骤操作的。Error: ENOENT: no such file or directory, uv_chdir

项目使用

很不错的项目,本人对vue不了接,请问是否为本人项目,是否可做商用?谢谢

项目我跑不起来

我下载你的源码,项目跑不起来,页面显示Cannot GET /;控制台显示Failed to load resource: the server responded with a status of 404 (Not Found)的错误

找到组织了

老哥,我也是昌航的,逛github逛到校友了,有点小激动,有空多交流一哈呀

Select 标签使用出问题

vue的提示一下错误
You may have an infinite update loop in a component render function.

使用网络上的测试版本没有问题,但是 git clone 下来运行就出问题了
一下是我的代码

<Form inline>
<Form-item prop="pay_time1">
<Date-picker type="date" placeholder="支付开始时间" ></Date-picker>
</Form-item>
<Form-item prop="pay_time2">
<Date-picker type="date" placeholder="支付开始时间" ></Date-picker>
</Form-item>
<Form-item prop="pid">
<Input type="text" placeholder="平台id" >
</Input>
</Form-item>
<Form-item prop="bid">
<Input type="text" placeholder="商户id" >
</Input>
</Form-item>
<Form-item >
<Select placeholder="请选择" >
<option value="111">sss</option>
</Select>
</Form-item>
<Form-item>
<Button type="primary" @click="query('formInline')">查询</Button>
</Form-item>
</Form>

登录页在手机浏览器上体验较差

感谢大神发布Vue后台管理框架!看起来真不错!
我尝试用手机(安卓)来打开登录页,发现有两个问题:

  1. 竖屏状态下登录框显示不全
  2. 点击输入框后不弹出键盘,无法输入用户名密码
    当然,这种后台管理系统可以不考虑手机端。但是我觉得体验可以差点,但功能应该还是好用的。所以,希望至少能fix第二个问题

你好,我执行报错,请问怎么解决?

提示信息
module.js:538
throw err;
^

Error: Cannot find module 'chalk'
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object. (D:\vuetest\wzvue\build\check-versions.js:1:75)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: node build/dev-server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to in
stall?
这个我刚学,所以问的问题很低级,但还是请大神指点一下,谢谢

请问如何把自己业务里的权限管理和项目结合在一起呢?

请问如何把自己业务里的权限管理和项目结合在一起呢?
我们现在如果越过项目里的权限管理就不能自由的跳转页面,但是调整这块的配置和相关函数的入口找得我们焦头烂额。
如果有更详细的文档就好了。整理出基本功能的使用。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.