vueプロジェクトでElementUIのオンデマンドロードを実装する方法

1.要素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パッケージ化されたアイテムコマンドにより、アイテムは、以下に示すように、オンデマンドロードの前後のボリュームのサイズを確認します。

• 以下に示すように、オンデマンドでロードされません。

• 以下に示すように、オンデマンドでロードします。