element-ui中按需引入

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

因?yàn)樵诙啻问褂脙蓚€(gè)組件的過程中慢慢發(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á)到減小項(xiàng)目體積的目的：

npm install babel-plugin-component -D

2. 更改.babelrc文件

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

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

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

1. 在 src 文件夾中新建我們的 element 文件夾，并在里面新建一個(gè) 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 組件，必須同時(shí)使用 Option 和 OptionGroup
這里的 install 方法表示在 main.js 中，如果使用 Vue.use() 方法的話，則該方法默認(rèn)會(huì)調(diào)用 install 方法

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

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

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

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)在就報(bào)錯(cuò)了

我們?cè)?element-ui 的源碼中可以看到，的確使用的是 Dialog，但是我們?cè)谶\(yùn)行的時(shí)候還是報(bào)錯(cuò)了

2. 我們將引入的 Dialog 做一些修改，如下圖

可以看到，我們現(xiàn)在改成小寫，項(xiàng)目是可以正常運(yùn)行的，應(yīng)該是不是 element-ui 的一些小失誤吧，這樣的寫法會(huì)將我們的 main.js 文件變得很大很復(fù)雜，所以我們建議是 使用第一中方式來按需加載 element-ui 的一些組件

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。