vue 项目中 Element UI 如何实现按需加载

一、Element UI 按需加载

1. 通过 vue create element_test 命令创建一个 vue 的项目

2. 通过 npm i element-ui -S 命令下载 element ui 到这个 vue 的项目中

3. 通过 npm i babel-plugin-component -D 命令下载按需加载所需要的插件

4. 在 babel.config.js 文件中，代码如下所示：

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

5. 在 main.js 文件中，代码如下所示：

   	import Vue from 'vue'
   	import App from './App.vue'
   	// import ElementUI from 'element-ui'
   	import 'element-ui/lib/theme-chalk/index.css'
   	import {
         
          Button, Message} from 'element-ui'
   	
   	// Vue.use(ElementUI)
   	Vue.component(Button.name, Button)
   	Vue.prototype.$message = Message
   	
   	Vue.config.productionTip = false
   	
   	
   	new Vue({
         
         
   	  render: h => h(App),
   	}).$mount('#app')
   

6. 在 App.vue 中，代码如下所示：

   <template>
     <div id="app">
         <el-button @click="show">按钮</el-button>
     </div>
   </template>
   
   <script>
   
   export default {
          
          
     name: 'app',
     methods: {
          
          
       show () {
          
          
         this.$messag('element-ui 提示')
       }
     }
   }
   </script>
   
   <style>
   </style>
   

7. 通过 npm run build 命令进行项目的打包，看一下按需加载前后的项目体积大小，如下所示：

• 未按需加载，如下所示：

• 按需加载，如下所示：