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

Author: wenjianzhang

.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,25 +66,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  /deep/ .el-dialog__body{
+  ::v-deep .el-dialog__body{
     padding: 20px!important;
   }
 
   .el-dialog{
     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