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

悠悠 2023-03-04 09:05 13阅读 0赞

#### 一、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` 命令进行项目的打包，看一下按需加载前后的项目体积大小，如下所示：

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center]

*  按需加载，如下所示：

![在这里插入图片描述][20200802224535869.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20230208/b61aefbc09664470a09726905566dea4.png
[20200802224535869.png_pic_center]: /images/20230208/e6be7c3d252c4f08926ff881a2d1e8f6.png