refactor: 按需加载

packages/ui/certd-ui/babel.config.js

@@ -1,5 +1,9 @@
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
-  ]
+  ],
+  plugins: [['import', {
+    libraryName: 'ant-design-vue',
+    style: true // or 'css'
+  }]]
 }

packages/ui/certd-ui/package-lock.json

@@ -4106,6 +4106,16 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-import": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.13.3.tgz",
+      "integrity": "sha512-1qCWdljJOrDRH/ybaCZuDgySii4yYrtQ8OJQwrcDqdt0y67N30ng3X3nABg6j7gR7qUJgcMa9OMhc4AGViDwWw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/runtime": "^7.0.0"
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",

packages/ui/certd-ui/package.json

@@ -31,6 +31,7 @@
     "@vue/eslint-config-standard": "^6.0.0",
     "@vue/test-utils": "^2.0.0-0",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-import": "^1.13.3",
     "chai": "^4.2.0",
     "eslint": "^7.15.0",
     "eslint-plugin-import": "^2.20.2",

packages/ui/certd-ui/src/antdv.js

@@ -0,0 +1,90 @@
+import _ from 'lodash'
+import {
+  AutoComplete,
+  Alert,
+  Avatar,
+  Badge,
+  Button,
+  Calendar,
+  Card,
+  Cascader,
+  Checkbox,
+  Col,
+  DatePicker,
+  Divider,
+  Dropdown,
+  Form,
+  Icon,
+  Input,
+  InputNumber,
+  Layout,
+  List,
+  LocaleProvider,
+  Modal,
+  Radio,
+  Rate,
+  Row,
+  Select,
+  Switch,
+  Tabs,
+  Tag,
+  TimePicker,
+  Tooltip,
+  Drawer,
+  // ColorPicker,
+  ConfigProvider,
+  Descriptions,
+  Space
+} from 'ant-design-vue'
+
+const list = {
+  AutoComplete,
+  Alert,
+  Avatar,
+  Badge,
+  Button,
+  Calendar,
+  Card,
+  Cascader,
+  Checkbox,
+  Col,
+  DatePicker,
+  Divider,
+  Dropdown,
+  Form,
+  Icon,
+  Input,
+  InputNumber,
+  Layout,
+  List,
+  LocaleProvider,
+  TimePicker,
+  Modal,
+  Radio,
+  Rate,
+  Row,
+  Select,
+  Switch,
+  Tabs,
+  Tag,
+  Tooltip,
+  Drawer,
+  // ColorPicker,
+  ConfigProvider,
+  Descriptions,
+  Space
+}
+export default function (app) {
+  _.forEach(list, item => {
+    app.use(item)
+
+    // app.config.globalProperties.$message = message
+    // app.config.globalProperties.$notification = notification
+    app.config.globalProperties.$info = Modal.info
+    app.config.globalProperties.$success = Modal.success
+    app.config.globalProperties.$error = Modal.error
+    app.config.globalProperties.$warning = Modal.warning
+    app.config.globalProperties.$confirm = Modal.confirm
+    app.config.globalProperties.$destroyAll = Modal.destroyAll
+  })
+}

packages/ui/certd-ui/src/main.js

@@ -1,16 +1,16 @@
 import { createApp } from 'vue'
 import router from './router'
 import App from './App.vue'
-import Antd from 'ant-design-vue'
-import 'ant-design-vue/dist/antd.css'
-import './style/common.less'
 import { i18n } from './i18n'
 import icons from './icons'
+import antdv from './antdv'
 import components from './components'
 const app = createApp(App)
 app.config.productionTip = false
 app.use(i18n)
-app.use(Antd)
 icons(app)
+antdv(app)
+// eslint-disable-next-line
+import './style/common.less'
 app.use(components)
 app.use(router).mount('#app')

packages/ui/certd-ui/vue.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   pages: {
     index: {
+      entry: 'src/main.js',
       // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
       title: 'Cert-D'
     }
@@ -11,5 +12,12 @@ module.exports = {
         target: 'http://localhost:3000/'
       }
     }
+  },
+  css: {
+    loaderOptions: {
+      less: {
+        javascriptEnabled: true
+      }
+    }
   }
 }