最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

element-ui中按需引入

惠安網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)成立與2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。

為什么選擇 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的一些組件

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。