feat: 优化example打包体积

Author: ddchef

example/babel.config.js

@@ -9,6 +9,13 @@ module.exports = {
       '@babel/plugin-transform-runtime',{
         corejs: 3,
       }
+    ],
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
     ]
   ]
 }

example/package.json

@@ -32,6 +32,7 @@
     "@vue/composition-api": "^1.0.0-rc.5",
     "autoprefixer": "^10.2.5",
     "babel-loader": "^8.2.2",
+    "babel-plugin-component": "^1.1.1",
     "babel-plugin-import": "^1.13.3",
     "babel-plugin-syntax-async-functions": "^6.13.0",
     "chalk": "^4.1.0",

example/pnpm-lock.yaml

@@ -0,0 +1,11 @@
+$--font-path: "element-ui/lib/theme-chalk/fonts";
+
+@import "~element-ui/packages/theme-chalk/src/base.scss";
+@import "~element-ui/packages/theme-chalk/src/form.scss";
+@import "~element-ui/packages/theme-chalk/src/form-item.scss";
+@import "~element-ui/packages/theme-chalk/src/button.scss";
+@import "~element-ui/packages/theme-chalk/src/row.scss";
+@import "~element-ui/packages/theme-chalk/src/col.scss";
+@import "~element-ui/packages/theme-chalk/src/input.scss";
+@import "~element-ui/packages/theme-chalk/src/input-number.scss";
+@import "~element-ui/packages/theme-chalk/src/switch.scss";

example/src/element-variables.scss

@@ -2,11 +2,11 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
+import plugins from './plugins'
+import './element-variables.scss'
 
 Vue.config.productionTip = false
-Vue.use(ElementUI)
+Vue.use(plugins)
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

example/src/main.js

@@ -0,0 +1,25 @@
+import {
+  Form,
+  Row,
+  Col,
+  FormItem,
+  Input,
+  Switch,
+  InputNumber,
+  Button,
+  Checkbox
+} from 'element-ui'
+
+export default {
+  install (Vue) {
+    Vue.use(Form)
+    Vue.use(Row)
+    Vue.use(Col)
+    Vue.use(FormItem)
+    Vue.use(Input)
+    Vue.use(Switch)
+    Vue.use(InputNumber)
+    Vue.use(Button)
+    Vue.use(Checkbox)
+  }
+}