快捷導(dǎo)航

element-ui中按需引入的實現(xiàn)

更新時間：2019年12月25日 14:55:14 作者：hi修修

這篇文章主要介紹了element-ui中按需引入的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

element-ui中按需引入

為什么選擇 element-ui 而不是 iview

因為在多次使用兩個組件的過程中慢慢發(fā)現(xiàn)，iview 的一些組件還是需要再完善，而 element-ui 現(xiàn)在更加的成熟

所以，這里我們一起來學(xué)習(xí)一下在 vue 中按需引入 element-ui 一些組件中的坑(Dialog組件)

這里我們使用的版本是 element-ui : 2.4.7，vue: 2.2.2

1、按需引入

1. 借助 babel-plugin-component，我們可以只引入需要的組件，以達(dá)到減小項目體積的目的：

npm install babel-plugin-component -D

2. 更改.babelrc文件

	"plugins": [
  [
   "component",
   {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-chalk"
   }
  ]
 ]

當(dāng)然這里如果有其他的配置，只需要在 plugins 的數(shù)組中繼續(xù)添加我們需要的配置代碼就行了

2、我們將按需引入的代碼單獨分割一下

1. 在 src 文件夾中新建我們的 element 文件夾，并在里面新建一個 index.js 文件

目錄示例圖

2. 在index文件中去書寫我們需要引入的部分組件

// 導(dǎo)入自己需要的組件
import { Select, Option, OptionGroup, Input, Tree, Dialog, Row, Col } from 'element-ui'
const element = {
 install: function (Vue) {
  Vue.use(Select)
  Vue.use(Option)
  Vue.use(OptionGroup)
  Vue.use(Input)
  Vue.use(Tree)
  Vue.use(Dialog)
  Vue.use(Row)
  Vue.use(Col)
 }
}
export default element

這里要使用 Select 組件，必須同時使用 Option 和 OptionGroup
這里的 install 方法表示在 main.js 中，如果使用 Vue.use() 方法的話，則該方法默認(rèn)會調(diào)用 install 方法

3. 在 main.js 中使用該文件，就大功告成了

// css樣式還是需要全部引入
	import 'element-ui/lib/theme-chalk/index.css'
	import element from './element/index'
	Vue.use(element)

3、為什么要使用單獨分割的方式去按需加載

1. 我們使用常規(guī)的方式再來加載一次在 main.js 文件中直接使用

import 'element-ui/lib/theme-chalk/index.css'
import { Dialog, Select, Option, OptionGroup, Input, Tree, Row, Col } from 'element-ui'
Vue.use(Select)
Vue.use(Option)
Vue.use(OptionGroup)
Vue.use(Input)
Vue.use(Tree)
Vue.use(Dialog)
Vue.use(Row)
Vue.use(Col)

不好意思，現(xiàn)在就報錯了

錯誤顯示