fix: upgrade cli@~5.x, fix: /deep/ warning

package.json

@@ -44,12 +44,12 @@
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
-    "@vue/cli-plugin-babel": "^4.5.17",
-    "@vue/cli-plugin-eslint": "^4.5.17",
-    "@vue/cli-plugin-router": "^4.5.17",
-    "@vue/cli-plugin-unit-jest": "^4.5.17",
-    "@vue/cli-plugin-vuex": "^4.5.17",
-    "@vue/cli-service": "^4.5.17",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-router": "~5.0.8",
+    "@vue/cli-plugin-unit-jest": "~5.0.8",
+    "@vue/cli-plugin-vuex": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
     "@vue/eslint-config-standard": "^4.0.0",
     "@vue/test-utils": "^1.3.0",
     "babel-eslint": "^10.1.0",
@@ -57,7 +57,7 @@
     "babel-plugin-transform-remove-console": "^6.9.4",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^5.16.0",
+    "eslint": "^7.0.0",
     "eslint-plugin-html": "^5.0.5",
     "eslint-plugin-vue": "^5.2.3",
     "file-loader": "^6.2.0",
@@ -66,6 +66,7 @@
     "less": "^3.13.1",
     "less-loader": "^5.0.0",
     "lint-staged": "^12.5.0",
+    "postcss": "^8.3.5",
     "postcss-less": "^6.0.0",
     "regenerator-runtime": "^0.13.9",
     "stylelint": "^14.8.5",

src/components/ArticleListContent/ArticleListContent.vue

