按需加载

src/App.vue

@@ -1,9 +1,28 @@
 <template>
-  <router-view v-slot="{ Component }">
-        <component :is="Component"/>
-  </router-view>
-</template>
+  <el-config-provider :locale="locale">
+    <router-view v-slot="{ Component }">
+      <component :is="Component"/>
+    </router-view>
+  </el-config-provider>
 
+</template>
+<script>
+import { defineComponent } from 'vue'
+import { ElConfigProvider } from 'element-plus'
+
+import zhCn from 'element-plus/lib/locale/lang/zh-cn'
+
+export default defineComponent({
+  components: {
+    ElConfigProvider,
+  },
+  setup() {
+    return {
+      locale: zhCn,
+    }
+  },
+})
+</script>
 <style lang="scss">
 #app {
   position: relative;

src/main.ts

@@ -5,9 +5,9 @@ import store from './store'
 
 import './permission'
 import SvgIcon from './icons/index'
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
+// import ElementPlus from 'element-plus'
+// import 'element-plus/dist/index.css'
+// import zhCn from 'element-plus/es/locale/lang/zh-cn'
 const app = createApp(App)
 app.component('svg-icon',SvgIcon)
 import * as ElIconsModules from '@element-plus/icons-vue'
@@ -21,6 +21,8 @@ Object.keys(ElIconsModules).forEach((key) => {//循环遍历组件名称
 });
 
 import '@/styles/index.scss' // global css
-app.use(store).use(router).use(ElementPlus,{
-    locale: zhCn,
-}).mount('#app')
+// app.use(store).use(router).use(ElementPlus,{
+//     locale: zhCn,
+// }).mount('#app')
+
+app.use(store).use(router).mount('#app')

vue.config.js

@@ -1,4 +1,7 @@
 const path = require('path')
+const AutoImport = require('unplugin-auto-import/webpack')
+const Components = require('unplugin-vue-components/webpack')
+const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
 
 function resolve(dir) {
     return path.join(__dirname, '.', dir)
@@ -21,5 +24,15 @@ module.exports = {
                 symbolId: 'icon-[name]'
             })
     },
+    configureWebpack:{
+        plugins: [
+            AutoImport({
+                resolvers: [ElementPlusResolver()]
+            }),
+            Components({
+                resolvers: [ElementPlusResolver()]
+            })
+        ]
+    }
 
 };