Cómo implementar la carga bajo demanda de Element UI en el proyecto vue

1. La interfaz de usuario de Element se carga a pedido

1. Por vue create element_testla creación de un comando vuede proyecto

2. Por npm i element-ui -Sla descarga de comando element uial vueproyecto

3. Por npm i babel-plugin-component -Dcomando para descargar, el complemento requerido se carga bajo demanda

4. En el babel.config.jsdocumento, el código es el siguiente:

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

5. En el main.jsdocumento, el código es el siguiente:

   	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. En App.vueel código de la siguiente manera:

   <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. Mediante npm run buildel comando de artículo empaquetado, el artículo mira el tamaño del volumen antes y después de la carga bajo demanda, como se muestra a continuación:

• No se carga a pedido, como se muestra a continuación:

• Cargue a pedido, como se muestra a continuación: