Merge pull request #78 from lin-xin/dev

vue-manage-system 升级改版

Author: lin-xin

.babelrc

@@ -1,13 +1,12 @@
 {
   "presets": [
-    ["es2015", { "modules": false }],
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
     "stage-2"
   ],
-  "plugins": ["transform-runtime"],
-  "comments": false,
-  "env": {
-    "test": {
-      "plugins": [ "istanbul" ]
-    }
-  }
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
 }

.postcssrc.js

@@ -0,0 +1,9 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    // to edit target browsers: use "browserslist" field in package.json
+    "postcss-import": {},
+    "autoprefixer": {}
+  }
+}

README.md

@@ -31,19 +31,22 @@
 	|-- src                              // 源码目录
 	|   |-- components                   // 组件
 	|       |-- common                   // 公共组件
+	|           |-- bus.js           	 // Event Bus
 	|           |-- Header.vue           // 公共头部
 	|           |-- Home.vue           	 // 公共路由入口
 	|           |-- Sidebar.vue          // 公共左边栏
 	|		|-- page                   	 // 主要路由页面
 	|           |-- BaseCharts.vue       // 基础图表
 	|           |-- BaseForm.vue         // 基础表单
 	|           |-- BaseTable.vue        // 基础表格
+	|           |-- DragList.vue         // 拖拽列表组件
 	|           |-- Login.vue          	 // 登录
 	|           |-- Markdown.vue         // markdown组件
+	|           |-- Premission.vue       // 权限测试组件
 	|           |-- Readme.vue           // 自述组件
 	|           |-- Upload.vue           // 图片上传
 	|           |-- VueEditor.vue        // 富文本编辑器
-	|           |-- VueTable.vue         // vue表格组件
+	|           |-- VueTable.vue         // datasource表格组件
 	|   |-- App.vue                      // 页面入口文件
 	|   |-- main.js                      // 程序入口文件，加载各种公共组件
 	|-- .babelrc                         // ES6语法编译配置
@@ -56,8 +59,8 @@
 
 ## 安装步骤 ##
 
-	git clone https://github.com/lin-xin/manage-system.git      // 把模板下载到本地
-	cd manage-system    // 进入模板目录
+	git clone https://github.com/lin-xin/vue-manage-system.git      // 把模板下载到本地
+	cd vue-manage-system    // 进入模板目录
 	npm install         // 安装项目依赖，等待安装完成之后
 
 ## 本地开发 ##
