feat✨: vue-cli@3 升级为 vue-cli@4、Change Node Sass to Dart Sass、代码生成工具

.env.development

@@ -4,11 +4,3 @@ ENV = 'development'
 # base api
 VUE_APP_BASE_API = 'http://127.0.0.1:8000'
 
-# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
-# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
-# It only does one thing by converting all import() to require().
-# This configuration can significantly increase the speed of hot updates,
-# when you have a large number of pages.
-# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
-
-VUE_CLI_BABEL_TRANSPILE_MODULES = true

babel.config.js

@@ -1,5 +1,10 @@
 module.exports = {
   presets: [
-    '@vue/app'
-  ]
+    '@vue/cli-plugin-babel/preset'
+  ],
+  env: {
+    development: {
+      plugins: ['dynamic-import-node']
+    }
+  }
 }

package.json

@@ -95,12 +95,13 @@
     "@vue/cli-plugin-babel": "4.4.6",
     "@vue/cli-plugin-eslint": "^4.4.6",
     "@vue/cli-plugin-unit-jest": "4.4.6",
-    "@vue/cli-service": "4.4.6",
+    "@vue/cli-service": "^4.5.13",
     "@vue/test-utils": "1.0.3",
     "autoprefixer": "^9.8.6",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.2.2",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
     "beautifier": "^0.1.7",
     "chalk": "4.1.0",
     "chokidar": "3.4.2",
@@ -114,9 +115,9 @@
     "lint-staged": "10.2.11",
     "mockjs": "1.1.0",
     "monaco-editor-webpack-plugin": "^1.9.0",
-    "node-sass": "^4.14.1",
     "plop": "2.7.4",
     "runjs": "^4.4.2",
+    "sass": "^1.35.1",
     "sass-loader": "^9.0.3",
     "script-ext-html-webpack-plugin": "2.1.4",
     "script-loader": "0.7.2",

src/components/CustomDialog/index.vue

@@ -66,7 +66,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  /deep/ .el-dialog__body{
+  ::v-deep .el-dialog__body{
     padding: 20px!important;
   }
 
@@ -74,17 +74,17 @@ export default {
     margin: 0!important;
   }
 
-  /deep/ .el-dialog__header {
+  ::v-deep .el-dialog__header {
     border-bottom: 1px solid #e8e8e8;
   }
 
-  /deep/ .el-dialog__footer{
+  ::v-deep .el-dialog__footer{
     border-top: 1px solid #e8e8e8;
     padding: 10px 20px!important;
     box-sizing: border-box;
   }
 
-  /deep/ .el-dialog__title{
+  ::v-deep .el-dialog__title{
     font-size: 16px;
   }
 </style>

src/components/Tinymce/index.vue

@@ -212,7 +212,7 @@ export default {
 
 <style lang="scss" scoped>
 
-.tinymce-container /deep/{
+.tinymce-container ::v-deep{
   position: relative;
   line-height: normal;
   width: 100%;

src/components/tableAction.vue

@@ -302,7 +302,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  /deep/ .el-table{
+  ::v-deep .el-table{
     margin-top: 10px;
     thead {
       th{

src/layout/components/TagsView/index.vue

@@ -247,7 +247,7 @@ String.prototype.colorRgb = function() {
 </script>
 
 <style lang="scss" scoped>
-.tags-view-container /deep/{
+.tags-view-container ::v-deep{
   height: 43px;
   width: 100%;
   background: #fff;

src/main.js

@@ -22,7 +22,7 @@ import permission from './directive/permission'
 import { getDicts } from '@/api/admin/dict/data'
 import { getItems, setItems } from '@/api/table'
 import { getConfigKey } from '@/api/admin/sys-config'
-import { parseTime, resetForm, addDateRange, selectDictLabel, download, selectItemsLabel } from '@/utils/costum'
+import { parseTime, resetForm, addDateRange, selectDictLabel, /* download,*/ selectItemsLabel } from '@/utils/costum'
 
 import './icons' // icon
 import './permission' // permission control
@@ -51,7 +51,7 @@ Vue.prototype.resetForm = resetForm
 Vue.prototype.addDateRange = addDateRange
 Vue.prototype.selectDictLabel = selectDictLabel
 Vue.prototype.selectItemsLabel = selectItemsLabel
-Vue.prototype.download = download
+// Vue.prototype.download = download
 
 // 全局组件挂载
 Vue.component('Pagination', Pagination)

src/store/modules/system.js

@@ -1,4 +1,4 @@
-import { getSetting, updateSetting } from '@/api/login'
+import { getSetting } from '@/api/login'
 import storage from '@/utils/storage'
 const state = {
   info: storage.get('app_info')
@@ -22,17 +22,6 @@ const actions = {
         reject(error)
       })
     })
-  },
-  updateSetting({ commit }, info) {
-    return new Promise((resolve, reject) => {
-      updateSetting(info).then(response => {
-        const { data } = response
-        commit('SET_INFO', data)
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
   }
 }
 

src/views/admin/sys-menu/index.vue

@@ -49,10 +49,6 @@
           </el-table-column>
           <el-table-column prop="sort" label="排序" width="60px" />
           <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true">
-            <!-- <template slot-scope="scope">
-              <span v-if="scope.row.permission==''">-</span>
-              <span v-else>{{ scope.row.permission }}</span>
-           > -->
             <template slot-scope="scope">
               <el-popover v-if="scope.row.sysApi.length>0" trigger="hover" placement="top">
                 <el-table

src/views/dashboard/admin/index.vue

@@ -162,7 +162,7 @@ export default {
   }
 }
 
-/deep/ .el-tabs__item{
+::v-deep .el-tabs__item{
    padding-left: 16px!important;
    height: 50px;
    line-height: 50px;

src/views/dev-tools/gen/genInfoForm.vue

@@ -72,12 +72,12 @@
             <template slot="append">...</template>
           </el-input>
         </el-form-item>
-        <el-alert
+        <!-- <el-alert
           title="接口地址示例"
           description="[get]api/{version}/{接口路径} \r\n [post]"
           type="success"
           show-icon
-        />
+        /> -->
       </el-col>
       <!-- <el-col :span="12">
         <el-form-item prop="isDataScope">

src/views/dev-tools/gen/index.vue

@@ -402,7 +402,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
- .el-dialog-container ::deep{
+ .el-dialog-container ::v-deep{
    height:600px;
    overflow: hidden;
    .el-scrollbar__view{
@@ -419,8 +419,8 @@ export default {
      display: none;
    }
  }
- ::deep .el-dialog__body{
-    padding: 0;
+ ::v-deep .el-dialog__body{
+    padding: 0 20px;
     margin:0;
   }
 

src/views/login/index.vue

@@ -432,7 +432,7 @@ $cursor: #fff;
 
 /* reset element-ui css */
 .login-container {
-  /deep/ .el-input {
+  ::v-deep .el-input {
     display: inline-block;
     height: 47px;
     width: 85%;

vue.config.js

@@ -60,8 +60,11 @@ module.exports = {
     }
   },
   chainWebpack(config) {
-    config.plugins.delete('preload') // TODO: need test
-    config.plugins.delete('prefetch') // TODO: need test
+    // it can improve the speed of the first screen, it is recommended to turn on preload
+    // config.plugins.delete('preload')
+
+    // when there are many pages, it will cause too many meaningless requests
+    config.plugins.delete('prefetch') //
 
     config.module
       .rule('svg')