README

vue-admin - 基于 Vue.js 的后台管理器脚手架

基于 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

构建设置

# 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>
    ...

界面说明

变更日志

20160820
- 新增表单示例
20160812
- list 示例新增项目的新增，编辑 case
20160811
- 更新 README.md
20160810
- 新增翻页组件
- 新增表格示例
20160808
- 菜单支持折叠与隐藏
20160805
- 菜单隐藏使用动画
- 页面加载支持进度条
20161012
整合 vue-echarts
整合百度 echarts3
实现基本图形示例
页面 F5 刷新时，菜单展开错误问题修复
20161014
生产打包 js 文件生成 6 位数的 hash
添加运行效果

待办事项列表

报表实例：地图示例

UI 截图

登录界面
表格示例
表单
基本图形

vueadmin / vue-admin

维护者

详细信息