@@ -122,21 +125,16 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu
 ### vue-datasource ###
 一个用于动态创建表格的vue.js服务端组件。访问地址：[vue-datasource](https://github.com/coderdiaz/vue-datasource)
 
-
-
 ### Vue-Quill-Editor ###
 基于Quill、适用于Vue2的富文本编辑器。访问地址：[vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
 
-### Vue-SimpleMDE ###
-Vue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.com/F-loat/vue-simplemde)
-
-
-
-### Vue-Core-Image-Upload ###
-一款轻量级的vue上传插件，支持裁剪。访问地址：[Vue-Core-Image-Upload](https://github.com/Vanthink-UED/vue-core-image-upload)
-
+（IE10及以下不支持）
 
+### mavonEditor ###
+基于Vue的markdown编辑器。访问地址：[mavonEditor](https://github.com/hinesboy/mavonEditor)
 
+### vue-cropperjs ###
+一个封装了 cropperjs 的 Vue 组件，用于裁剪图片。访问地址：[vue-cropperjs](https://github.com/Agontuk/vue-cropperjs)
 
 ## 其他注意事项 ##
 ### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？ ###
@@ -183,7 +181,7 @@ import 'element-ui/lib/theme-default/index.css';    // 默认主题
 /*@import "../static/css/theme-green/color-green.css";   !*浅绿色主题*!*/
 ```
 
-第三步：打开 src/components/common/Sidebar.vue 文件，找到 el-menu 标签，把 theme="dark" 去掉即可。
+第三步：打开 src/components/common/Sidebar.vue 文件，找到 el-menu 标签，把 background-color/text-color/active-text-color 属性去掉即可。
 
 ## 项目截图 ##
 ### 默认皮肤 ###

README_EN.md

@@ -1,6 +1,8 @@
 # manage-system #
 The web management system solution based on Vue2 and Element-UI。[live demo](http://blog.gdfengshuo.com/example/work/)
 
+## Donation
+![WeChat](http://blog.gdfengshuo.com/images/weixin.jpg)
 
 ## Preface ##
 The scheme as a set of multi-function background frame templates, suitable for most of the WEB management system development. Convenient development fast simple good components based on Vue2 and Element-UI. Color separation of color style, support manual switch themes, and it is convenient to use a custom theme color.
@@ -25,6 +27,7 @@ The scheme as a set of multi-function background frame templates, suitable for m
 	|-- src                              // Source directory
 	|   |-- components                   // Components
 	|       |-- common                   // Common component
+	|           |-- bus.js           	 // Event Bus
 	|           |-- Header.vue           // Header component
 	|           |-- Home.vue           	 // Home component
 	|           |-- Sidebar.vue          // Sidebar component
@@ -33,8 +36,9 @@ The scheme as a set of multi-function background frame templates, suitable for m
 	|           |-- BaseForm.vue         // BaseForm
 	|           |-- BaseTable.vue        // BaseTable
 	|           |-- Login.vue          	 // Login
+	|           |-- DragList.vue
 	|           |-- Markdown.vue         // Markdown
-	|           |-- MixCharts.vue        // MixCharts
+	|           |-- Premission.vue
 	|           |-- Readme.vue           // Readme
 	|           |-- Upload.vue           // Upload
 	|           |-- VueEditor.vue        // VueEditor
@@ -51,8 +55,8 @@ The scheme as a set of multi-function background frame templates, suitable for m
 
 ## Installation steps ##
 
-	git clone https://github.com/lin-xin/manage-system.git		// Clone templates
-	cd manage-system											// Enter template directory
+	git clone https://github.com/lin-xin/vue-manage-system.git		// Clone templates
+	cd vue-manage-system											// Enter template directory
 	npm install													// Installation dependency
 
 ## Local development ##
@@ -67,149 +71,6 @@ The scheme as a set of multi-function background frame templates, suitable for m
 
 ## Component description and presentation ##
 
-### element-ui ###
-A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout)
-
-### vue-datasource ###
-A Vue.js server side component to create dynamic tables. Github : [vue-datasource](https://github.com/coderdiaz/vue-datasource)
-
-```JavaScript
-<template>
-	<div>
-		<datasource language="en" :table-data="information.data"
-	        :columns="columns"
-	        :pagination="information.pagination"
-	        :actions="actions"
-	        v-on:change="changePage"
-	        v-on:searching="onSearch"></datasource>
-	</div>
-</template>
-
-<script>
-	import Datasource from 'vue-datasource';        // import Datasource component
-    export default {
-        data: function(){
-            return {
-                information: {
-	                pagination: {...},              // pagination config
-	                data: [...]
-	            },
-	            columns: [...],                     // col config
-	            actions: [...]                      // function config
-            }
-        },
-        components: {
-            Datasource										
-        },
-	    methods: {
-	        changePage(values) {...},
-	        onSearch(searchQuery) {...}
-	    }
-	}
-</script>
-```
-
-
-### Vue-Quill-Editor ###
-Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
-
-```JavaScript
-<template>
-	<div>
-		<quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
-	</div>
-</template>
-
-<script>
-	import { quillEditor } from 'vue-quill-editor';     // import quillEditor component
-    export default {
-        data: function(){
-            return {
-                content: '',								
-                editorOption: {								
-                    // something config
-                }
-            }
-        },
-        components: {
-            quillEditor										
-        }
-	}
-</script>
-```
-
-### Vue-SimpleMDE ###
-Markdown Editor component for Vue.js. Github : [Vue-SimpleMDE](https://github.com/F-loat/vue-simplemde)
-
-```JavaScript
-<template>
-    <div>
-        <markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor>
-    </div>
-</template>
-
-<script>
-    import { markdownEditor } from 'vue-simplemde';			
-    export default {
-        data: function(){
-            return {
-                content:'',									
-                configs: {									
-                    status: false,							
-                    initialValue: 'Hello BBK',				
-                    renderingConfig: {
-                        codeSyntaxHighlighting: true,		
-                        highlightingTheme: 'atom-one-light' 
-                    }
-                }
-            }
-        },
-        components: {
-            markdownEditor									
-        }
-    }
-</script>
-```
-
-### Vue-Core-Image-Upload ###
-a vue plugin for image upload and crop. Github : [Vue-Core-Image-Upload](https://github.com/Vanthink-UED/vue-core-image-upload)
-
-```JavaScript
-
-<template>
-    <div>
-		<img :src="src">									
-        <vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
-           :crop="true"										
-           text="上传图片"
-           url=""											
-           extensions="png,gif,jpeg,jpg"					
-           @:imageuploaded="imageuploaded">					
-		</vue-core-image-upload>
-    </div>
-</template>
-
-<script>
-    import VueCoreImageUpload  from 'vue-core-image-upload';	
-    export default {
-        data: function(){
-            return {
-                src:'../img/1.jpg'							
-            }
-        },
-        components: {
-            VueCoreImageUpload								
-        },
-        methods:{
-            imageuploaded(res) {							
-                console.log(res)
-            }
-        }
-    }
-</script>
-
-```
-
 ### vue-schart ###
 Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vue-schart)
 
@@ -253,6 +114,22 @@ Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vu
 </script>
 ```
 
+### element-ui ###
+A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout)
+
+### vue-datasource ###
+A Vue.js server side component to create dynamic tables. Github : [vue-datasource](https://github.com/coderdiaz/vue-datasource)
+
+### Vue-Quill-Editor ###
+Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
+
+### mavonEditor ###
+A markdown editor based on Vue that supports a variety of personalized features. Github: [mavonEditor](https://github.com/hinesboy/mavonEditor)
+
+### vue-cropperjs ###
+A Vue wrapper component for cropperjs. Github: [vue-cropperjs](https://github.com/Agontuk/vue-cropperjs)
+
+
 ## Notice ##
 ### 一、If I don't want to use some components, how can I delete it? ###
 
@@ -298,7 +175,7 @@ The second step to enter 'src/App.vue' and change into green theme.
 /*@import "../static/css/theme-green/color-green.css";   !*浅绿色主题*!*/
 ```
 
-Finally,enter 'src/components/common/Sidebar.vue' and find el-menu Tags,delete 'theme="dark"'。
+Finally,enter 'src/components/common/Sidebar.vue' and find el-menu Tags,delete 'background-color/text-color/active-text-color'。
 
 ## Screenshot ##
 ### Default theme ###

build/build.js

@@ -1,40 +1,41 @@
-// https://github.com/shelljs/shelljs
+'use strict'
 require('./check-versions')()
 
 process.env.NODE_ENV = 'production'
 
-var ora = require('ora')
-var path = require('path')
-var chalk = require('chalk')
-var shell = require('shelljs')
-var webpack = require('webpack')
-var config = require('../config')
-var webpackConfig = require('./webpack.prod.conf')
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
 
-var spinner = ora('building for production...')
+const spinner = ora('building for production...')
 spinner.start()
 
-var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
-shell.rm('-rf', assetsPath)
-shell.mkdir('-p', assetsPath)
-shell.config.silent = true
-shell.cp('-R', 'static/*', assetsPath)
-shell.config.silent = false
-
-webpack(webpackConfig, function (err, stats) {
-  spinner.stop()
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
   if (err) throw err
-  process.stdout.write(stats.toString({
-    colors: true,
-    modules: false,
-    children: false,
-    chunks: false,
-    chunkModules: false
-  }) + '\n\n')
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
 
-  console.log(chalk.cyan('  Build complete.\n'))
-  console.log(chalk.yellow(
-    '  Tip: built files are meant to be served over an HTTP server.\n' +
-    '  Opening index.html over file:// won\'t work.\n'
-  ))
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
 })