a-la-carte 컴포넌트란?쓸까요?

a-la-carte 컴포넌트란?쓸까요?

vue-cli를 사용하여 새 프로젝트를 시작할 때 설정을 사용자 지정하기 위한 몇 가지 질문이 표시됩니다.일반적으로 프로젝트명, 설명, 보풀에 eslint를 사용할지 여부, 테스트에 카르마와 모카를 사용할지 여부 등입니다.이번에는 나에게 물었다.

? Use a-la-carte components?

vue-cli documents에서 검색했지만 아무것도 찾지 못했습니다.그럼 'a-la-carte 컴포넌트'가 무엇인지, 그리고 그것을 사용해야 하는지 알려 주실 수 있나요?

cart la carte는 "메뉴에 따라"라는 뜻의 영어 차용어이다.'정식이 아닌 별도 메뉴로 주문할 수 있는 음식'을 말합니다.

따라서 a-la-carte 컴포넌트를 사용하는 경우 모든 컴포넌트를 입수하는 것이 아니라 필요한 컴포넌트(원하는 컴포넌트)만 포함하는 것을 의미합니다.

Vuetify 예:

Vuetify를 사용하면 필요한 것만 쉽게 Import할 수 있어 설치 공간을 대폭 줄일 수 있습니다.

import {
 Vuetify,
 VApp,
 VNavigationDrawer,
 VFooter,
 VList,
 VBtn
} from 'vuetify'

Vue.use(Vuetify, {
 components: {
   VApp,
   VNavigationDrawer,
   VFooter,
   VList,
   VBtn
 }
})

---

2018/11/14 편집:

vuetify 1.3.0 이후
vuetify-loader (vuetify cli 설치로 확인)
는 어플리케이션의 a-la-carte 요구를 자동으로 처리합니다.즉, 사용 시 모든 Vuetify 컴포넌트를 자동으로 Import합니다.

우선 이 옵션은 실제로는 vuetify 플러그인 옵션이기 때문에 문서에서 찾을 수 없습니다."a-la-carte" 컴포넌트를 활성화하면 파일은/plugins/vuetify.js하다

import Vue from 'vue'
import {
 Vuetify,
 VApp,
 //other vuetify components
} from 'vuetify'

Vue.use(Vuetify, {
 components: {
   VApp,
   //other vuetify components
 }
})

또한 babel.config.config.config 파일을 변경하여 "vuetify" 플러그인을 사용한 완전한 Import를 방지해야 합니다.

둘째, vuetify v1.3.0-alpha.0까지는 웹팩 벤더 번들을 최소화하고 싶을 때 "a la carte"가 유용했지만, 특히 개발 중에 vuetify 컴포넌트를 선택적으로 Import해야 하는 것은 매우 번거로운 일입니다.게다가 Web pack은, 「일률적인 컴포넌트」의 도입 이래, 크게 진화해 왔습니다.

이러한 이유로 vuetify 1.3.0-alpha.0에서 개발팀은 vuetify 로더를 통한 Webpack 4 트리 흔들기 기능(AKA 데드 코드 제거)을 사용하여 라카르트의 컴포넌트를 완전히 제거하는 방법을 모색하고 있습니다.이러한 기능들은 자동 "일률적인 구성 요소"를 얻기 위해 vuetify 공식 플러그인에 추가될 것으로 예상됩니다.

따라서 두 번째 질문(a-la-carte를 사용해야 하는지 여부)에 대한 답변은 "아니오"입니다.이 기능을 사용하도록 vue-cli 3 프로젝트를 직접 설정하는 방법은 다음과 같습니다.

• vuetify-loader를 개발 종속성으로 설치합니다.npm install -D vuetify-loader
• Import vuetify 로부터'vuetify/lib'대신'vuetify'당신의 vuetify.filename 파일에 있습니다.

코드:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

• vuetify-loader를 웹 팩 플러그인으로 등록합니다.vue.config.js파일(존재하지 않는 경우 프로젝트 루트에 파일을 만듭니다).

코드:

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
   configureWebpack: {
     plugins: [
        new VuetifyLoaderPlugin(),
    ]
   }
 // ...other vue-cli plugin options...
} 

• 이미 a-la-carte를 사용하고 있는 경우, 반드시 babel 플러그인 목록에서 "transform-imports"를 삭제하십시오(일반적으로 babel.config.js에 있습니다).

• 트리의 흔들림은 프로덕션 모드에서만 작동하도록 설정되어 있으므로 플래그를 사용하는 경우--watch또는--mode development당신의 것과 함께npm run build명령어, 번들사이즈가 줄어들 것으로는 예상할 수 없습니다.

도움이 되었으면 좋겠다

언급URL : https://stackoverflow.com/questions/46680467/what-is-a-la-carte-components-should-i-use-it