Merge branch 'master' of

cheapCoder · cheapCoder · commit dc55380c683b · 2021-01-12T09:06:18.000+08:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,6 +9,8 @@ module.exports = {
     node: true,
     es6: true,
   },
+  // https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/advanced/eslint.html#%E9%85%8D%E7%BD%AE%E9%A1%B9
+  //你可以修改为  extends: ['plugin:vue/essential', 'eslint:recommended']
   extends: ['plugin:vue/recommended', 'eslint:recommended'],
 
   // add your custom rules here
@@ -22,7 +24,7 @@ module.exports = {
       }
     }],
     "vue/singleline-html-element-content-newline": "off",
-    "vue/multiline-html-element-content-newline":"off",
+    "vue/multiline-html-element-content-newline": "off",
     "vue/name-property-casing": ["error", "PascalCase"],
     "vue/no-v-html": "off",
     'accessor-pairs': 2,
@@ -47,7 +49,7 @@ module.exports = {
     'curly': [2, 'multi-line'],
     'dot-location': [2, 'property'],
     'eol-last': 2,
-    'eqeqeq': ["error", "always", {"null": "ignore"}],
+    'eqeqeq': ["error", "always", { "null": "ignore" }],
     'generator-star-spacing': [2, {
       'before': true,
       'after': true
diff --git a/babel.config.js b/babel.config.js
@@ -8,7 +8,7 @@ module.exports = {
       // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
       // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
       // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
-      'plugins': ['dynamic-import-node']
+      'plugins': ['dynamic-import-node']    // 利用babel的babel-dynamic-import-node插件实现路由懒加载
     }
   }
 }
diff --git a/jsconfig.json b/jsconfig.json
@@ -1,9 +1,9 @@
-{ 
+{ //TODO: 什么用？
   "compilerOptions": {
     "baseUrl": "./",
     "paths": {
         "@/*": ["src/*"]
     }
   },
   "exclude": ["node_modules", "dist"]
-}
+}
diff --git a/mock/index.js b/mock/index.js
@@ -17,8 +17,7 @@ const mocks = [
 // please use it cautiously, it will redefine XMLHttpRequest,
 // which will cause many of your third-party libraries to be invalidated(like progress event).
 function mockXHR() {
-  // mock patch
-  // https://github.com/nuysoft/Mock/issues/300
+  // mock补丁 ：https://github.com/nuysoft/Mock/issues/300
   Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
   Mock.XHR.prototype.send = function() {
     if (this.custom.xhr) {
@@ -31,7 +30,7 @@ function mockXHR() {
     this.proxy_send(...arguments)
   }
 
-  function XHR2ExpressReqWrap(respond) {
+  function XHR2ExpressReqWrap(respond) {    //TODO: 什么用
     return function(options) {
       let result = null
       if (respond instanceof Function) {
@@ -49,7 +48,7 @@ function mockXHR() {
     }
   }
 
-  for (const i of mocks) {
+  for (const i of mocks) {  // NOTE: 遍历模板mock数据
     Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
   }
 }
diff --git a/mock/mock-server.js b/mock/mock-server.js
@@ -1,3 +1,9 @@
+// 由于我们的 mock 是完全基于webpack-dev-serve来实现的，所以在你启动前端服务的同时，mock-server就会自动启动，
+// 而且这里还通过 chokidar 来观察 mock 文件夹内容的变化。
+// 在发生变化时会清除之前注册的mock-api接口，重新动态挂载新的接口，从而支持热更新
+
+// TODO:mock-server是什么
+
 const chokidar = require('chokidar')
 const bodyParser = require('body-parser')
 const chalk = require('chalk')
diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
+  <div :style="{zIndex,height,width}" class="pan-item">
     <div class="pan-info">
       <div class="pan-info-roles-container">
         <slot />
diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-const version = require('element-ui/package.json').version // element-ui version from node_modules
+const version = require('element-ui/package.json').version // 获取element-ui的版本号
 const ORIGINAL_THEME = '#409EFF' // default color
 
 export default {
@@ -95,7 +95,7 @@ export default {
       return newStyle
     },
 
-    getCSSString(url, variable) {
+    getCSSString(url, variable) {   // TODO: 怎么修改主题色？ https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/advanced/theme.html#%E5%A4%9A%E5%A5%97%E4%B8%BB%E9%A2%98%E6%8D%A2%E8%82%A4
       return new Promise(resolve => {
         const xhr = new XMLHttpRequest()
         xhr.onreadystatechange = () => {
diff --git a/src/directive/permission/index.js b/src/directive/permission/index.js
@@ -4,7 +4,7 @@ const install = function(Vue) {
   Vue.directive('permission', permission)
 }
 if (window.Vue) {
-  window['permission'] = permission     
+  window['permission'] = permission
   Vue.use(install); // eslint-disable-line
 }
 
diff --git a/src/icons/svgo.yml b/src/icons/svgo.yml
@@ -1,3 +1,5 @@
+# 用于取出导出的svg的多余信息
+
 # replace default config
 
 # multipass: true
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
@@ -42,7 +42,7 @@ export default {
   },
   computed: {
     visitedViews() {
-      return this.$store.state.tagsView.visitedViews
+      return this.$store.state.tagsView.visitedViews    // 不用mapState是想要computed的缓存
     },
     routes() {
       return this.$store.state.permission.routes
diff --git a/src/main.js b/src/main.js
@@ -13,7 +13,7 @@ import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包
 
 import '@/styles/index.scss' // global css
 
-import './icons' // icon
+import './icons' // icon并全局引入svg-icon组件
 import './permission' // 权限控制
 import './utils/error-log' // error log
 
@@ -28,8 +28,7 @@ import * as filters from './filters' // global filters
  */
 if (process.env.NODE_ENV === 'production') {
   const { mockXHR } = require('../mock')
-
-  mockXHR()    // TODO:什么功能？
+  mockXHR()    // 执行就是使项目使用mock数据，不执行就使用后端真是数据；
 }
 
 Vue.use(Element, {
diff --git a/src/permission.js b/src/permission.js
@@ -10,7 +10,7 @@ NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
 const whiteList = ['/login', '/auth-redirect'] // 不重定向的白名单
 
-router.beforeEach(async(to, from, next)=>{
+router.beforeEach(async(to, from, next) => {
   NProgress.start()
 
   // set page title
@@ -24,24 +24,23 @@ router.beforeEach(async(to, from, next)=>{
       next({ path: '/' })   //  没登录就重定向到主页‘/’
       NProgress.done() // HACK: https://github.com/PanJiaChen/vue-element-admin/pull/2939
     } else {
-      // determine whether the user has obtained his permission roles through getInfo
-      const hasRoles = store.getters.roles && store.getters.roles.length > 0
-      if (hasRoles) {   //有角色
+      //
+      const hasRoles = store.getters.roles && store.getters.roles.length > 0    // 通过用户角色信息决定是否有权限进入
+      if (hasRoles) {
         next()
-      } else {          //没有就尝试获取
+      } else {          // 没有就尝试获取
         try {
           // note: roles必须是数组， such as: ['admin'] or ,['developer','editor']
-          const { roles } = await store.dispatch('user/getInfo')  //获取用户信息
-
+          const { roles } = await store.dispatch('user/getInfo')  // 获取用户信息
           const accessRoutes = await store.dispatch('permission/generateRoutes', roles)   //  基于roles动态生成路由map
 
           router.addRoutes(accessRoutes)    // 动态添加数组
 
-          //NOTE:  router.addRoutes之后的next()可能会失效，因为可能next()的时候路由并没有完全add完成，可通过在next(option)中重新定向引发beforeEach再次运行
+          // NOTE:  router.addRoutes之后的next()可能会失效，因为可能next()的时候路由并没有完全add完成，可通过在next(option)中重新定向引发beforeEach再次运行
           // 参考：https://juejin.cn/post/6844903478880370701#heading-8
 
           // set the replace: true, so the navigation will not leave a history record
-          next({ ...to, replace: true });
+          next({ ...to, replace: true })
         } catch (error) {
           await store.dispatch('user/resetToken')
           Message.error(error || 'Has Error')
diff --git a/src/router/index.js b/src/router/index.js
@@ -27,7 +27,7 @@ redirect: 'noRedirect'    //当设置 noRedirect 的时候该路由在面包屑
 alwaysShow: true
 
 name: 'router-name' // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
-meta: {e
+meta: {
   roles: ['admin', 'editor'] // 设置该路由进入的权限，支持多个权限叠加
   title: 'title' // 设置该路由在侧边栏和面包屑中展示的名字
   icon: 'svg-name' // 设置该路由的图标，支持 svg-class，也支持 el-icon-x element-ui 的 icon
@@ -139,7 +139,7 @@ export const asyncRoutes = [
     path: '/permission',
     component: Layout,
     redirect: '/permission/page',
-    alwaysShow: true, // will always show the root menu
+    alwaysShow: false, // will always show the root menu
     name: 'Permission',
     meta: {
       title: 'Permission',
diff --git a/src/store/modules/tagsView.js b/src/store/modules/tagsView.js
@@ -1,11 +1,11 @@
 const state = {
   visitedViews: [],
-  cachedViews: []
+  cachedViews: []   // NOTE:用于keep-alive标签include属性，但个人认为写到getter里，动态路由表变化时就会自动生成最新的cachedViews，不用再分发action了，更好
 }
 
 const mutations = {
   ADD_VISITED_VIEW: (state, view) => {
-    if (state.visitedViews.some(v => v.path === view.path)) return
+    if (state.visitedViews.some(v => v.path === view.path)) return  // 已经缓存过了就退出
     state.visitedViews.push(
       Object.assign({}, view, {
         title: view.meta.title || 'no-name'
diff --git a/src/utils/clipboard.js b/src/utils/clipboard.js
@@ -28,5 +28,5 @@ export default function handleClipboard(text, event) {
     clipboardError()
     clipboard.destroy()
   })
-  clipboard.onClick(event)
+  // clipboard.onClick(event) //TODO: 干嘛的？
 }
diff --git a/src/utils/validate.js b/src/utils/validate.js
@@ -6,7 +6,7 @@
  * @param {string} path
  * @returns {Boolean}
  */
-export function isExternal(path) {
+export function isExternal(path) {  // 判断是否是外部链接
   return /^(https?:|mailto:|tel:)/.test(path)
 }
 
diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue
@@ -5,6 +5,7 @@
         Your roles:
         <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
       </pan-thumb>
+      <!-- 打开tag-view会覆盖这个组件 -->
       <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
       <div class="info-container">
         <span class="display_name">{{ name }}</span>
diff --git a/学习笔记.md b/学习笔记.md
@@ -5,6 +5,7 @@
 3. 拆分包： webpack的AggressiveSplittingPlugin插件
 4. 单点登录怎么实现
 5. window.requestAnimationFrame
+6. require.context是啥？
 
 
 
@@ -20,9 +21,9 @@
    > 1. ​	在父组件用watch监视‘$route’: https://router.vuejs.org/zh/guide/advanced/transitions.html#%E5%9F%BA%E4%BA%8E%E8%B7%AF%E7%94%B1%E7%9A%84%E5%8A%A8%E6%80%81%E8%BF%87%E6%B8%A1
    > 2. 简单的在 router-view上加上一个唯一的key: https://juejin.cn/post/6844903476661583880#heading-16
 
-3. 
+3. navigator.language || navigator.browserLanguage页面语言。。。
 
-4. 
+4. 使用Driver.js实现新用户向导
 
 5. 
 

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ module.exports = {`
`8`	`8`	`// babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().`
`9`	`9`	`// This plugin can significantly increase the speed of hot updates, when you have a large number of pages.`
`10`	`10`	`// https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html`
`11`		`- 'plugins': ['dynamic-import-node']`
	`11`	`+ 'plugins': ['dynamic-import-node'] // 利用babel的babel-dynamic-import-node插件实现路由懒加载`
`12`	`12`	`}`
`13`	`13`	`}`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,8 +17,7 @@ const mocks = [`
`17`	`17`	`// please use it cautiously, it will redefine XMLHttpRequest,`
`18`	`18`	`// which will cause many of your third-party libraries to be invalidated(like progress event).`
`19`	`19`	`function mockXHR() {`
`20`		`- // mock patch`
`21`		`- // https://github.com/nuysoft/Mock/issues/300`
	`20`	`+ // mock补丁：https://github.com/nuysoft/Mock/issues/300`
`22`	`21`	`Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send`
`23`	`22`	`Mock.XHR.prototype.send = function() {`
`24`	`23`	`if (this.custom.xhr) {`
`@@ -31,7 +30,7 @@ function mockXHR() {`
`31`	`30`	`this.proxy_send(...arguments)`
`32`	`31`	`}`
`33`	`32`
`34`		`- function XHR2ExpressReqWrap(respond) {`
	`33`	`+ function XHR2ExpressReqWrap(respond) { //TODO: 什么用`
`35`	`34`	`return function(options) {`
`36`	`35`	`let result = null`
`37`	`36`	`if (respond instanceof Function) {`
`@@ -49,7 +48,7 @@ function mockXHR() {`
`49`	`48`	`}`
`50`	`49`	`}`
`51`	`50`
`52`		`- for (const i of mocks) {`
	`51`	`+ for (const i of mocks) { // NOTE: 遍历模板mock数据`
`53`	`52`	`Mock.mock(new RegExp(i.url), i.type \|\| 'get', XHR2ExpressReqWrap(i.response))`
`54`	`53`	`}`
`55`	`54`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ const install = function(Vue) {`
`4`	`4`	`Vue.directive('permission', permission)`
`5`	`5`	`}`
`6`	`6`	`if (window.Vue) {`
`7`		`- window['permission'] = permission`
	`7`	`+ window['permission'] = permission`
`8`	`8`	`Vue.use(install); // eslint-disable-line`
`9`	`9`	`}`
`10`	`10`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+# 用于取出导出的svg的多余信息`
	`2`	`+`
`1`	`3`	`# replace default config`
`2`	`4`
`3`	`5`	`# multipass: true`