清理多余包 element按需加载

web/babel.config.js

 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
+  ],
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
   ]
 }

web/package.json

@@ -15,16 +15,12 @@
     "@antv/util": "~2.0.9",
     "@moefe/vue-aplayer": "^2.0.0-beta.5",
     "axios": "^0.19.2",
-    "core-js": "^3.6.5",
-    "echarts": "^4.7.0",
     "element-ui": "^2.12.0",
     "highlight.js": "^10.6.0",
     "marked": "^2.0.0",
-    "node-sass": "^4.14.1",
     "path": "^0.12.7",
     "qs": "^6.8.0",
     "quill": "^1.3.7",
-    "sass-loader": "^8.0.0",
     "screenfull": "^5.0.2",
     "script-ext-html-webpack-plugin": "^2.1.4",
     "spark-md5": "^3.0.1",
@@ -42,14 +38,15 @@
     "@vue/cli-plugin-eslint": "^4.5.6",
     "@vue/cli-service": "^4.5.6",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
+    "core-js": "^3.3.2",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.10",
-    "core-js": "^3.3.2",
     "node-sass": "^4.12.0",
     "numericjs": "^1.2.6",
     "raw-loader": "^3.1.0",
-    "sass-loader": "^8.0.0"
+    "sass-loader": "^8.0.0",
+    "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {
     "root": true,
@@ -74,4 +71,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
\ No newline at end of file
+}

web/src/main.js

 import Vue from 'vue'
 import App from './App.vue'
-// 引入element
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
-// 全局配置elementui的dialog不能通过点击遮罩层关闭
-ElementUI.Dialog.props.closeOnClickModal.default = false
-Vue.use(ElementUI);
+
+//  按需引入element
+import {
+    Button, 
+    Select, 
+    Dialog, 
+    Form, 
+    Input,
+    FormItem, 
+    Option, 
+    Loading, 
+    Message, 
+    Container, 
+    Card,
+    Dropdown,
+    DropdownMenu,
+    DropdownItem,
+    Row,
+    Col,
+    Menu,
+    Submenu,
+    MenuItem,
+    Aside,
+    Main,
+    Badge,
+    Header,
+    Tabs,
+    Breadcrumb,
+    BreadcrumbItem,
+    Scrollbar,
+    Avatar,
+    TabPane,
+    Divider,
+    Table,
+    TableColumn,
+    Cascader,
+    Checkbox,
+    CheckboxGroup,
+    Pagination,
+    Tag,
+    Drawer,
+    Tree,
+    Popover,
+    Switch,
+    Collapse,
+    CollapseItem,
+    Tooltip,
+    DatePicker,
+    InputNumber,
+    Steps,
+    Upload,
+    Progress
+} from 'element-ui';
+
+Vue.use(Button);
+Vue.use(Select);
+Vue.use(Dialog);
+Vue.use(Form);
+Vue.use(FormItem);
+Vue.use(Input);
+Vue.use(Option);
+Vue.use(Container);
+Vue.use(Card);
+Vue.use(Dropdown);
+Vue.use(DropdownMenu);
+Vue.use(DropdownItem);
+Vue.use(Row);
+Vue.use(Col);
+Vue.use(Menu);
+Vue.use(Submenu);
+Vue.use(MenuItem);
+Vue.use(Aside);
+Vue.use(Main);
+Vue.use(Badge);
+Vue.use(Header);
+Vue.use(Tabs);
+Vue.use(Breadcrumb);
+Vue.use(BreadcrumbItem);
+Vue.use(Avatar);
+Vue.use(TabPane);
+Vue.use(Divider);
+Vue.use(Table);
+Vue.use(TableColumn);
+Vue.use(Checkbox);
+Vue.use(Cascader);
+Vue.use(Tag);
+Vue.use(Pagination);
+Vue.use(Drawer);
+Vue.use(Tree);
+Vue.use(CheckboxGroup);
+Vue.use(Popover);
+Vue.use(InputNumber);
+Vue.use(Switch);
+Vue.use(Collapse);
+Vue.use(CollapseItem);
+Vue.use(Tooltip);
+Vue.use(DatePicker);
+Vue.use(Steps);
+Vue.use(Upload);
+Vue.use(Progress);
+Vue.use(Scrollbar);
+Vue.use(Loading.directive);
+
+Vue.prototype.$loading = Loading.service;
+Vue.prototype.$message = Message;
+Dialog.props.closeOnClickModal.default = false
+
 // 引入封装的router
 import router from '@/router/index'
 
@@ -41,9 +142,6 @@ export default new Vue({
     store
 }).$mount('#app')
 
-//引入echarts
-import echarts from 'echarts'
-Vue.prototype.$echarts = echarts;
 
 console.log(`
        欢迎使用 Gin-Vue-Admin