refine

Author: PanJiaChen

README.md

@@ -1,6 +1,40 @@
-这是一个vue+element+axios+webpack2的管理后台 先占个坑
-效果预览
-
+##vue-element-admin
+vue+element+axios 的管理后台 [线上地址](http://panjiachen.github.io/vue-element-admin)
+
+这半年来一直在用vue写管理后台，目前后台已经有七十多个页面，十几种权限，但维护成本依然很低，效率依然很高。这半年来积累了不少的后台开发经验，所以准备开源分享一下。
+###功能
+- [x] 登录/注销
+- [x] 权限验证
+- [x] 富文本编辑器
+- [x] Markdown编辑器
+- [x] JSON编辑器
+- [x] 列表拖拽
+- [x] SplitPane
+- [x] Dropzone
+- [x] Sticky
+- [x] CountTo
+- [x] echarts图表
+- [x] 401，401错误页面
+- [x] 错误日志
+- [x] 导出excel
+- [x] table example
+- [x] form example
+- [x] 多环境发布
+
+###How to use?
+```bash
+    git clone https://github.com/PanJiaChen/vue-element-admin.git //克隆项目
+    npm install //安装依赖
+
+
+	npm run dev //本地开发
+    // 开启服务器，浏览器访问 http://localhost:9527
+
+    npm run build:sit-preview //发布测试环境 带webpack ananalyzer
+
+    npm run build:prod //构建生成环境
+```
+##效果图
 
 #### 两步验证登录 支持微信和qq
 

src/styles/index.scss

@@ -73,9 +73,10 @@ a:hover {
 
 code {
   background: #eef1f6;
-  padding: 20px 10px;
+  padding: 15px 10px;
   margin-bottom: 20px;
   display: block;
+  line-height: 36px;
   a {
     color: #337ab7;
     cursor: pointer;

src/views/charts/index.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="components-container" >
-    介绍
+    <code>
+      这里的所有的图表都基于echarts,实例代码来源<a href='http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all' target='_blank'>gallery</a><br/>其实echarts封装的很好了，用vue封装是很简单的事情，建议大家自己来封装。
+    </code>
   </div>
 </template>

src/views/components/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="components-container" >
-    介绍
+  <div class="components-container">
+    <code>这里暂时列出了自己在项目中自己封装和用到的组件，如有补充可以提<a href='https://github.com/PanJiaChen/vue-element-admin/issues' target='_blank'>issue</a><br/>
+    我个人崇尚自己封装组件，因为很多组件会和业务后高度的耦合，很多时候第三方封装是满足不了需求的，如有需要可以看楼主之前写过的一篇<a href='https://segmentfault.com/a/1190000009090836' target='_blank'>文章</a>
+    </code>
   </div>
 </template>

src/views/theme/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="app-container">
+    <code>会补动态换肤的教程</code>
     <el-card class="box-card">
       <div slot="header">
         <span style="line-height: 36px;">偏好设置</span>
@@ -23,19 +24,19 @@
     </div>
 
     <div class="block">
-      <el-tag v-for="tag in tags" :type="tag.type">
+      <el-tag class='tag-item' v-for="tag in tags" :type="tag.type">
         {{tag.name}}
       </el-tag>
     </div>
 
     <div class="block">
-      <el-alert title="成功提示的文案" type="success">
+      <el-alert class='alert-item' title="成功提示的文案" type="success">
       </el-alert>
-      <el-alert title="消息提示的文案" type="info">
+      <el-alert class='alert-item' title="消息提示的文案" type="info">
       </el-alert>
-      <el-alert title="警告提示的文案" type="warning">
+      <el-alert class='alert-item' title="警告提示的文案" type="warning">
       </el-alert>
-      <el-alert title="错误提示的文案" type="error">
+      <el-alert class='alert-item' title="错误提示的文案" type="error">
       </el-alert>
     </div>
 
@@ -82,4 +83,10 @@ export default {
 .block{
   padding: 30px 24px;
 }
+.alert-item{
+  margin-bottom: 10px;
+}
+.tag-item{
+  margin-right: 15px;
+}
 </style>