element-ui 에서 필요 에 따라 도입 하 는 실현

element-ui 에서 필요 에 따라 도입
왜 iview 가 아 닌 element-ui 를 선 택 했 습 니까?
두 구성 요 소 를 여러 번 사용 하 는 과정 에서 iview 의 일부 구성 요 소 는 아직도 보완 되 어야 한 다 는 것 을 알 게 되 었 고 element-ui 는 현재 더욱 성숙 해 졌 다.
그래서 여기 서 vue 에서 필요 에 따라 element-ui 일부 구성 요소 의 구덩이(Dialog 구성 요소)를 도입 하 는 것 을 배 워 보 겠 습 니 다.
여기 서 우리 가 사용 하 는 버 전 은 element-ui:2.4.7,vue:2.2.2 입 니 다.
1.수요 에 따라 도입
1.babel-plugin-component 를 통 해 우 리 는 필요 한 구성 요소 만 도입 하여 프로젝트 의 부 피 를 줄 이 는 목적 을 달성 할 수 있 습 니 다.

npm install babel-plugin-component -D

2..babelrc 파일 변경

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

물론 여기에 다른 설정 이 있다 면 plugins 의 배열 에 우리 가 필요 로 하 는 설정 코드 를 계속 추가 하면 됩 니 다.
2.우 리 는 필요 한 코드 에 따라 단독으로 분할 할 것 이다.
1.src 폴 더 에 element 폴 더 를 새로 만 들 고 index.js 파일 을 새로 만 듭 니 다.

2.index 파일 에서 우리 가 도입 해 야 할 부분 구성 요 소 를 작성 합 니 다.

//          
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 을 동시에 사용 해 야 합 니 다.
여기 인 스타 그램 방법 은 main.js 에서 Vue.use()방법 을 사용 하면 기본적으로 인 스타 그램 방법 을 사용 합 니 다.
3.main.js 에서 이 파일 을 사용 하면 큰 성 과 를 거 둘 수 있 습 니 다.

// css          
	import 'element-ui/lib/theme-chalk/index.css'
	import element from './element/index'
	Vue.use(element)

3.왜 단독 분할 방식 으로 필요 에 따라 불 러 옵 니까?
1.우 리 는 일반적인 방식 으로 다시 한 번 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)

죄송합니다.지금 잘못 보 고 했 습 니 다.

우 리 는 element-ui 의 소스 코드 에서 볼 수 있 습 니 다.확실히 Dialog 를 사 용 했 습 니 다.그러나 우 리 는 실행 할 때 잘못 보 고 했 습 니 다.

2.우리 가 도입 한 Dialog 를 수정 할 것 입 니 다.다음 그림 과 같 습 니 다.

보 실 수 있 습 니 다.우 리 는 지금 소문 자로 바 뀌 었 습 니 다.프로젝트 는 정상적으로 실 행 될 수 있 습 니 다.element-ui 의 작은 실수 가 아 닐 까요?이러한 작성 법 은 우리 의 main.js 파일 을 매우 복잡 하 게 만 들 수 있 습 니 다.그래서 우 리 는 첫 번 째 방법 으로 element-ui 의 일부 구성 요 소 를 불 러 오 는 것 을 권장 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.