fix typo(#965)

* fixBug[waves.js]-wave's position

* fix[waves.js]-wave's position

.gitignore

@@ -4,6 +4,7 @@ dist/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+**/*.log
 
 test/unit/coverage
 test/e2e/reports

README.md

@@ -38,6 +38,8 @@ It is a magical vue admin based on the newest development stack of vue, built-in
 
 - [Donate](https://panjiachen.github.io/vue-element-admin-site/donate/)
 
+- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
+
 **This project is positioned as a background integration solution and is not suitable for secondary development as a basic template.**
 
  - Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  

README.zh-CN.md

@@ -36,6 +36,8 @@
 
 - [Donate](https://panjiachen.github.io/vue-element-admin-site/zh/donate/)
 
+- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
+
 **本项目的定位是后台集成方案，不适合当基础模板来开发。**
  - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
  - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
@@ -51,7 +53,8 @@
  - [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
  - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
  - [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
-
+ - [手摸手，带你用合理的姿势使用webpack4（上）](https://juejin.im/post/5b56909a518825195f499806)
+ - [手摸手，带你用合理的姿势使用webpack4（下）](https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc)
 
  或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西
 
@@ -152,7 +155,7 @@ npm run dev
 # 构建测试环境
 npm run build:sit
 
-# 构建生成环境
+# 构建生产环境
 npm run build:prod
 ```
 

build/build.js

@@ -8,9 +8,10 @@ const chalk = require('chalk')
 const webpack = require('webpack')
 const config = require('../config')
 const webpackConfig = require('./webpack.prod.conf')
-const server = require('pushstate-server')
+var connect = require('connect');
+var serveStatic = require('serve-static')
 
-var spinner = ora('building for '+ process.env.env_config+ ' environment...' )
+const spinner = ora('building for ' + process.env.env_config + ' environment...')
 spinner.start()
 
 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
@@ -36,13 +37,20 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
       ' Tip: built files are meant to be served over an HTTP server.\n' +
       ' Opening index.html over file:// won\'t work.\n'
     ))
+
     if (process.env.npm_config_preview) {
-      server.start({
+      const port = 9526
-          port: 9526,
+      const host = "http://localhost:" + port
-          directory: './dist',
+      const basePath = config.build.assetsPublicPath
-          file: '/index.html'
+      const app = connect()
+
+      app.use(basePath, serveStatic('./dist', {
+        'index': ['index.html', '/']
+      }))
+
+      app.listen(port, function () {
+        console.log(chalk.green(`> Listening at  http://localhost:${port}${basePath}`))
       });
-      console.log('> Listening at ' +  'http://localhost:9526' + '\n')
     }
   })
 })

config/index.js

@@ -13,7 +13,10 @@ module.exports = {
     proxyTable: {},
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+
+    // can be overwritten by process.env.HOST
+    // if you want dev by ip, please set host: '0.0.0.0'
+    host: 'localhost',
     port: 9527, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-element-admin",
-  "version": "3.7.1",
+  "version": "3.7.3",
   "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
   "author": "Pan <panfree23@gmail.com>",
   "license": "MIT",
@@ -9,7 +9,14 @@
     "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
     "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
     "lint": "eslint --ext .js,.vue src",
-    "test": "npm run lint"
+    "test": "npm run lint",
+    "precommit": "lint-staged"
+  },
+  "lint-staged": {
+    "src/**/*.{js,vue}": [
+      "eslint --fix",
+      "git add"
+    ]
   },
   "keywords": [
     "vue",
@@ -29,6 +36,7 @@
     "axios": "0.17.1",
     "clipboard": "1.7.1",
     "codemirror": "5.32.0",
+    "connect": "3.6.6",
     "driver.js": "0.5.2",
     "dropzone": "5.2.0",
     "echarts": "3.8.5",
@@ -42,6 +50,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "screenfull": "3.3.2",
+    "serve-static": "1.13.2",
     "showdown": "1.8.5",
     "simplemde": "1.11.2",
     "sortablejs": "1.7.0",
@@ -79,6 +88,8 @@
     "file-loader": "1.1.5",
     "friendly-errors-webpack-plugin": "1.6.1",
     "html-webpack-plugin": "2.30.1",
+    "husky": "0.14.3",
+    "lint-staged": "7.2.0",
     "node-notifier": "5.1.2",
     "node-sass": "^4.7.2",
     "optimize-css-assets-webpack-plugin": "3.2.0",
@@ -87,7 +98,6 @@
     "postcss-import": "11.0.0",
     "postcss-loader": "2.0.9",
     "postcss-url": "7.3.0",
-    "pushstate-server": "3.0.1",
     "rimraf": "2.6.2",
     "sass-loader": "6.0.6",
     "script-loader": "0.7.2",

src/components/GithubCorner/index.vue

@@ -1,6 +1,6 @@
 <template>
   <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
-    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff; position: absolute; top: 84px; border: 0; right: 0;"
+    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff;"
       aria-hidden="true">
       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
       <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"

src/components/Share/dropdownMenu.vue

@@ -35,7 +35,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" >
-$n: 6; //和items.length 相同
+$n: 8; //和items.length 相同
 $t: .1s;
 .share-dropdown-menu {
   width: 250px;

src/components/TextHoverEffect/Mallki.vue

@@ -23,6 +23,7 @@ export default {
 
 <style>
 /* Mallki */
+
 .link--mallki {
   font-weight: 800;
   color: #4dd9d5;
@@ -109,5 +110,4 @@ display: inline-block;
   -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
   transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
 }
-
 </style>

src/components/Tinymce/components/editorImage.vue

@@ -2,7 +2,7 @@
   <div class="upload-container">
     <el-button icon='el-icon-upload' size="mini" :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
     </el-button>
-    <el-dialog append-to-body :visible.sync="dialogVisible">
+    <el-dialog :visible.sync="dialogVisible">
       <el-upload class="editor-slide-upload" action="https://httpbin.org/post" :multiple="true" :file-list="fileList" :show-file-list="true"
         list-type="picture-card" :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload">
         <el-button size="small" type="primary">点击上传</el-button>

src/components/Tinymce/index.vue

@@ -84,6 +84,7 @@ export default {
         imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
         default_link_target: '_blank',
         link_title: false,
+        nonbreaking_force_tab: true, // inserting nonbreaking space   need Nonbreaking Space Plugin
         init_instance_callback: editor => {
           if (_this.value) {
             editor.setContent(_this.value)

src/components/Upload/singleImage.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="upload-container">
         <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
-            :on-success="handleImageScucess">
+            :on-success="handleImageSuccess">
             <i class="el-icon-upload"></i>
             <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         </el-upload>
@@ -43,7 +43,7 @@ export default {
     emitInput(val) {
       this.$emit('input', val)
     },
-    handleImageScucess() {
+    handleImageSuccess() {
       this.emitInput(this.tempUrl)
     },
     beforeUpload() {

src/components/Upload/singleImage2.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="singleImageUpload2 upload-container">
     <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
-      :on-success="handleImageScucess">
+      :on-success="handleImageSuccess">
       <i class="el-icon-upload"></i>
       <div class="el-upload__text">Drag或<em>点击上传</em></div>
     </el-upload>
@@ -42,7 +42,7 @@ export default {
     emitInput(val) {
       this.$emit('input', val)
     },
-    handleImageScucess() {
+    handleImageSuccess() {
       this.emitInput(this.tempUrl)
     },
     beforeUpload() {

src/components/Upload/singleImage3.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="upload-container">
     <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
-      :on-success="handleImageScucess">
+      :on-success="handleImageSuccess">
       <i class="el-icon-upload"></i>
       <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
     </el-upload>
@@ -50,7 +50,7 @@ export default {
     emitInput(val) {
       this.$emit('input', val)
     },
-    handleImageScucess(file) {
+    handleImageSuccess(file) {
       this.emitInput(file.files.file)
     },
     beforeUpload() {

src/components/UploadExcel/index.vue

@@ -41,6 +41,11 @@ export default {
         return
       }
       const rawFile = files[0] // only use files[0]
+
+      if (!this.isExcel(rawFile)) {
+        this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
+        return false
+      }
       this.upload(rawFile)
       e.stopPropagation()
       e.preventDefault()
@@ -110,6 +115,9 @@ export default {
         headers.push(hdr)
       }
       return headers
+    },
+    isExcel(file) {
+      return /\.(xlsx|xls|csv)$/.test(file.name)
     }
   }
 }

src/directive/waves/waves.js

@@ -29,8 +29,8 @@ export default{
             ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
             break
           default:
-            ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'
+            ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop || document.body.scrollTop) + 'px'
-            ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'
+            ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft || document.body.scrollLeft) + 'px'
         }
         ripple.style.backgroundColor = opts.color
         ripple.className = 'waves-ripple z-active'

src/lang/en.js

@@ -29,9 +29,13 @@ export default {
     mixChart: 'Mix Chart',
     example: 'Example',
     nested: 'Nested Routes',
-    bar: 'Bar',
+    menu1: 'Menu 1',
-    barProfile: 'Profile',
+    'menu1-1': 'Menu 1-1',
-    barPosts: 'Posts',
+    'menu1-2': 'Menu 1-2',
+    'menu1-2-1': 'Menu 1-2-1',
+    'menu1-2-2': 'Menu 1-2-2',
+    'menu1-3': 'Menu 1-3',
+    menu2: 'Menu 2',
     Table: 'Table',
     dynamicTable: 'Dynamic Table',
     dragTable: 'Drag Table',

src/lang/index.js

@@ -20,8 +20,11 @@ const messages = {
 }
 
 const i18n = new VueI18n({
-  locale: Cookies.get('language') || 'en', // set locale
+  // set locale
-  messages // set locale messages
+  // options: en or zh
+  locale: Cookies.get('language') || 'en',
+  // set locale messages
+  messages
 })
 
 export default i18n

src/lang/zh.js

@@ -29,9 +29,13 @@ export default {
     mixChart: '混合图表',
     example: '综合实例',
     nested: '路由嵌套',
-    bar: 'Bar',
+    menu1: '菜单1',
-    barProfile: 'Profile',
+    'menu1-1': '菜单1-1',
-    barPosts: 'Posts',
+    'menu1-2': '菜单1-2',
+    'menu1-2-1': '菜单1-2-1',
+    'menu1-2-2': '菜单1-2-2',
+    'menu1-3': '菜单1-3',
+    menu2: '菜单2',
     Table: 'Table',
     dynamicTable: '动态Table',
     dragTable: '拖拽Table',

src/router/index.js

@@ -202,7 +202,7 @@ export const asyncRouterMap = [
   {
     path: '/nested',
     component: Layout,
-    redirect: '/nested/bar/profile',
+    redirect: '/nested/menu1/menu1-1',
     name: 'nested',
     meta: {
       title: 'nested',
@@ -210,24 +210,52 @@ export const asyncRouterMap = [
     },
     children: [
       {
-        path: '/nested/bar', // Must write the full path
+        path: 'menu1',
-        component: () => import('@/views/nested/bar/index'), // Parent router-view
+        component: () => import('@/views/nested/menu1/index'), // Parent router-view
-        name: 'bar',
+        name: 'menu1',
-        meta: { title: 'bar' },
+        meta: { title: 'menu1' },
+        redirect: '/nested/menu1/menu1-1',
         children: [
           {
-            path: 'profile',
+            path: 'menu1-1',
-            component: () => import('@/views/nested/bar/profile'),
+            component: () => import('@/views/nested/menu1/menu1-1'),
-            name: 'bar-profile',
+            name: 'menu1-1',
-            meta: { title: 'barProfile' }
+            meta: { title: 'menu1-1' }
           },
           {
-            path: 'posts',
+            path: 'menu1-2',
-            component: () => import('@/views/nested/bar/posts'),
+            component: () => import('@/views/nested/menu1/menu1-2'),
-            name: 'bar-posts',
+            name: 'menu1-2',
-            meta: { title: 'barPosts' }
+            redirect: '/nested/menu1/menu1-2/menu1-2-1',
+            meta: { title: 'menu1-2' },
+            children: [
+              {
+                path: 'menu1-2-1',
+                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
+                name: 'menu1-2-1',
+                meta: { title: 'menu1-2-1' }
+              },
+              {
+                path: 'menu1-2-2',
+                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
+                name: 'menu1-2-2',
+                meta: { title: 'menu1-2-2' }
               }
             ]
+          },
+          {
+            path: 'menu1-3',
+            component: () => import('@/views/nested/menu1/menu1-3'),
+            name: 'menu1-3',
+            meta: { title: 'menu1-3' }
+          }
+        ]
+      },
+      {
+        path: 'menu2',
+        name: 'menu2',
+        component: () => import('@/views/nested/menu2/index'),
+        meta: { title: 'menu2' }
       }
     ]
   },

src/store/modules/tagsView.js

@@ -38,7 +38,7 @@ const tagsView = {
       for (const i of state.cachedViews) {
         if (i === view.name) {
           const index = state.cachedViews.indexOf(i)
-          state.cachedViews = state.cachedViews.slice(index, i + 1)
+          state.cachedViews = state.cachedViews.slice(index, index + 1)
           break
         }
       }

src/styles/sidebar.scss

@@ -4,6 +4,7 @@
     min-height: 100%;
     transition: margin-left .28s;
     margin-left: 180px;
+    position: relative;
   }
   // 侧边栏
   .sidebar-container {

src/vendor/Blob.js

@@ -33,37 +33,37 @@
     var
       get_class = function (object) {
         return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
-                }
+      },
-                , FakeBlobBuilder = function BlobBuilder() {
+      FakeBlobBuilder = function BlobBuilder() {
         this.data = [];
-                }
+      },
-                , FakeBlob = function Blob(data, type, encoding) {
+      FakeBlob = function Blob(data, type, encoding) {
         this.data = data;
         this.size = data.length;
         this.type = type;
         this.encoding = encoding;
-                }
+      },
-                , FBB_proto = FakeBlobBuilder.prototype
+      FBB_proto = FakeBlobBuilder.prototype,
-                , FB_proto = FakeBlob.prototype
+      FB_proto = FakeBlob.prototype,
-                , FileReaderSync = view.FileReaderSync
+      FileReaderSync = view.FileReaderSync,
-                , FileException = function(type) {
+      FileException = function (type) {
         this.code = this[this.name = type];
-                }
+      },
-                , file_ex_codes = (
+      file_ex_codes = (
-                    "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+        "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR " +
-                    + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
+        "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
-                ).split(" ")
+      ).split(" "),
-                , file_ex_code = file_ex_codes.length
+      file_ex_code = file_ex_codes.length,
-                , real_URL = view.URL || view.webkitURL || view
+      real_URL = view.URL || view.webkitURL || view,
-                , real_create_object_URL = real_URL.createObjectURL
+      real_create_object_URL = real_URL.createObjectURL,
-                , real_revoke_object_URL = real_URL.revokeObjectURL
+      real_revoke_object_URL = real_URL.revokeObjectURL,
-                , URL = real_URL
+      URL = real_URL,
-                , btoa = view.btoa
+      btoa = view.btoa,
-                , atob = view.atob
+      atob = view.atob
 
-                , ArrayBuffer = view.ArrayBuffer
+      ,
-                , Uint8Array = view.Uint8Array
+      ArrayBuffer = view.ArrayBuffer,
-                ;
+      Uint8Array = view.Uint8Array;
     FakeBlob.fake = FB_proto.fake = true;
     while (file_ex_code--) {
       FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
@@ -73,9 +73,8 @@
     }
     URL.createObjectURL = function (blob) {
       var
-                    type = blob.type
+        type = blob.type,
-                    , data_URI_header
+        data_URI_header;
-                    ;
       if (type === null) {
         type = "application/octet-stream";
       }
@@ -85,7 +84,8 @@
           return data_URI_header + ";base64," + blob.data;
         } else if (blob.encoding === "URI") {
           return data_URI_header + "," + decodeURIComponent(blob.data);
-                    } if (btoa) {
+        }
+        if (btoa) {
           return data_URI_header + ";base64," + btoa(blob.data);
         } else {
           return data_URI_header + "," + encodeURIComponent(blob.data);
@@ -104,11 +104,10 @@
       // decode data to a binary string
       if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
         var
-                        str = ""
+          str = "",
-                        , buf = new Uint8Array(data)
+          buf = new Uint8Array(data),
-                        , i = 0
+          i = 0,
-                        , buf_len = buf.length
+          buf_len = buf.length;
-                        ;
         for (; i < buf_len; i++) {
           str += String.fromCharCode(buf[i]);
         }
@@ -152,9 +151,7 @@
         type = null;
       }
       return new FakeBlob(
-                    this.data.slice(start, args > 1 ? end : this.data.length)
+        this.data.slice(start, args > 1 ? end : this.data.length), type, this.encoding
-                    , type
-                    , this.encoding
       );
     };
     FB_proto.toString = function () {

src/vendor/Export2Excel.js

@@ -29,15 +29,24 @@ function generateArray(table) {
       if (rowspan || colspan) {
         rowspan = rowspan || 1;
         colspan = colspan || 1;
-                ranges.push({s: {r: R, c: outRow.length}, e: {r: R + rowspan - 1, c: outRow.length + colspan - 1}});
+        ranges.push({
+          s: {
+            r: R,
+            c: outRow.length
+          },
+          e: {
+            r: R + rowspan - 1,
+            c: outRow.length + colspan - 1
           }
-            ;
+        });
+      };
 
       //Handle Value
       outRow.push(cellValue !== "" ? cellValue : null);
 
       //Handle Colspan
-            if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+      if (colspan)
+        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
     }
     out.push(outRow);
   }
@@ -52,16 +61,30 @@ function datenum(v, date1904) {
 
 function sheet_from_array_of_arrays(data, opts) {
   var ws = {};
-    var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};
+  var range = {
+    s: {
+      c: 10000000,
+      r: 10000000
+    },
+    e: {
+      c: 0,
+      r: 0
+    }
+  };
   for (var R = 0; R != data.length; ++R) {
     for (var C = 0; C != data[R].length; ++C) {
       if (range.s.r > R) range.s.r = R;
       if (range.s.c > C) range.s.c = C;
       if (range.e.r < R) range.e.r = R;
       if (range.e.c < C) range.e.c = C;
-            var cell = {v: data[R][C]};
+      var cell = {
+        v: data[R][C]
+      };
       if (cell.v == null) continue;
-            var cell_ref = XLSX.utils.encode_cell({c: C, r: R});
+      var cell_ref = XLSX.utils.encode_cell({
+        c: C,
+        r: R
+      });
 
       if (typeof cell.v === 'number') cell.t = 'n';
       else if (typeof cell.v === 'boolean') cell.t = 'b';
@@ -69,8 +92,7 @@ function sheet_from_array_of_arrays(data, opts) {
         cell.t = 'n';
         cell.z = XLSX.SSF._table[14];
         cell.v = datenum(cell.v);
-            }
+      } else cell.t = 's';
-            else cell.t = 's';
 
       ws[cell_ref] = cell;
     }
@@ -101,7 +123,8 @@ export function export_table_to_excel(id) {
   var data = oo[0];
   var ws_name = "SheetJS";
 
-    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
 
   /* add ranges to worksheet */
   // ws['!cols'] = ['apple', 'banan'];
@@ -111,30 +134,49 @@ export function export_table_to_excel(id) {
   wb.SheetNames.push(ws_name);
   wb.Sheets[ws_name] = ws;
 
-    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
+  var wbout = XLSX.write(wb, {
+    bookType: 'xlsx',
+    bookSST: false,
+    type: 'binary'
+  });
 
-    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), "test.xlsx")
 }
 
-export function export_json_to_excel({header, data, filename='excel-list', autoWidth=true}={}) {
+export function export_json_to_excel({
+  header,
+  data,
+  filename,
+  autoWidth = true
+} = {}) {
   /* original data */
+  filename = filename || 'excel-list'
   data = [...data]
   data.unshift(header);
   var ws_name = "SheetJS";
-    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
 
   if (autoWidth) {
     /*设置worksheet每列的最大宽度*/
     const colWidth = data.map(row => row.map(val => {
       /*先判断是否为null/undefined*/
       if (val == null) {
-          return {'wch': 10};
+        return {
+          'wch': 10
+        };
       }
       /*再判断是否为中文*/
       else if (val.toString().charCodeAt(0) > 255) {
-          return {'wch': val.toString().length * 2};
+        return {
+          'wch': val.toString().length * 2
+        };
       } else {
-          return {'wch': val.toString().length};
+        return {
+          'wch': val.toString().length
+        };
       }
     }))
     /*以第一行为初始值*/
@@ -153,6 +195,12 @@ export function export_json_to_excel({header, data, filename='excel-list', autoW
   wb.SheetNames.push(ws_name);
   wb.Sheets[ws_name] = ws;
 
-    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
+  var wbout = XLSX.write(wb, {
-    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), filename + ".xlsx");
+    bookType: 'xlsx',
+    bookSST: false,
+    type: 'binary'
+  });
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), filename + ".xlsx");
 }

src/vendor/Export2Zip.js

@@ -14,7 +14,9 @@ export function export_txt_to_zip(th, jsonData, txtName, zipName) {
     txtData += `${tempStr}\r\n`
   })
   zip.file(`${txt_name}.txt`, txtData)
-  zip.generateAsync({type:"blob"}).then((blob) => {
+  zip.generateAsync({
+    type: "blob"
+  }).then((blob) => {
     saveAs(blob, `${zip_name}.zip`)
   }, (err) => {
     alert('导出失败')

src/views/clipboard/index.vue

@@ -34,7 +34,7 @@ export default {
     },
     clipboardSuccess() {
       this.$message({
-        message: '复制成功',
+        message: 'Copy successfully',
         type: 'success',
         duration: 1500
       })

src/views/components-demo/markdown.vue

@@ -2,7 +2,7 @@
   <div class="components-container">
     <code>Markdown is based on
       <a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，Simply encapsulated in Vue.
-      <a target="_blank" href="https://segmentfault.com/a/1190000009762198#articleHeader14">
+      <a target="_blank" href="https://juejin.im/post/593121aa0ce4630057f70d35#heading-15">
         相关文章 </a>
     </code>
     <div class="editor-container">

src/views/components-demo/mixin.vue

@@ -7,19 +7,19 @@
         </div>
         <div style="margin-bottom:50px;">
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
+            <router-link class="pan-btn blue-btn" to="/documentation/index">Documentation</router-link>
           </el-col>
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link>
+            <router-link class="pan-btn light-blue-btn" to="/icon/index">Icons</router-link>
           </el-col>
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn pink-btn" to="/excel/download">Excel</router-link>
+            <router-link class="pan-btn pink-btn" to="/excel/export-excel">Excel</router-link>
           </el-col>
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn green-btn" to="/example/table/complex-table">Table</router-link>
+            <router-link class="pan-btn green-btn" to="/table/complex-table">Table</router-link>
           </el-col>
           <el-col :span="4" class="text-center">
-            <router-link class="pan-btn tiffany-btn" to="/form/edit-form">Form</router-link>
+            <router-link class="pan-btn tiffany-btn" to="/example/create">Form</router-link>
           </el-col>
           <el-col :span="4" class="text-center">
             <router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
@@ -130,12 +130,14 @@ export default {
         title: [{ required: true, trigger: 'change', validator: validate }]
       },
       articleList: [
-        { title: '基础篇', href: 'https://segmentfault.com/a/1190000009275424' },
+        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
-        { title: '登录权限篇', href: 'https://segmentfault.com/a/1190000009506097' },
+        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
-        { title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' },
+        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
-        { title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' },
+        { title: 'vueAdmin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
         { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
-        { title: '优雅的使用 icon', href: 'https://segmentfault.com/a/https://segmentfault.com/a/1190000012213278' }
+        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
+        { title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
+        { title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
       ]
     }
   }

src/views/dashboard/admin/components/TodoList/index.vue

@@ -72,7 +72,7 @@ export default {
     }
   },
   methods: {
-    setLocalStorgae() {
+    setLocalStorage() {
       window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
     },
     addTodo(e) {
@@ -82,30 +82,30 @@ export default {
           text,
           done: false
         })
-        this.setLocalStorgae()
+        this.setLocalStorage()
       }
       e.target.value = ''
     },
     toggleTodo(val) {
       val.done = !val.done
-      this.setLocalStorgae()
+      this.setLocalStorage()
     },
     deleteTodo(todo) {
       this.todos.splice(this.todos.indexOf(todo), 1)
-      this.setLocalStorgae()
+      this.setLocalStorage()
     },
     editTodo({ todo, value }) {
       todo.text = value
-      this.setLocalStorgae()
+      this.setLocalStorage()
     },
     clearCompleted() {
       this.todos = this.todos.filter(todo => !todo.done)
-      this.setLocalStorgae()
+      this.setLocalStorage()
     },
     toggleAll({ done }) {
       this.todos.forEach(todo => {
         todo.done = done
-        this.setLocalStorgae()
+        this.setLocalStorage()
       })
     }
   },

src/views/dashboard/admin/components/TransactionTable.vue

@@ -2,7 +2,7 @@
   <el-table :data="list" style="width: 100%;padding-top: 15px;">
     <el-table-column label="Order_No" min-width="200">
       <template slot-scope="scope">
-        {{scope.row.order_no}}
+        {{scope.row.order_no |  orderNoFilter}}
       </template>
     </el-table-column>
     <el-table-column label="Price" width="195" align="center">
@@ -34,6 +34,9 @@ export default {
         pending: 'danger'
       }
       return statusMap[status]
+    },
+    orderNoFilter(str) {
+      return str.substring(0, 30)
     }
   },
   created() {

src/views/dashboard/admin/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="dashboard-editor-container">
-    <github-corner></github-corner>
+
+    <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner>
 
     <panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>
 
@@ -30,10 +31,10 @@
       <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
         <transaction-table></transaction-table>
       </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}" style="margin-bottom:30px;">
+      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
         <todo-list></todo-list>
       </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}" style="margin-bottom:30px;" >
+      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
         <box-card></box-card>
       </el-col>
     </el-row>
@@ -41,6 +42,7 @@
   </div>
 </template>
 
+
 <script>
 import GithubCorner from '@/components/GithubCorner'
 import PanelGroup from './components/PanelGroup'

src/views/dashboard/editor/index.vue

@@ -4,10 +4,10 @@
       <pan-thumb style="float: left" :image="avatar"> Your roles:
         <span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
       </pan-thumb>
-      <github-corner></github-corner>
+      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner>
       <div class="info-container">
         <span class="display_name">{{name}}</span>
-        <span style="font-size:20px;padding-top:20px;display:inline-block;">editor : dashboard</span>
+        <span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
       </div>
     </div>
     <div>

src/views/documentation/index.vue

@@ -14,12 +14,14 @@ export default {
   data() {
     return {
       articleList: [
-        { title: '基础篇', href: 'https://segmentfault.com/a/1190000009275424' },
+        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
-        { title: '登录权限篇', href: 'https://segmentfault.com/a/1190000009506097' },
+        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
-        { title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' },
+        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
-        { title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' },
+        { title: 'vueAdmin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
         { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
-        { title: '优雅的使用 icon', href: 'https://segmentfault.com/a/1190000012213278' }
+        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
+        { title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
+        { title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
       ]
     }
   }

src/views/errorPage/401.vue

@@ -57,6 +57,7 @@ export default {
     .pan-back-btn {
       background: #008489;
       color: #fff;
+      border: none!important;
     }
     .pan-gif {
       margin: 0 auto;

src/views/errorPage/404.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
+  <div class="wscn-http404-container">
     <div class="wscn-http404">
       <div class="pic-404">
         <img class="pic-404__parent" :src="img_404" alt="404">
@@ -34,24 +34,28 @@ export default {
   },
   computed: {
     message() {
-      return '特朗普说这个页面你不能进......'
+      return '网管说这个页面你不能进......'
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
 .wscn-http404 {
   position: relative;
   width: 1200px;
-  margin: 20px auto 60px;
+  padding: 0 50px;
-  padding: 0 100px;
   overflow: hidden;
   .pic-404 {
     position: relative;
     float: left;
     width: 600px;
-    padding: 150px 0;
     overflow: hidden;
     &__parent {
       width: 100%;
@@ -163,7 +167,7 @@ export default {
     position: relative;
     float: left;
     width: 300px;
-    padding: 150px 0;
+    padding: 30px 0;
     overflow: hidden;
     &__oops {
       font-size: 32px;
@@ -179,7 +183,8 @@ export default {
     &__headline {
       font-size: 20px;
       line-height: 24px;
-      color: #1482f0;
+      color: #222;
+      font-weight: bold;
       opacity: 0;
       margin-bottom: 10px;
       animation-name: slideUp;

src/views/example/components/ArticleDetail.vue

@@ -16,7 +16,7 @@
 
           <Warning />
 
-          <el-col :span="21">
+          <el-col :span="24">
             <el-form-item style="margin-bottom: 40px;" prop="title">
               <MDinput name="name" v-model="postForm.title" required :maxlength="100">
                 标题
@@ -34,14 +34,14 @@
                   </el-form-item>
                 </el-col>
 
-                <el-col :span="8">
+                <el-col :span="10">
                   <el-form-item label-width="80px" label="发布时间:" class="postInfo-container-item">
                     <el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                     </el-date-picker>
                   </el-form-item>
                 </el-col>
 
-                <el-col :span="8">
+                <el-col :span="6">
                   <el-form-item label-width="60px" label="重要性:" class="postInfo-container-item">
                     <el-rate style="margin-top:8px;" v-model="postForm.importance" :max='3' :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :low-threshold="1"
                       :high-threshold="3">

src/views/excel/uploadExcel.vue

@@ -22,13 +22,14 @@ export default {
   },
   methods: {
     beforeUpload(file) {
-      const isLt2M = file.size / 1024 / 1024 < 1
+      const isLt1M = file.size / 1024 / 1024 < 1
 
-      if (isLt2M) {
+      if (isLt1M) {
         return true
       }
+
       this.$message({
-        message: 'Please do not upload files larger than 2m in size.',
+        message: 'Please do not upload files larger than 1m in size.',
         type: 'warning'
       })
       return false

src/views/layout/Layout.vue

@@ -33,6 +33,7 @@ export default {
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
         withoutAnimation: this.sidebar.withoutAnimation,
         mobile: this.device === 'mobile'
       }
@@ -53,6 +54,10 @@ export default {
     position: relative;
     height: 100%;
     width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
   }
   .drawer-bg {
     background: #000;

src/views/layout/components/AppMain.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="app-main" style="min-height: 100%">
+  <section class="app-main">
     <transition name="fade-transform" mode="out-in">
       <keep-alive :include="cachedViews">
         <router-view :key="key"></router-view>
@@ -21,3 +21,13 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.app-main {
+  /*84 = navbar + tags-view = 50 +34 */
+  min-height: calc(100vh - 84px);
+  position: relative;
+  overflow: hidden;
+}
+</style>
+

src/views/layout/components/Sidebar/SidebarItem.vue

@@ -1,26 +1,24 @@
 <template>
-  <div class="menu-wrapper">
+  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
-    <template v-for="item in routes" v-if="!item.hidden&&item.children">
 
-      <router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path"
+      <router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
-        :key="item.children[0].name">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-        <el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
+          <svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
-          <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
+          <span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{generateTitle(onlyOneChild.meta.title)}}</span>
-          <span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{generateTitle(item.children[0].meta.title)}}</span>
         </el-menu-item>
       </router-link>
 
-      <el-submenu v-else :index="item.name||item.path" :key="item.name">
+      <el-submenu v-else :index="item.name||item.path">
         <template slot="title">
           <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
           <span v-if="item.meta&&item.meta.title" slot="title">{{generateTitle(item.meta.title)}}</span>
         </template>
 
         <template v-for="child in item.children" v-if="!child.hidden">
-          <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
+          <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
 
-          <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
+          <router-link v-else :to="resolvePath(child.path)" :key="child.name">
-            <el-menu-item :index="item.path+'/'+child.path">
+            <el-menu-item :index="resolvePath(child.path)">
               <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
               <span v-if="child.meta&&child.meta.title" slot="title">{{generateTitle(child.meta.title)}}</span>
             </el-menu-item>
@@ -28,34 +26,54 @@
         </template>
       </el-submenu>
 
-    </template>
   </div>
 </template>
 
 <script>
+import path from 'path'
 import { generateTitle } from '@/utils/i18n'
 
 export default {
   name: 'SidebarItem',
   props: {
-    routes: {
+    // route object
-      type: Array
+    item: {
+      type: Object,
+      required: true
     },
     isNest: {
       type: Boolean,
       default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      onlyOneChild: null
     }
   },
   methods: {
-    hasOneShowingChildren(children) {
+    hasOneShowingChild(children) {
       const showingChildren = children.filter(item => {
-        return !item.hidden
+        if (item.hidden) {
+          return false
+        } else {
+          // temp set(will be used if only has one showing child )
+          this.onlyOneChild = item
+          return true
+        }
       })
       if (showingChildren.length === 1) {
         return true
       }
       return false
     },
+    resolvePath(...paths) {
+      return path.resolve(this.basePath, ...paths)
+    },
     generateTitle
   }
 }

src/views/layout/components/Sidebar/index.vue

@@ -9,7 +9,7 @@
       text-color="#bfcbd9"
       active-text-color="#409EFF"
     >
-      <sidebar-item :routes="permission_routers"></sidebar-item>
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
     </el-menu>
   </el-scrollbar>
 </template>

src/views/layout/components/TagsView.vue

@@ -104,7 +104,8 @@ export default {
     openMenu(tag, e) {
       this.visible = true
       this.selectedTag = tag
-      this.left = e.clientX
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      this.left = e.clientX - offsetLeft + 15 // 15: margin right
       this.top = e.clientY
     },
     closeMenu() {

src/views/login/index.vue

@@ -1,22 +1,27 @@
 <template>
   <div class="login-container">
+
     <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
+
       <div class="title-container">
         <h3 class="title">{{$t('login.title')}}</h3>
         <lang-select class="set-language"></lang-select>
       </div>
+
       <el-form-item prop="username">
         <span class="svg-container svg-container_login">
           <svg-icon icon-class="user" />
         </span>
-        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="username" />
+        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" :placeholder="$t('login.username')"
+        />
       </el-form-item>
 
       <el-form-item prop="password">
         <span class="svg-container">
           <svg-icon icon-class="password" />
         </span>
-        <el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="password" />
+        <el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
+          :placeholder="$t('login.password')" />
         <span class="show-pwd" @click="showPwd">
           <svg-icon icon-class="eye" />
         </span>
@@ -137,8 +142,21 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-$bg:#2d3a4b;
+  /* 修复input 背景不协调 和光标变色 */
+  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+ 
+  $bg:#283443;
   $light_gray:#eee;
+  $cursor: #fff;
+
+  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+    .login-container .el-input input{
+      color: $cursor;
+      &::first-line {
+        color: $light_gray;
+      }
+    }
+  }
 
   /* reset element-ui css */
   .login-container {
@@ -154,9 +172,10 @@ $light_gray:#eee;
         padding: 12px 5px 12px 15px;
         color: $light_gray;
         height: 47px;
+        caret-color: $cursor;
         &:-webkit-autofill {
           -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
-        -webkit-text-fill-color: #fff !important;
+          -webkit-text-fill-color: $cursor !important;
         }
       }
     }
@@ -211,7 +230,6 @@ $light_gray:#eee;
     position: relative;
     .title {
       font-size: 26px;
-      font-weight: 400;
       color: $light_gray;
       margin: 0px auto 40px auto;
       text-align: center;

src/views/nested/bar/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="app-container">
-    <code>Parent View: Bar</code>
-    <img src="https://wpimg.wallstcn.com/be29a7d2-5ccf-4a2b-888d-8a6c2bbb7aac.png">
-    <router-view></router-view>
-  </div>
-</template>

src/views/nested/bar/posts.vue

@@ -1,6 +0,0 @@
-<template>
-  <div style="margin-top:30px;">
-    <el-alert title="Children: Posts" type="warning" :closable="false">
-    </el-alert>
-  </div>
-</template>

src/views/nested/bar/profile.vue

@@ -1,6 +0,0 @@
-<template>
-  <div style="margin-top:30px;">
-    <el-alert title="Children: Profile" type="success" :closable="false">
-    </el-alert>
-  </div>
-</template>

src/views/nested/menu1/index.vue

@@ -0,0 +1,7 @@
+<template >
+  <div style="padding:30px;">
+    <el-alert title="menu 1" :closable="false">
+      <router-view />
+    </el-alert>
+  </div>
+</template>

src/views/nested/menu1/menu1-1/index.vue

@@ -0,0 +1,7 @@
+<template >
+  <div style="padding:30px;">
+    <el-alert title="menu 1-1" type="success" :closable="false">
+      <router-view />
+    </el-alert>
+  </div>
+</template>

src/views/nested/menu1/menu1-2/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div style="padding:30px;">
+    <el-alert title="menu 1-2" type="success" :closable="false">
+      <router-view />
+    </el-alert>
+  </div>
+</template>

src/views/nested/menu1/menu1-2/menu1-2-1/index.vue

@@ -0,0 +1,5 @@
+<template functional>
+  <div style="padding:30px;">
+    <el-alert title="menu 1-2-1" type="warning" :closable="false" />
+  </div>
+</template>

src/views/nested/menu1/menu1-2/menu1-2-2/index.vue

@@ -0,0 +1,5 @@
+<template functional>
+  <div style="padding:30px;">
+    <el-alert title="menu 1-2-2" type="warning" :closable="false" />
+  </div>
+</template>

src/views/nested/menu1/menu1-3/index.vue

@@ -0,0 +1,5 @@
+<template functional>
+  <div style="padding:30px;">
+    <el-alert title="menu 1-3" type="success" :closable="false" />
+  </div>
+</template>

src/views/nested/menu2/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div style="padding:30px;">
+    <el-alert title="menu 2" :closable="false" />
+  </div>
+</template>