merge master

mock/article.js

@@ -3,7 +3,7 @@ import Mock from 'mockjs'
 const List = []
 const count = 100
 
-const baseContent = '<p>我是测试数据我是测试数据</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
+const baseContent = '<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
 const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
 
 for (let i = 0; i < count; i++) {

src/components/BackToTop/index.vue

@@ -1,12 +1,7 @@
 <template>
   <transition :name="transitionName">
     <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
-      <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px; width: 16px;">
+      <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height:16px;width:16px"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg>
-        <title>回到顶部</title>
-        <g>
-          <path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd" />
-        </g>
-      </svg>
     </div>
   </transition>
 </template>

src/components/JsonEditor/index.vue

@@ -25,8 +25,8 @@ export default {
   },
   watch: {
     value(value) {
-      const editor_value = this.jsonEditor.getValue()
+      const editorValue = this.jsonEditor.getValue()
-      if (value !== editor_value) {
+      if (value !== editorValue) {
         this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
       }
     }

src/components/Kanban/index.vue

@@ -15,6 +15,7 @@
     </draggable>
   </div>
 </template>
+
 <script>
 import draggable from 'vuedraggable'
 

src/components/ThemePicker/index.vue

@@ -8,19 +8,28 @@
 </template>
 
 <script>
-
 const version = require('element-ui/package.json').version // element-ui version from node_modules
 const ORIGINAL_THEME = '#409EFF' // default color
-import defaultSettings from '@/settings'
 
 export default {
   data() {
     return {
       chalk: '', // content of theme-chalk css
-      theme: defaultSettings.theme
+      theme: ''
+    }
+  },
+  computed: {
+    defaultTheme() {
+      return this.$store.state.settings.theme
     }
   },
   watch: {
+    defaultTheme: {
+      handler: function(val, oldVal) {
+        this.theme = val
+      },
+      immediate: true
+    },
     async theme(val) {
       const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
       if (typeof val !== 'string') return

src/components/Tinymce/components/EditorImage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="upload-container">
     <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
-      上传图片
+      upload
     </el-button>
     <el-dialog :visible.sync="dialogVisible">
       <el-upload
@@ -16,14 +16,14 @@
         list-type="picture-card"
       >
         <el-button size="small" type="primary">
-          点击上传
+          Click upload
         </el-button>
       </el-upload>
       <el-button @click="dialogVisible = false">
-        取 消
+        Cancel
       </el-button>
       <el-button type="primary" @click="handleSubmit">
-        确 定
+        Confirm
       </el-button>
     </el-dialog>
   </div>
@@ -54,7 +54,7 @@ export default {
     handleSubmit() {
       const arr = Object.keys(this.listObj).map(v => this.listObj[v])
       if (!this.checkAllSuccess()) {
-        this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
+        this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
         return
       }
       this.$emit('successCBK', arr)

src/components/Upload/SingleImage.vue

@@ -26,7 +26,6 @@
 </template>
 
 <script>
-// 预览效果见付费文章
 import { getToken } from '@/api/qiniu'
 
 export default {

src/directive/el-table/adaptive.js

@@ -1,4 +1,3 @@
-
 import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
 
 /**

src/directive/el-table/index.js

@@ -1,4 +1,3 @@
-
 import adaptive from './adaptive'
 
 const install = function(Vue) {

src/directive/permission/permission.js

@@ -1,4 +1,3 @@
-
 import store from '@/store'
 
 export default {

src/filters/index.js

@@ -1,4 +1,4 @@
-// set function parseTime,formatTime to filter
+// import parseTime, formatTime and set to filter
 export { parseTime, formatTime } from '@/utils'
 
 /**

src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 
 import Cookies from 'js-cookie'
 
-import 'normalize.css/normalize.css' // A modern alternative to CSS resets
+import 'normalize.css/normalize.css' // a modern alternative to CSS resets
 
 import Element from 'element-ui'
 import './styles/element-variables.scss'
@@ -19,16 +19,20 @@ import './utils/error-log' // error log
 
 import * as filters from './filters' // global filters
 
-import { mockXHR } from '../mock' // simulation data
+/**
-
+ * If you don't want to use mock-server
-// mock api in github pages site build
+ * you want to use mockjs for request interception
-if (process.env.NODE_ENV === 'production') { mockXHR() }
+ * you can execute:
+ *
+ * import { mockXHR } from '../mock'
+ * mockXHR()
+ */
 
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium' // set element-ui default size
 })
 
-// register global utility filters.
+// register global utility filters
 Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
 })

src/permission.js

@@ -4,6 +4,7 @@ import { Message } from 'element-ui'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
 import { getToken } from '@/utils/auth' // get token from cookie
+import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
@@ -13,6 +14,9 @@ router.beforeEach(async(to, from, next) => {
   // start progress bar
   NProgress.start()
 
+  // set page title
+  document.title = getPageTitle(to.meta.title)
+
   // determine whether the user has logged in
   const hasToken = getToken()
 

src/router/index.js

@@ -118,8 +118,9 @@ export const asyncRoutes = [
   {
     path: '/permission',
     component: Layout,
-    redirect: '/permission/index',
+    redirect: '/permission/page',
     alwaysShow: true, // will always show the root menu
+    name: 'Permission',
     meta: {
       title: 'Permission',
       icon: 'lock',
@@ -301,6 +302,7 @@ export const asyncRoutes = [
     component: Layout,
     redirect: '/zip/download',
     alwaysShow: true,
+    name: 'Zip',
     meta: { title: 'Zip', icon: 'zip' },
     children: [
       {

src/router/modules/components.js

@@ -1,4 +1,4 @@
-/** When your routing table is too long, you can split it into small modules**/
+/** When your routing table is too long, you can split it into small modules **/
 
 import Layout from '@/layout'
 

src/router/modules/nested.js

@@ -1,4 +1,4 @@
-/** When your routing table is too long, you can split it into small modules**/
+/** When your routing table is too long, you can split it into small modules **/
 
 import Layout from '@/layout'
 

src/router/modules/table.js

@@ -1,4 +1,4 @@
-/** When your routing table is too long, you can split it into small modules**/
+/** When your routing table is too long, you can split it into small modules **/
 
 import Layout from '@/layout'
 

src/settings.js

@@ -1,7 +1,5 @@
-import variables from '@/styles/element-variables.scss'
+module.exports = {
-
+  title: 'Vue Element Admin',
-export default {
-  theme: variables.theme,
 
   /**
    * @type {boolean} true | false

src/store/modules/permission.js

@@ -1,7 +1,7 @@
 import { asyncRoutes, constantRoutes } from '@/router'
 
 /**
- * 通过meta.role判断是否与当前用户权限匹配
+ * Use meta.role to determine if the current user has permission
  * @param roles
  * @param route
  */
@@ -14,7 +14,7 @@ function hasPermission(roles, route) {
 }
 
 /**
- * 递归过滤异步路由表，返回符合用户角色权限的路由表
+ * Filter asynchronous routing tables by recursion
  * @param routes asyncRoutes
  * @param roles
  */

src/store/modules/settings.js

@@ -1,8 +1,10 @@
+import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
-const { showSettings, tagsView, fixedHeader, sidebarLogo, theme } = defaultSettings
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
 
 const state = {
-  theme: theme,
+  theme: variables.theme,
   showSettings: showSettings,
   tagsView: tagsView,
   fixedHeader: fixedHeader,

src/styles/element-ui.scss

@@ -1,4 +1,4 @@
-//覆盖一些element-ui样式
+// cover some element-ui styles
 
 .el-breadcrumb__inner,
 .el-breadcrumb__inner a {

src/styles/index.scss

@@ -96,14 +96,18 @@ div:focus {
   }
 }
 
-code {
+aside {
   background: #eef1f6;
-  padding: 15px 16px;
+  padding: 8px 24px;
   margin-bottom: 20px;
+  border-radius: 2px;
   display: block;
-  line-height: 36px;
+  line-height: 32px;
-  font-size: 15px;
+  font-size: 16px;
-  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: #2c3e50;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
   a {
     color: #337ab7;
@@ -115,20 +119,6 @@ code {
   }
 }
 
-.warn-content {
-  background: rgba(66, 185, 131, .1);
-  border-radius: 2px;
-  padding: 16px;
-  padding: 1rem;
-  line-height: 1.6rem;
-  word-spacing: .05rem;
-
-  a {
-    color: #42b983;
-    font-weight: 600;
-  }
-}
-
 //main-container全局样式
 .app-container {
   padding: 20px;

src/styles/sidebar.scss

@@ -1,6 +1,5 @@
 #app {
 
-  // 主体区域 Main container
   .main-container {
     min-height: 100%;
     transition: margin-left .28s;
@@ -8,7 +7,6 @@
     position: relative;
   }
 
-  // 侧边栏 Sidebar container
   .sidebar-container {
     transition: width 0.28s;
     width: $sideBarWidth !important;
@@ -22,7 +20,7 @@
     z-index: 1001;
     overflow: hidden;
 
-    //reset element-ui css
+    // reset element-ui css
     .horizontal-collapse-transition {
       transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
     }
@@ -149,7 +147,7 @@
     min-width: $sideBarWidth !important;
   }
 
-  // 适配移动端, Mobile responsive
+  // mobile responsive
   .mobile {
     .main-container {
       margin-left: 0px;

src/styles/transition.scss

@@ -1,6 +1,6 @@
-//global transition css
+// global transition css
 
-/*fade*/
+/* fade */
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.28s;
@@ -11,7 +11,7 @@
   opacity: 0;
 }
 
-/*fade-transform*/
+/* fade-transform */
 .fade-transform-leave-active,
 .fade-transform-enter-active {
   transition: all .5s;
@@ -27,7 +27,7 @@
   transform: translateX(30px);
 }
 
-/*breadcrumb transition*/
+/* breadcrumb transition */
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
   transition: all .5s;

src/styles/variables.scss

@@ -8,10 +8,10 @@ $tiffany: #4AB7BD;
 $yellow:#FEC171;
 $panGreen: #30B08F;
 
-//sidebar
+// sidebar
 $menuText:#bfcbd9;
 $menuActiveText:#409EFF;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
+$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
 
 $menuBg:#304156;
 $menuHover:#263445;

src/utils/error-log.js

@@ -4,10 +4,10 @@ import { isString, isArray } from '@/utils/validate'
 import settings from '@/settings'
 
 // you can set in settings.js
-// errorLog:'production' | ['production','development']
+// errorLog:'production' | ['production', 'development']
 const { errorLog: needErrorLog } = settings
 
-function checkNeed(arg) {
+function checkNeed() {
   const env = process.env.NODE_ENV
   if (isString(needErrorLog)) {
     return env === needErrorLog

src/utils/get-page-title.js

@@ -0,0 +1,13 @@
+import defaultSettings from '@/settings'
+import i18n from '@/lang'
+
+const title = defaultSettings.title || 'Vue Element Admin'
+
+export default function getPageTitle(key) {
+  const hasKey = i18n.te(`route.${key}`)
+  if (hasKey) {
+    const pageName = i18n.t(`route.${key}`)
+    return `${pageName} - ${title}`
+  }
+  return `${title}`
+}

src/utils/request.js

@@ -5,23 +5,25 @@ import { getToken } from '@/utils/auth'
 
 // create an axios instance
 const service = axios.create({
-  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
+  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
-  withCredentials: true, // 跨域请求时发送 cookies
+  withCredentials: true, // send cookies when cross-domain requests
   timeout: 5000 // request timeout
 })
 
 // request interceptor
 service.interceptors.request.use(
   config => {
-    // Do something before request is sent
+    // do something before request is sent
+
     if (store.getters.token) {
-      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
+      // let each request carry token --['X-Token'] as a custom key.
+      // please modify it according to the actual situation.
       config.headers['X-Token'] = getToken()
     }
     return config
   },
   error => {
-    // Do something with request error
+    // do something with request error
     console.log(error) // for debug
     return Promise.reject(error)
   }
@@ -33,31 +35,33 @@ service.interceptors.response.use(
    * If you want to get information such as headers or status
    * Please return  response => response
   */
+
   /**
-   * 下面的注释为通过在response里，自定义code来标示请求状态
+   * Determine the request status by custom code
-   * 当code返回如下情况则说明权限有问题，登出并返回到登录页
+   * Here is just an example
-   * 如想通过 XMLHttpRequest 来状态码标识 逻辑可写在下面error中
+   * You can also judge the status by HTTP Status Code.
-   * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
    */
   response => {
     const res = response.data
+
+    // if the custom code is not 20000, it is judged as an error.
     if (res.code !== 20000) {
       Message({
         message: res.message || 'error',
         type: 'error',
         duration: 5 * 1000
       })
-      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
+
+      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-        // 请自行在引入 MessageBox
+        // to re-login
-        // import { Message, MessageBox } from 'element-ui'
+        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
-        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+          confirmButtonText: 'Re-Login',
-          confirmButtonText: '重新登录',
+          cancelButtonText: 'Cancel',
-          cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           store.dispatch('user/resetToken').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+            location.reload()
           })
         })
       }

src/views/components-demo/avatar-upload.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="components-container">
-    <code>This is based on
+    <aside>This is based on
       <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
       Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.
-    </code>
+    </aside>
 
     <pan-thumb :image="image" />
 

src/views/components-demo/back-to-top.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="components-container">
-    <code>When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner</code>
+    <aside>
-    <code>You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally</code>
+      When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner
+    </aside>
+    <aside>
+      You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally
+    </aside>
     <div class="placeholder-container">
       <div>placeholder</div>
       <div>placeholder</div>
@@ -113,8 +117,7 @@
       <div>placeholder</div>
       <div>placeholder</div>
     </div>
-    <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
+    <!-- you can add element-ui's tooltip -->
-    <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
     <el-tooltip placement="top" content="tooltip">
       <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
     </el-tooltip>
@@ -129,6 +132,7 @@ export default {
   components: { BackToTop },
   data() {
     return {
+      // customizable button style, show/hide critical point, return position
       myBackToTopStyle: {
         right: '50px',
         bottom: '50px',

src/views/components-demo/count-to.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="components-container">
-    <p class="warn-content">
+    <aside>
       <a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a>
-    </p>
+    </aside>
     <count-to
       ref="example"
       :start-val="_startVal"
@@ -45,9 +45,9 @@
         <input v-model="setSuffix" name="suffixInput">
       </label>
     </div>
-    <code>&lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
+    <aside>&lt;count-to :start-val=&#x27;{{ _startVal }}&#x27; :end-val=&#x27;{{ _endVal }}&#x27; :duration=&#x27;{{ _duration }}&#x27;
       :decimals=&#x27;{{ _decimals }}&#x27; :separator=&#x27;{{ _separator }}&#x27; :prefix=&#x27;{{ _prefix }}&#x27; :suffix=&#x27;{{ _suffix }}&#x27;
-      :autoplay=false&gt;</code>
+      :autoplay=false&gt;</aside>
   </div>
 </template>
 

src/views/components-demo/dnd-list.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="components-container">
-    <code>drag-list base on
+    <aside>drag-list base on
       <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
-    </code>
+    </aside>
     <div class="editor-container">
       <dnd-list :list1="list1" :list2="list2" list1-title="List" list2-title="Article pool" />
     </div>

src/views/components-demo/dropzone.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="components-container">
-    <code>
+    <aside>
       Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
       Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.
-    </code>
+    </aside>
     <div class="editor-container">
       <dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS" />
     </div>

src/views/components-demo/json-editor.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="components-container">
-    <code>Json-Editor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>. Lint
+    <aside>Json-Editor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>. Lint
       base on <a
         href="https://github.com/codemirror/CodeMirror/blob/master/addon/lint/json-lint.js"
         target="_blank"
-      >json-lint</a>.</code>
+      >json-lint</a>.</aside>
     <div class="editor-container">
       <json-editor ref="jsonEditor" v-model="value" />
     </div>

src/views/components-demo/markdown.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="components-container">
-    <code>Markdown is based on
+    <aside>Markdown is based on
       <a href="https://github.com/nhnent/tui.editor" target="_blank">tui.editor</a> ，simply wrapped with Vue.
       <a
         target="_blank"
         href="https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor.html"
       >
         Documentation </a>
-    </code>
+    </aside>
 
     <div class="editor-container">
       <el-tag class="tag-title">

src/views/components-demo/split-pane.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="components-container">
-    <code><strong>SplitPane</strong> If you've used
+    <aside><strong>SplitPane</strong> If you've used
       <a href="https://codepen.io/" target="_blank"> codepen</a>,
       <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
       <a href="https://github.com/PanJiaChen/vue-split-pane" target="_blank"> Github repository</a>
-    </code>
+    </aside>
     <split-pane split="vertical" @resize="resize">
       <template slot="paneL">
         <div class="left-container" />

src/views/components-demo/sticky.vue

@@ -37,7 +37,9 @@
     </sticky>
 
     <div class="components-container">
-      <code>Sticky header, When the page is scrolled to the preset position will be sticky on the top.</code>
+      <aside>
+        Sticky header, When the page is scrolled to the preset position will be sticky on the top.
+      </aside>
       <div>placeholder</div>
       <div>placeholder</div>
       <div>placeholder</div>

src/views/components-demo/tinymce.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="components-container">
-    <code>
+    <aside>
       Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.
       <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html">Documentation</a>
-    </code>
+    </aside>
     <div>
       <tinymce v-model="content" :height="300" />
     </div>

src/views/error-log/index.vue

@@ -3,12 +3,12 @@
     <ErrorA />
     <ErrorB />
     <h3>Please click the bug icon in the upper right corner</h3>
-    <code>
+    <aside>
       Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.
       <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html">
         Document introduction
       </a>
-    </code>
+    </aside>
     <a href="#">
       <img src="https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif">
     </a>

src/views/example/components/ArticleDetail.vue

@@ -6,10 +6,10 @@
         <PlatformDropdown v-model="postForm.platforms" />
         <SourceUrlDropdown v-model="postForm.source_uri" />
         <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
-          发布
+          Publush
         </el-button>
         <el-button v-loading="loading" type="warning" @click="draftForm">
-          草稿
+          Draft
         </el-button>
       </sticky>
 
@@ -20,28 +20,28 @@
           <el-col :span="24">
             <el-form-item style="margin-bottom: 40px;" prop="title">
               <MDinput v-model="postForm.title" :maxlength="100" name="name" required>
-                标题
+                Title
               </MDinput>
             </el-form-item>
 
             <div class="postInfo-container">
               <el-row>
                 <el-col :span="8">
-                  <el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
+                  <el-form-item label-width="60px" label="Author:" class="postInfo-container-item">
-                    <el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable default-first-option remote placeholder="搜索用户">
+                    <el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable default-first-option remote placeholder="Search user">
                       <el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item" />
                     </el-select>
                   </el-form-item>
                 </el-col>
 
                 <el-col :span="10">
-                  <el-form-item label-width="80px" label="发布时间:" class="postInfo-container-item">
+                  <el-form-item label-width="120px" label="Publush Time:" 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 v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Select date and time" />
                   </el-form-item>
                 </el-col>
 
                 <el-col :span="6">
-                  <el-form-item label-width="60px" label="重要性:" class="postInfo-container-item">
+                  <el-form-item label-width="90px" label="Importance:" class="postInfo-container-item">
                     <el-rate
                       v-model="postForm.importance"
                       :max="3"
@@ -57,8 +57,8 @@
           </el-col>
         </el-row>
 
-        <el-form-item style="margin-bottom: 40px;" label-width="45px" label="摘要:">
+        <el-form-item style="margin-bottom: 40px;" label-width="70px" label="Summary:">
-          <el-input v-model="postForm.content_short" :rows="1" type="textarea" class="article-textarea" autosize placeholder="请输入内容" />
+          <el-input v-model="postForm.content_short" :rows="1" type="textarea" class="article-textarea" autosize placeholder="Please enter the content" />
           <span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}字</span>
         </el-form-item>
 

src/views/example/components/Dropdown/Comment.vue

@@ -1,17 +1,17 @@
 <template>
   <el-dropdown :show-timeout="100" trigger="click">
     <el-button plain>
-      {{ !comment_disabled?'评论已打开':'评论已关闭' }}
+      {{ !comment_disabled?'Comment: opened':'Comment: closed' }}
       <i class="el-icon-caret-bottom el-icon--right" />
     </el-button>
     <el-dropdown-menu slot="dropdown" class="no-padding">
       <el-dropdown-item>
         <el-radio-group v-model="comment_disabled" style="padding: 10px;">
           <el-radio :label="true">
-            关闭评论
+            Close comment
           </el-radio>
           <el-radio :label="false">
-            打开评论
+            Open comment
           </el-radio>
         </el-radio-group>
       </el-dropdown-item>

src/views/example/components/Dropdown/Platform.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dropdown :hide-on-click="false" :show-timeout="100" trigger="click">
     <el-button plain>
-      平台({{ platforms.length }})
+      Platfroms({{ platforms.length }})
       <i class="el-icon-caret-bottom el-icon--right" />
     </el-button>
     <el-dropdown-menu slot="dropdown" class="no-border">

src/views/example/components/Dropdown/SourceUrl.vue

@@ -1,14 +1,14 @@
 <template>
   <el-dropdown :show-timeout="100" trigger="click">
     <el-button plain>
-      外链
+      Link
       <i class="el-icon-caret-bottom el-icon--right" />
     </el-button>
     <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:400px">
       <el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
-        <el-input v-model="source_uri" placeholder="请输入内容">
+        <el-input v-model="source_uri" placeholder="Please enter the content">
           <template slot="prepend">
-            填写url
+            URL
           </template>
         </el-input>
       </el-form-item>

src/views/example/components/Warning.vue

@@ -1,11 +1,10 @@
 <template>
-  <p class="warn-content">
+  <aside>
-    创建和编辑页面是不能被keep-alive 缓存的，因为keep-alive 的include 目前不支持根据路由来缓存，所以目前都是基于component name 来缓存的，如果你想要实现缓存的效果，可以使用localstorage 等浏览器缓存方案。或者不要使用keep-alive
+    {{ $t('example.warning') }}
-    的include，直接缓存所有页面。详情见
     <a
       href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
       target="_blank"
-    >文档</a>
+    >Document</a>
-  </p>
+  </aside>
 </template>
 

src/views/guide/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="app-container">
-    <p class="warn-content">
+    <aside>
       The guide page is useful for some people who entered the project for the first time. You can briefly introduce the
       features of the project. Demo is based on
       <a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a>
-    </p>
+    </aside>
     <el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">
       Show Guide
     </el-button>

src/views/pdf/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="app-container">
-    <code style="margin-top:15px;">Here we use window.print() to implement the feature of downloading PDF.</code>
+    <aside style="margin-top:15px;">
+      Here we use window.print() to implement the feature of downloading PDF.
+    </aside>
     <router-link target="_blank" to="/pdf/download">
       <el-button type="primary">
         Click to download PDF

src/views/permission/directive.vue

@@ -35,10 +35,10 @@
     </div>
 
     <div :key="'checkPermission'+key" style="margin-top:60px;">
-      <code>
+      <aside>
         In some cases, using v-permission will have no effect. For example: Element-UI's Tab component or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.
         <br> e.g.
-      </code>
+      </aside>
 
       <el-tabs type="border-card" style="width:550px;">
         <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">

src/views/svg-icons/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="icons-container">
-    <p class="warn-content">
+    <aside>
       <a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" target="_blank">Add and use
       </a>
-    </p>
+    </aside>
     <el-tabs type="border-card">
       <el-tab-pane label="Icons">
         <div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">

src/views/table/complex-table.vue

@@ -148,9 +148,9 @@
 
 <script>
 import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
-import waves from '@/directive/waves' // Waves directive
+import waves from '@/directive/waves' // waves directive
 import { parseTime } from '@/utils'
-import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 
 const calendarTypeOptions = [
   { key: 'CN', display_name: 'China' },
@@ -159,7 +159,7 @@ const calendarTypeOptions = [
   { key: 'EU', display_name: 'Eurozone' }
 ]
 
-// arr to obj ,such as { CN : "China", US : "USA" }
+// arr to obj, such as { CN : "China", US : "USA" }
 const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
   acc[cur.key] = cur.display_name
   return acc

src/views/theme/index.vue

@@ -9,7 +9,9 @@
       <div class="box-item">
         <span class="field-label">Change Theme : </span>
         <el-switch v-model="theme" />
-        <code style="margin-top:15px;">Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.</code>
+        <aside style="margin-top:15px;">
+          Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.
+        </aside>
       </div>
     </el-card>
 

vue.config.js

@@ -1,12 +1,12 @@
 'use strict'
 const path = require('path')
-const pkg = require('./package.json')
+const defaultSettings = require('./src/settings.js')
 
 function resolve(dir) {
   return path.join(__dirname, dir)
 }
 
-const name = pkg.name || 'vue-element-admin' // page title
+const name = defaultSettings.title || 'vue Element Admin' // page title
 const port = 9527 // dev port
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
@@ -86,6 +86,7 @@ module.exports = {
       .end()
 
     config
+     // https://webpack.js.org/configuration/devtool/#development
       .when(process.env.NODE_ENV === 'development',
         config => config.devtool('cheap-source-map')
       )