개요
컴포넌트 프레임웤인 Vuetify는 늘 수평적으로 확장됩니다. 프로젝트에 따라 작은 패키지 크기가 필요할 수도 있습니다. 아라카르트(A la crate) 시스템은 임포트(import) 할 컴포넌트들을 선택할 수 있게 하여 빌드 크기를 극적으로 줄여줍니다. 이미 a-la-carte 템플릿을 설치했다면 다음 가이드로 건너 뛰셔도 됩니다.
컴포넌트 임포팅(importing)
Tree shaking only works with webpack 4 in production mode
transform-imports 패키지가 a-la-carte 컴포넌트에 꼭 필요한 건 아니지만 패키지들을 임포팅하는 프로세스를 간단하게 만들기 때문에 "매우" 추천합니다. 이는 컴포넌트를 임포팅할때 더 간결한 문법을 사용하게 해 줍니다.
The options object that you pass as the second argument to Vue.use can also include both a directives and a transitions property.
transform-imports 패키지를 사용하지 않는다면 다음처럼 각 컴포넌트를 직접 임포트해야 합니다.
필요한 스타일 (Required styles)
필요한 모든 스타일을 적용하려면 스타일들을 stylus 내에 임포트해야 합니다. 웹팩이 이 것을 다루기 때문에, stylus 와 stylus-loader 를 npm 으로 설치해야 합니다.
이제 어플리케이션의 엔트리 포인트에서 stylus를 require 해야합니다. 이 엔트리 포인트는 Vue 와 Vuetify 를 임포팅한 것과 같은 파일입니다 (보통 main.js나 app.js). 메인 App.vue에서 stylus 를 require 하면 업데이트마다 다시 프로세싱되기 때문에 로딩 타임이 느려질 수 있습니다.
For a more detailed explanation on how to setup your application to handle stylus, please navigate to the theme page.
vuetify-loader
Keeping track of all the components you're using can be a real chore, so we wrote a webpack loader to help you. vuetify-loader will automatically import all the vuetify components you use, where you use them. This will also make code-splitting more effective, as webpack will only load the components required for that chunk to be displayed.
Now any Vuetify component used in a template will be automatically added to an in-component import like above.
Limitations
When using the vuetify-loader, there are a few scenarios which will require manual importing of components.
Dynamic components
v-data-iterator can use any component via the content-tag prop. This component must be registered globally:
Dynamic components used with <component :is=""> can be registered locally:
Functional components
Functional components are inlined at runtime by vue, and cannot have a components property in their options. Any vuetify components used in a custom functional component must either be registered globally (recommended), or locally wherever the custom component is used.