2017 © Pedro Peláez
 

project vue-admin

A background manager scaffolding base Vue.js

image

vueadmin/vue-admin

A background manager scaffolding base Vue.js

  • Monday, February 20, 2017
  • by rootsli
  • Repository
  • 3 Watchers
  • 33 Stars
  • 1 Installations
  • Vue
  • 0 Dependents
  • 0 Suggesters
  • 6 Forks
  • 0 Open issues
  • 1 Versions
  • 0 % Grown

The README.md

, (*1)

vue-admin - A background manager scaffolding base Vue.js

Packagist Vuejs, (*2)

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, (*3)

使用Vue.js作为基础框架，Semantic UI作为UI层，实现了一个后台管理系统的基础框架。可以基于此框架实现功能复杂的后台管理系统。, (*4)

点此查看运行效果（登录名：admin，密码：admin）, (*5)

※ 已基于 vue2 + webpack2 + elementUI 实现了一套全新的后台管理框架，具体请移步 [https://github.com/rootsli/vue2admin] (https://github.com/rootsli/vue2admin)查看, (*6)

主要依赖组件

  • 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

``` bash, (*7)

install dependencies

npm install, (*8)

serve with hot reload at localhost:8080

npm run dev, (*9)

build for production with minification

npm run build, (*10)

run unit tests

npm run unit, (*11)

run e2e tests

npm run e2e, (*12)

run all tests

npm test, (*13)


## 关于semanticUI css的本地化定制
* 本项目虽然使用的是semantic-ui-css，但是由于Semantic UI 默认使用的是谷歌提供的字体，并且是直接使用了谷歌的官方链接。因此建议对css进行本地化定制，使用定制后编译生成的文件替换semantic-ui-css中的文件。
具体定制方法请参考Semantic UI官方文档，主要变更如下：
    * 默认字体改为使用微软雅黑

    ![image](https://github.com/rootsli/vueadmin/blob/master/doc/img/custom1.jpg)

    * 关闭google字体动态链接

    ![image](https://github.com/rootsli/vueadmin/blob/master/doc/img/custom2.jpg)

    * 修改控件样式的默认颜色

    ![image](https://github.com/rootsli/vueadmin/blob/master/doc/img/custom3.jpg)

    * 修改默认背景色

    ![image](https://github.com/rootsli/vueadmin/blob/master/doc/img/custom4.jpg)

    ### 附：[semantic-ui-custom.rar](https://github.com/rootsli/vueadmin/blob/master/doc/semantic-ui-custom.rar)(可通过右键另存为保存)。另，定制文件请见文件[site.variables](https://github.com/rootsli/vueadmin/blob/master/doc/site.variables)
    ### 如不想自己定制，也可以直接解压semantic-ui-custom.rar内容覆盖掉node_modules\semantic-ui-css目录下内容即可（需先运行npm install）。
## 菜单右侧主页面布局说明
* 典型的布局结构（推荐布局）
```html
    ...
    <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>
    ...
  • 界面说明 image

Change Log

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

To Do List

  • 报表实例：地图示例

UI截图

  • 登录界面 image, (*14)

  • 表格示例 image, (*15)

  • 表单 image, (*16)

  • 基本图形 image, (*17)

The Versions

20/02 2017

dev-master

9999999-dev https://github.com/rootsli/vueadmin

A background manager scaffolding base Vue.js

  Sources   Download

BSD-3-Clause

The 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

 

The Development Requires

  • 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
  • connect-history-api-fallback ^1.1.0
  • 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
  • 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
  • chai ^3.5.0
  • sinon ^1.17.3
  • sinon-chai ^2.8.0
  • inject-loader ^2.0.1
  • isparta-loader ^2.0.0
  • phantomjs-prebuilt ^2.1.3
  • chromedriver ^2.21.2
  • cross-spawn ^2.1.5
  • nightwatch ^0.8.18
  • selenium-server 2.53.0
  • ora ^0.2.0
  • shelljs ^0.6.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

semantic ui vue demo vuex demo scaffolding base vue.js