github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

Update readme

pull/38/merge
lin-xin 2017-05-30 15:28:30 +08:00
parent 0a17d0f5f2
commit 098fe34192
2 changed files with 86 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
README.md
View File

@ -37,7 +37,6 @@
| |-- BaseTable.vue // 基础表格 | |-- BaseTable.vue // 基础表格
| |-- Login.vue // 登录 | |-- Login.vue // 登录
| |-- Markdown.vue // markdown组件 | |-- Markdown.vue // markdown组件
| |-- MixCharts.vue // 混合图表
| |-- Readme.vue // 自述组件 | |-- Readme.vue // 自述组件
| |-- Upload.vue // 图片上传 | |-- Upload.vue // 图片上传
| |-- VueEditor.vue // 富文本编辑器 | |-- VueEditor.vue // 富文本编辑器
@ -54,9 +53,9 @@
## 安装步骤 ## ## 安装步骤 ##
git clone https://github.com/lin-xin/manage-system.git // 把模板下载到本地 git clone https://github.com/lin-xin/manage-system.git // 把模板下载到本地
cd manage-system // 进入模板目录 cd manage-system // 进入模板目录
npm install // 安装项目依赖，等待安装完成之后 npm install // 安装项目依赖，等待安装完成之后
## 本地开发 ## ## 本地开发 ##
@ -89,20 +88,20 @@
</template> </template>
<script> <script>
import Datasource from 'vue-datasource'; // 导入quillEditor组件 import Datasource from 'vue-datasource'; // 导入quillEditor组件
export default { export default {
data: function(){ data: function(){
return { return {
information: { information: {
pagination: {...}, // 页码配置 pagination: {...}, // 页码配置
data: [...] data: [...]
}, },
columns: [...], // 列名配置 columns: [...], // 列名配置
actions: [...] // 功能配置 actions: [...] // 功能配置
} }
}, },
components: { components: {
Datasource // 声明组件Datasource Datasource
}, },
methods: { methods: {
changePage(values) {...}, changePage(values) {...},
@ -124,18 +123,18 @@
</template> </template>
<script> <script>
import { quillEditor } from 'vue-quill-editor'; // 导入quillEditor组件 import { quillEditor } from 'vue-quill-editor'; // 导入quillEditor组件
export default { export default {
data: function(){ data: function(){
return { return {
content: '', // 编辑器的内容 content: '', // 编辑器的内容
editorOption: { // 编辑器的配置 editorOption: { // 编辑器的配置
// something config // something config
} }
} }
}, },
components: { components: {
quillEditor // 声明组件quillEditor quillEditor
} }
} }
</script> </script>
@ -152,17 +151,17 @@ Vue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.c
</template> </template>
<script> <script>
import { markdownEditor } from 'vue-simplemde'; // 导入markdownEditor组件 import { markdownEditor } from 'vue-simplemde'; // 导入markdownEditor组件
export default { export default {
data: function(){ data: function(){
return { return {
content:'', // markdown编辑器内容 content:'', // markdown编辑器内容
configs: { // markdown编辑器配置参数 configs: { // markdown编辑器配置参数
status: false, // 禁用底部状态栏 status: false, // 禁用底部状态栏
initialValue: 'Hello BBK', // 设置初始值 initialValue: 'Hello BBK', // 设置初始值
renderingConfig: { renderingConfig: {
codeSyntaxHighlighting: true, // 开启代码高亮 codeSyntaxHighlighting: true, // 开启代码高亮
highlightingTheme: 'atom-one-light' // 自定义代码高亮主题 highlightingTheme: 'atom-one-light' // 自定义代码高亮主题
} }
} }
} }
@ -181,30 +180,30 @@ Vue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.c
<template> <template>
<div> <div>
<img :src="src"> // 用于显示上传的图片 <img :src="src"> // 用于显示上传的图片
<vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']" <vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
:crop="true" // 是否裁剪 :crop="true" // 是否裁剪
text="上传图片" text="上传图片"
url="" // 上传路径 url="" // 上传路径
extensions="png,gif,jpeg,jpg" // 限制文件类型 extensions="png,gif,jpeg,jpg" // 限制文件类型
@:imageuploaded="imageuploaded"> // 监听图片上传完成事件 @:imageuploaded="imageuploaded"> // 监听图片上传完成事件
</vue-core-image-upload> </vue-core-image-upload>
</div> </div>
</template> </template>
<script> <script>
import VueCoreImageUpload from 'vue-core-image-upload'; // 导入VueCoreImageUpload组件 import VueCoreImageUpload from 'vue-core-image-upload'; // 导入VueCoreImageUpload组件
export default { export default {
data: function(){ data: function(){
return { return {
src:'../img/1.jpg' // 默认显示图片地址 src:'../img/1.jpg' // 默认显示图片地址
} }
}, },
components: { components: {
VueCoreImageUpload // 声明组件VueCoreImageUpload VueCoreImageUpload // 声明组件VueCoreImageUpload
}, },
methods:{ methods:{
imageuploaded(res) { // 定义上传完成执行的方法 imageuploaded(res) { // 定义上传完成执行的方法
console.log(res) console.log(res)
} }
} }
@ -213,40 +212,44 @@ Vue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.c
``` ```
### vue-echarts-v3 ### ### vue-schart ###
基于vue2和eCharts.js3的图表组件。访问地址：[vue-echarts-v3](https://github.com/xlsdg/vue-echarts-v3) vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart)
```JavaScript ```JavaScript
<template> <template>
<div> <div>
<IEcharts :option="bar"></IEcharts> <schart :canvasId="canvasId"
:type="type"
:width="width"
:height="height"
:data="data"
:options="options"
></schart>
</div> </div>
</template> </template>
<script> <script>
import IEcharts from 'vue-echarts-v3'; // 导入IEcharts组件 import Schart from 'vue-schart'; // 导入Schart组件
export default { export default {
data: function(){ data: function(){
return { return {
bar: { canvasId: 'myCanvas', // canvas的id
title: { type: 'bar', // 图表类型
text: '柱状图' // 图标标题文本 width: 500,
}, height: 400,
tooltip: {}, data: [
xAxis: { // 横坐标 {name: '2014', value: 1342},
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] {name: '2015', value: 2123},
}, {name: '2016', value: 1654},
yAxis: {}, // 纵坐标 {name: '2017', value: 1795},
series: [{ ],
name: '销量', options: { // 图表可选参数
type: 'bar', // 图标类型 title: 'Total sales of stores in recent years'
data: [5, 20, 36, 10, 10, 20] }
}]
}
} }
}, },
components: { components: {
IEcharts // 声明组件VueCoreImageUpload Schart
} }
} }
</script> </script>

64
README_EN.md
View File

@ -68,10 +68,10 @@ The scheme as a set of multi-function background frame templates, suitable for m
## Component description and presentation ## ## Component description and presentation ##
### element-ui ### ### element-ui ###
A desktop component library based on vue.js2.0 . live demo：[element](http://element.eleme.io/#/zh-CN/component/layout) A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout)
### vue-datasource ### ### vue-datasource ###
A Vue.js server side component to create dynamic tables. live demo：[vue-datasource](https://github.com/coderdiaz/vue-datasource) A Vue.js server side component to create dynamic tables. Github : [vue-datasource](https://github.com/coderdiaz/vue-datasource)
```JavaScript ```JavaScript
<template> <template>
@ -86,16 +86,16 @@ A Vue.js server side component to create dynamic tables. live demo：[vue-dataso
</template> </template>
<script> <script>
import Datasource from 'vue-datasource'; // import Datasource component import Datasource from 'vue-datasource'; // import Datasource component
export default { export default {
data: function(){ data: function(){
return { return {
information: { information: {
pagination: {...}, // pagination config pagination: {...}, // pagination config
data: [...] data: [...]
}, },
columns: [...], // col config columns: [...], // col config
actions: [...] // function config actions: [...] // function config
} }
}, },
components: { components: {
@ -111,7 +111,7 @@ A Vue.js server side component to create dynamic tables. live demo：[vue-dataso
### Vue-Quill-Editor ### ### Vue-Quill-Editor ###
Quill editor component for Vue2. live demo：[vue-quill-editor](https://github.com/surmon-china/vue-quill-editor) Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
```JavaScript ```JavaScript
<template> <template>
@ -121,7 +121,7 @@ Quill editor component for Vue2. live demo：[vue-quill-editor](https://github.c
</template> </template>
<script> <script>
import { quillEditor } from 'vue-quill-editor'; // import quillEditor component import { quillEditor } from 'vue-quill-editor'; // import quillEditor component
export default { export default {
data: function(){ data: function(){
return { return {
@ -139,7 +139,7 @@ Quill editor component for Vue2. live demo：[vue-quill-editor](https://github.c
``` ```
### Vue-SimpleMDE ### ### Vue-SimpleMDE ###
Markdown Editor component for Vue.js. live demo：[Vue-SimpleMDE](https://github.com/F-loat/vue-simplemde) Markdown Editor component for Vue.js. Github : [Vue-SimpleMDE](https://github.com/F-loat/vue-simplemde)
```JavaScript ```JavaScript
<template> <template>
@ -172,7 +172,7 @@ Markdown Editor component for Vue.js. live demo：[Vue-SimpleMDE](https://github
``` ```
### Vue-Core-Image-Upload ### ### Vue-Core-Image-Upload ###
a vue plugin for image upload and crop. live demo：[Vue-Core-Image-Upload](https://github.com/Vanthink-UED/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 ```JavaScript
@ -210,40 +210,44 @@ a vue plugin for image upload and crop. live demo：[Vue-Core-Image-Upload](http
``` ```
### vue-echarts-v3 ### ### vue-schart ###
Vue.js v2.x+ component wrap for ECharts.js v3.x+. live demo：[vue-echarts-v3](https://github.com/xlsdg/vue-echarts-v3) Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vue-schart)
```JavaScript ```JavaScript
<template> <template>
<div> <div>
<IEcharts :option="bar"></IEcharts> <schart :canvasId="canvasId"
:type="type"
:width="width"
:height="height"
:data="data"
:options="options"
></schart>
</div> </div>
</template> </template>
<script> <script>
import IEcharts from 'vue-echarts-v3'; import Schart from 'vue-schart';
export default { export default {
data: function(){ data: function(){
return { return {
bar: { canvasId: 'myCanvas',
title: { type: 'bar',
text: '柱状图' width: 500,
}, height: 400,
tooltip: {}, data: [
xAxis: { {name: '2014', value: 1342},
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] {name: '2015', value: 2123},
}, {name: '2016', value: 1654},
yAxis: {}, {name: '2017', value: 1795},
series: [{ ],
name: '销量', options: {
type: 'bar', title: 'Total sales of stores in recent years'
data: [5, 20, 36, 10, 10, 20] }
}]
}
} }
}, },
components: { components: {
IEcharts Schart
} }
} }
</script> </script>