@@ -58,7 +58,7 @@ export default {
     color: @text-color-secondary;
     line-height: 22px;
 
-    & /deep/ .ant-avatar {
+    & :deep(.ant-avatar) {
       position: relative;
       top: 1px;
       width: 20px;

src/components/Editor/QuillEditor.vue

@@ -73,10 +73,10 @@ export default {
 /* 覆盖 quill 默认边框圆角为 ant 默认圆角，用于统一 ant 组件风格 */
 .ant-editor-quill {
   line-height: initial;
-  /deep/ .ql-toolbar.ql-snow {
+  :deep(.ql-toolbar.ql-snow) {
     border-radius: @border-radius-base @border-radius-base 0 0;
   }
-  /deep/ .ql-container.ql-snow {
+  :deep(.ql-container.ql-snow) {
     border-radius: 0 0 @border-radius-base @border-radius-base;
   }
 }

src/components/GlobalHeader/AvatarDropdown.vue

@@ -70,10 +70,10 @@ export default {
 
 <style lang="less" scoped>
 .ant-pro-drop-down {
-  /deep/ .action {
+  :deep(.action) {
     margin-right: 8px;
   }
-  /deep/ .ant-dropdown-menu-item {
+  :deep(.ant-dropdown-menu-item) {
     min-width: 160px;
   }
 }

src/components/StandardFormRow/StandardFormRow.vue

@@ -59,15 +59,15 @@ export default {
   padding-bottom: 16px;
   border-bottom: 1px dashed @border-color-split;
 
-  /deep/ .ant-form-item {
+  :deep(.ant-form-item ) {
     margin-right: 24px;
   }
-  /deep/ .ant-form-item-label label {
+  :deep(.ant-form-item-label label) {
     margin-right: 0;
     color: @text-color;
   }
-  /deep/ .ant-form-item-label,
-  .ant-form-item-control {
+  :deep(.ant-form-item-label,
+  .ant-form-item-control) {
     padding: 0;
     line-height: 32px;
   }
@@ -90,7 +90,7 @@ export default {
 
   .antd-pro-components-standard-form-row-index-content {
     flex: 1 1 0;
-    /deep/ .ant-form-item:last-child {
+    :deep(.ant-form-item:last-child) {
       margin-right: 0;
     }
   }
@@ -102,18 +102,18 @@ export default {
   }
 
   &.antd-pro-components-standard-form-row-index-standardFormRowBlock {
-    /deep/ .ant-form-item,
-    div.ant-form-item-control-wrapper {
+    :deep(.ant-form-item,
+    div.ant-form-item-control-wrapper) {
       display: block;
     }
   }
 
   &.antd-pro-components-standard-form-row-index-standardFormRowGrid {
-      /deep/ .ant-form-item,
-      div.ant-form-item-control-wrapper {
+      :deep(.ant-form-item,
+      div.ant-form-item-control-wrapper) {
         display: block;
       }
-      /deep/ .ant-form-item-label {
+      :deep(.ant-form-item-label) {
         float: left;
       }
   }

src/views/account/center/page/Project.vue

@@ -78,11 +78,11 @@ export default {
   .ant-pro-pages-account-projects-cardList {
     margin-top: 24px;
 
-    /deep/ .ant-card-meta-title {
+    :deep(.ant-card-meta-title) {
       margin-bottom: 4px;
     }
 
-    /deep/ .ant-card-meta-description {
+    :deep(.ant-card-meta-description) {
       height: 44px;
       overflow: hidden;
       line-height: 22px;
@@ -101,7 +101,7 @@ export default {
         font-size: 12px;
       }
 
-      /deep/ .ant-pro-avatar-list {
+      :deep(.ant-pro-avatar-list) {
         flex: 0 1 auto;
       }
     }

src/views/dashboard/Analysis.vue

@@ -398,7 +398,7 @@ export default {
 
   .antd-pro-pages-dashboard-analysis-salesCard {
     height: calc(100% - 24px);
-    /deep/ .ant-card-head {
+    :deep(.ant-card-head) {
       position: relative;
     }
   }

src/views/form/advancedForm/AdvancedForm.vue

@@ -288,7 +288,7 @@ export default {
     margin-bottom: 24px;
   }
   .popover-wrapper {
-    /deep/ .antd-pro-pages-forms-style-errorPopover .ant-popover-inner-content {
+    :deep(.antd-pro-pages-forms-style-errorPopover .ant-popover-inner-content) {
       min-width: 256px;
       max-height: 290px;
       padding: 0;

src/views/list/CardList.vue

@@ -81,13 +81,13 @@ export default {
   @import "~@/components/index.less";
 
   .card-list {
-    /deep/ .ant-card-body:hover {
+    :deep(.ant-card-body:hover) {
       .ant-card-meta-title>a {
         color: @primary-color;
       }
     }
 
-    /deep/ .ant-card-meta-title {
+    :deep(.ant-card-meta-title) {
       margin-bottom: 12px;
 
       &>a {
@@ -97,7 +97,7 @@ export default {
       }
     }
 
-    /deep/ .meta-content {
+    :deep(.meta-content) {
       position: relative;
       overflow: hidden;
       text-overflow: ellipsis;

src/views/list/search/Applications.vue

@@ -147,7 +147,7 @@ export default {
 
 <style lang="less" scoped>
 .ant-pro-components-tag-select {
-  /deep/ .ant-pro-tag-select .ant-tag {
+  :deep(.ant-pro-tag-select .ant-tag) {
     margin-right: 24px;
     padding: 0 8px;
     font-size: 14px;
@@ -156,11 +156,11 @@ export default {
 .ant-pro-pages-list-projects-cardList {
   margin-top: 24px;
 
-  /deep/ .ant-card-meta-title {
+  :deep(.ant-card-meta-title) {
     margin-bottom: 4px;
   }
 
-  /deep/ .ant-card-meta-description {
+  :deep(.ant-card-meta-description) {
     height: 44px;
     overflow: hidden;
     line-height: 22px;
@@ -179,7 +179,7 @@ export default {
       font-size: 12px;
     }
 
-    /deep/ .ant-pro-avatar-list {
+    :deep(.ant-pro-avatar-list) {
       flex: 0 1 auto;
     }
   }

src/views/list/search/Article.vue

@@ -172,7 +172,7 @@ export default {
 
 <style lang="less" scoped>
 .ant-pro-components-tag-select {
-  /deep/ .ant-pro-tag-select .ant-tag {
+  :deep(.ant-pro-tag-select .ant-tag) {
     margin-right: 24px;
     padding: 0 8px;
     font-size: 14px;

src/views/list/search/Projects.vue

@@ -128,7 +128,7 @@ export default {
 
 <style lang="less" scoped>
 .ant-pro-components-tag-select {
-  /deep/ .ant-pro-tag-select .ant-tag {
+  :deep(.ant-pro-tag-select .ant-tag) {
     margin-right: 24px;
     padding: 0 8px;
     font-size: 14px;
@@ -137,11 +137,11 @@ export default {
 .ant-pro-pages-list-projects-cardList {
   margin-top: 24px;
 
-  /deep/ .ant-card-meta-title {
+  :deep(.ant-card-meta-title) {
     margin-bottom: 4px;
   }
 
-  /deep/ .ant-card-meta-description {
+  :deep(.ant-card-meta-description) {
     height: 44px;
     overflow: hidden;
     line-height: 22px;
@@ -160,7 +160,7 @@ export default {
       font-size: 12px;
     }
 
-    /deep/ .ant-pro-avatar-list {
+    :deep(.ant-pro-avatar-list) {
       flex: 0 1 auto;
     }
   }

src/views/other/TreeList.vue

@@ -156,7 +156,7 @@ export default {
 <style lang="less">
   .custom-tree {
 
-    /deep/ .ant-menu-item-group-title {
+    :deep(.ant-menu-item-group-title) {
       position: relative;
       &:hover {
         .btn {
@@ -165,7 +165,7 @@ export default {
       }
     }
 
-    /deep/ .ant-menu-item {
+    :deep(.ant-menu-item) {
       &:hover {
         .btn {
           display: block;
@@ -173,7 +173,7 @@ export default {
       }
     }
 
-    /deep/ .btn {
+    :deep(.btn) {
       display: none;
       position: absolute;
       top: 0;

src/views/other/UserList.vue

@@ -331,7 +331,7 @@ export default {
 
 <style lang="less" scoped>
 .permission-form {
-  /deep/ .permission-group {
+  :deep(.permission-group) {
     margin-top: 0;
     margin-bottom: 0;
   }

vue.config.js

@@ -1,5 +1,6 @@
 const path = require('path')
 const webpack = require('webpack')
+const packageJson = require('./package.json')
 const GitRevisionPlugin = require('git-revision-webpack-plugin')
 const GitRevision = new GitRevisionPlugin()
 const buildDate = JSON.stringify(new Date().toLocaleString())
@@ -43,9 +44,12 @@ const vueConfig = {
     // webpack plugins
     plugins: [
       // Ignore all locale files of moment.js
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      new webpack.IgnorePlugin({
+        contextRegExp: /^\.\/locale$/,
+        resourceRegExp: /moment$/
+      }),
       new webpack.DefinePlugin({
-        APP_VERSION: `"${require('./package.json').version}"`,
+        APP_VERSION: `"${packageJson.version}"`,
         GIT_HASH: JSON.stringify(getGitHash()),
         BUILD_DATE: buildDate
       })
@@ -58,22 +62,22 @@ const vueConfig = {
   chainWebpack: config => {
     config.resolve.alias.set('@$', resolve('src'))
 
-    const svgRule = config.module.rule('svg')
-    svgRule.uses.clear()
-    svgRule
-      .oneOf('inline')
-      .resourceQuery(/inline/)
-      .use('vue-svg-icon-loader')
-      .loader('vue-svg-icon-loader')
-      .end()
-      .end()
-      .oneOf('external')
-      .use('file-loader')
-      .loader('file-loader')
-      .options({
-        name: 'assets/[name].[hash:8].[ext]',
-        esModule: false
-      })
+    // const svgRule = config.module.rule('svg')
+    // svgRule.uses.clear()
+    // svgRule
+    //   .oneOf('inline')
+    //   .resourceQuery(/inline/)
+    //   .use('vue-svg-icon-loader')
+    //   .loader('vue-svg-icon-loader')
+    //   .end()
+    //   .end()
+    //   .oneOf('external')
+    //   .use('file-loader')
+    //   .loader('file-loader')
+    //   .options({
+    //     name: 'assets/[name].[hash:8].[ext]',
+    //     esModule: false
+    //   })
 
     // en_US: If prod is on assets require on cdn
     // zh_CN: 如果是 prod 模式，则引入 CDN 依赖文件，有需要减少包大小请自行解除依赖