refine

Author: PanJiaChen

src/api/remoteSearch.js

@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 
-export function userSearch(name) {
+export function searchUser(name) {
   return request({
     url: '/search/user',
     method: 'get',

src/components/BackToTop/index.vue

@@ -88,29 +88,29 @@ export default {
 </script>
 
 <style scoped>
-  .back-to-ceiling {
-    position: fixed;
-    display: inline-block;
-    text-align: center;
-    cursor: pointer;
-  }
+.back-to-ceiling {
+  position: fixed;
+  display: inline-block;
+  text-align: center;
+  cursor: pointer;
+}
 
-  .back-to-ceiling:hover {
-    background: #d5dbe7;
-  }
+.back-to-ceiling:hover {
+  background: #d5dbe7;
+}
 
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity .5s;
-  }
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .5s;
+}
 
-  .fade-enter,
-  .fade-leave-to {
-    opacity: 0
-  }
+.fade-enter,
+.fade-leave-to {
+  opacity: 0
+}
 
-  .back-to-ceiling .Icon {
-    fill: #9aaabf;
-    background: none;
-  }
+.back-to-ceiling .Icon {
+  fill: #9aaabf;
+  background: none;
+}
 </style>

src/components/Breadcrumb/index.vue

@@ -59,14 +59,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .app-breadcrumb.el-breadcrumb {
-    display: inline-block;
-    font-size: 14px;
-    line-height: 50px;
-    margin-left: 8px;
-    .no-redirect {
-      color: #97a8be;
-      cursor: text;
-    }
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 8px;
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
   }
+}
 </style>

src/components/Screenfull/index.vue

@@ -17,6 +17,9 @@ export default {
   mounted() {
     this.init()
   },
+  beforeDestroy() {
+    this.destroy()
+  },
   methods: {
     click() {
       if (!screenfull.enabled) {
@@ -28,11 +31,17 @@ export default {
       }
       screenfull.toggle()
     },
+    change() {
+      this.isFullscreen = screenfull.isFullscreen
+    },
     init() {
       if (screenfull.enabled) {
-        screenfull.on('change', () => {
-          this.isFullscreen = screenfull.isFullscreen
-        })
+        screenfull.on('change', this.change)
+      }
+    },
+    destroy() {
+      if (screenfull.enabled) {
+        screenfull.off('change', this.change)
       }
     }
   }

src/layout/mixin/ResizeHandler.js

@@ -14,6 +14,9 @@ export default {
   beforeMount() {
     window.addEventListener('resize', this.resizeHandler)
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeHandler)
+  },
   mounted() {
     const isMobile = this.isMobile()
     if (isMobile) {

src/views/example/components/ArticleDetail.vue

@@ -81,7 +81,7 @@ import MDinput from '@/components/MDinput'
 import Sticky from '@/components/Sticky' // 粘性header组件
 import { validURL } from '@/utils/validate'
 import { fetchArticle } from '@/api/article'
-import { userSearch } from '@/api/remoteSearch'
+import { searchUser } from '@/api/remoteSearch'
 import Warning from './Warning'
 import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown'
 
@@ -225,7 +225,7 @@ export default {
       this.postForm.status = 'draft'
     },
     getRemoteUserList(query) {
-      userSearch(query).then(response => {
+      searchUser(query).then(response => {
         if (!response.data.items) return
         this.userListOptions = response.data.items.map(v => v.name)
       })

vue.config.js

@@ -31,8 +31,8 @@ module.exports = {
       errors: true
     },
     proxy: {
-      // Detail: https://cli.vuejs.org/config/#devserver-proxy
-      // xxx-api/login => mock/login
+      // change xxx-api/login => mock/login
+      // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         target: `http://localhost:${port}/mock`,
         changeOrigin: true,
@@ -71,6 +71,8 @@ module.exports = {
   chainWebpack(config) {
     config.plugins.delete('preload') // TODO: need test
     config.plugins.delete('prefetch') // TODO: need test
+
+    // set svg-sprite-loader
     config.module
       .rule('svg')
       .exclude.add(resolve('src/icons'))
@@ -86,6 +88,8 @@ module.exports = {
         symbolId: 'icon-[name]'
       })
       .end()
+
+    // set preserveWhitespace
     config.module
       .rule('vue')
       .use('vue-loader')
@@ -120,17 +124,17 @@ module.exports = {
                   name: 'chunk-libs',
                   test: /[\\/]node_modules[\\/]/,
                   priority: 10,
-                  chunks: 'initial' // 只打包初始时依赖的第三方
+                  chunks: 'initial' // only package third parties that are initially dependent
                 },
                 elementUI: {
-                  name: 'chunk-elementUI', // 单独将 elementUI 拆包
-                  priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
+                  name: 'chunk-elementUI', // split elementUI into a single package
+                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                   test: /[\\/]node_modules[\\/]element-ui[\\/]/
                 },
                 commons: {
                   name: 'chunk-commons',
-                  test: resolve('src/components'), // 可自定义拓展你的规则
-                  minChunks: 3, // 最小公用次数
+                  test: resolve('src/components'), // can customize your rules
+                  minChunks: 3, //  minimum common number
                   priority: 5,
                   reuseExistingChunk: true
                 }