vueadmin / vue-admin
A background manager scaffolding base Vue.js
Installs: 1
Dependents: 0
Suggesters: 0
Security: 0
Stars: 34
Watchers: 3
Forks: 6
Open Issues: 0
Language:Vue
Type:project
Requires
- babel-runtime: ^6.0.0
- jquery: ^2.2.3
- react-cookie: ^0.4.7
- semantic-ui-css: ^2.2.2
- vue: ^1.0.21
- vue-resource: ^0.9.3
- vue-router: ^0.7.13
- vue-validator: ^2.1.4
- vuex: ^0.8.2
- vuex-router-sync: ^1.0.1
Requires (Dev)
- babel-core: ^6.0.0
- babel-loader: ^6.0.0
- babel-plugin-transform-runtime: ^6.0.0
- babel-preset-es2015: ^6.0.0
- babel-preset-stage-2: ^6.0.0
- chai: ^3.5.0
- chromedriver: ^2.21.2
- connect-history-api-fallback: ^1.1.0
- cross-spawn: ^2.1.5
- css-loader: ^0.23.0
- eventsource-polyfill: ^0.9.6
- express: ^4.13.3
- extract-text-webpack-plugin: ^1.0.1
- file-loader: ^0.8.4
- function-bind: ^1.0.2
- html-webpack-plugin: ^2.8.1
- http-proxy-middleware: ^0.12.0
- inject-loader: ^2.0.1
- isparta-loader: ^2.0.0
- json-loader: ^0.5.4
- karma: ^0.13.15
- karma-coverage: ^0.5.5
- karma-mocha: ^0.2.2
- karma-phantomjs-launcher: ^1.0.0
- karma-sinon-chai: ^1.2.0
- karma-sourcemap-loader: ^0.3.7
- karma-spec-reporter: 0.0.24
- karma-webpack: ^1.7.0
- lolex: ^1.4.0
- mocha: ^2.4.5
- nightwatch: ^0.8.18
- ora: ^0.2.0
- phantomjs-prebuilt: ^2.1.3
- selenium-server: 2.53.0
- shelljs: ^0.6.0
- sinon: ^1.17.3
- sinon-chai: ^2.8.0
- url-loader: ^0.5.7
- vue-hot-reload-api: ^1.2.0
- vue-html-loader: ^1.0.0
- vue-loader: ^8.3.0
- vue-style-loader: ^1.0.0
- webpack: ^1.12.2
- webpack-dev-middleware: ^1.4.0
- webpack-hot-middleware: ^2.6.0
- webpack-merge: ^0.8.3
This package is not auto-updated.
Last update: 2020-01-05 14:50:06 UTC
README
vue-admin - A background manager scaffolding base Vue.js
A Vue.js background manager scaffolding base vue.js(1.0.x) + Semantic UI + vuex + vue-router + vue-resource(whatwg-fetch) + vue-validator + vue-loader + webpack
使用Vue.js作为基础框架,Semantic UI作为UI层,实现了一个后台管理系统的基础框架。可以基于此框架实现功能复杂的后台管理系统。
点此查看运行效果(登录名:admin,密码:admin)
※ 已基于 vue2 + webpack2 + elementUI 实现了一套全新的后台管理框架,具体请移步 [https://github.com/rootsli/vue2admin] (https://github.com/rootsli/vue2admin)查看
主要依赖组件
- vue.js ^1.0.21
- semantic-ui-css ^2.2.2 由于semantic-ui经过了定制,因此建议将下文“关于semanticUI css的本地化定制”章节附件semantic-ui-custom.rar直接解压到node_modules\semantic-ui-css目录下即可(需先运行npm install)。否则项目跑起来后,界面和截图不一致。
- 百度 echarts3
Build Setup
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test
关于semanticUI css的本地化定制
-
本项目虽然使用的是semantic-ui-css,但是由于Semantic UI 默认使用的是谷歌提供的字体,并且是直接使用了谷歌的官方链接。因此建议对css进行本地化定制,使用定制后编译生成的文件替换semantic-ui-css中的文件。 具体定制方法请参考Semantic UI官方文档,主要变更如下:
- 默认字体改为使用微软雅黑
- 关闭google字体动态链接
- 修改控件样式的默认颜色
- 修改默认背景色
附:semantic-ui-custom.rar(可通过右键另存为保存)。另,定制文件请见文件site.variables
如不想自己定制,也可以直接解压semantic-ui-custom.rar内容覆盖掉node_modules\semantic-ui-css目录下内容即可(需先运行npm install)。
菜单右侧主页面布局说明
- 典型的布局结构(推荐布局)
... <breadcrumb :paths="paths"></breadcrumb> <!-- 面包屑 --> <div class="page-container"> <!-- 内容区 --> <h3 class="ui header">标题</h3> <!-- 标题 --> <div style="height:95%;overflow:auto;"> <!-- 主内容 --> <div class="ui basic segment"> <!-- 内容段,可以包含多个,至少包含一个 --> <!-- 内容区1 --> </div> <div class="ui basic segment"> <!-- 内容区2 --> </div> </div> </div> ...
Change Log
- 20160820
- 新增表单示例
- 20160812
- list示例新增项目的新增,编辑case
- 20160811
- 更新README.md
- 20160810
- 新增翻页组件
- 新增表格示例
- 20160808
- 菜单支持折叠与隐藏
- 20160805
- 菜单隐藏使用动画
- 页面加载支持进度条
- 20161012
- 整合vue-echarts
- 整合百度echarts3
- 实现基本图形示例
- 页面F5刷新时,菜单展开错误问题修复
- 20161014
- 生产打包js文件生成6位数的hash
- 添加运行效果
To Do List
- 报表实例:地图示例