A-la-carte (treeshaking)

作为一个组件框架，Vuetify 总是会横向增长。根据你的项目，可能需要一个小的 包大小。A la carte 系统让你可以挑选和选择要导入的组件，大大 降低 了你的构建规模。使用 Vue CLI插件 创建的新项目默认情况下会启用这个功能。

只有在 生产模式 下，Treeshaking 才会在 Webpack 4 中工作。如果你使用的是 Vue CLI，那么这个功能将会自动启动。

vuetify-loader

跟踪正在使用的所有组件可能是一件很麻烦的事。vuetify-loader 通过自动导入你使用的所有 Vuetify 组件来减轻这种痛苦。这也将使代码的分割更加有效，因为 webpack 只加载显示该块所需的组件。

Importing

为了利用 a la-carte 组件，你必须从 vuetify/lib 中导入 Vuetify。

  1. // You still need to register Vuetify itself
  2. // src/plugins/vuetify.js
  4. import Vue from 'vue'
  5. import Vuetify from 'vuetify/lib'
  7. Vue.use(Vuetify)
  9. const opts = {}
  11. export default new Vuetify(opts)

作为第二个参数对象传递给 Vue.use 的选项也可以包含组件,指令和过渡属性。

vue.config.js 安装

虽然不建议你手动关闭 Vue CLI 插件，但是如果你关闭了它，你也可以通过 Vue CLI 中的 configure webpack 选项手动配置加载器。

  1. // vue.config.js
  3. const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
  5. module.exports = {
  6.   configureWebpack: {
  7.     plugins: [
  8.       new VuetifyLoaderPlugin()
  9.     ],
  10.   },
  11. }

Webpack 安装

你还可以显式地安装基于 webpack 的项目的加载程序。与 vue.config.js 设置类似，只需将加载程序添加到项目的 webpack 插件中即可。

  1. // webpack.config.js
  3. const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
  5. module.exports = {
  6.   plugins: [
  7.     new VuetifyLoaderPlugin()
  8.   ],
  9. }

所需样式

当你从 vuetify/lib 导入时，框架的基础样式也会被导入。每个组件都是单独负责它们的样式，并且将以相同的方式编译。如果你使用的是 Vue CLI 和 vue-cli-plugin-vuetify 插件，那么这些工作都会由程序自动完成，你可以 跳过 这部分。如果你在一个无法访问 cli 的环境中开发，那么你可以手动导入这个包。

  1. $ yarn add sass sass-loader fibers deepmerge -D
  2. // OR
  3. $ npm install sass sass-loader fibers deepmerge -D

欲了解如何设置你的应用程序来处理 SASS，请浏览 theme page。

安装后，你仍然需要配置你的 webpack.config.js 来解析 .sass 文件。 关于如何使用 fibers 做这件事，请浏览 official documentation。

自定义动态导入

Vuetify-loader 还允许你编写自己的自定义匹配函数来导入自己项目的组件。这可以在 Vue CLI 和 webpack 项目中完成。

  1. // vue.config.js
  3. const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
  5. module.exports = {
  6.   configureWebpack: {
  7.     plugins: [
  8.       new VuetifyLoaderPlugin({
  9.         /**
  10.          * This function will be called for every tag used in each vue component
  11.          * It should return an array, the first element will be inserted into the
  12.          * components array, the second should be a corresponding import
  13.          *
  14.          * originalTag - the tag as it was originally used in the template
  15.          * kebabTag    - the tag normalised to kebab-case
  16.          * camelTag    - the tag normalised to PascalCase
  17.          * path        - a relative path to the current .vue file
  18.          * component   - a parsed representation of the current component
  19.          */
  20.         match (originalTag, { kebabTag, camelTag, path, component }) {
  21.           if (kebabTag.startsWith('core-')) {
  22.             return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`]
  23.           }
  24.         }
  25.       })
  26.     ],
  27.   },
  28. }
  1. // webpack.config.js
  3. const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
  5. exports.plugins.push(
  6.   new VuetifyLoaderPlugin({
  7.     match (originalTag, { kebabTag, camelTag, path, component }) {
  8.       if (kebabTag.startsWith('core-')) {
  9.         return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`]
  10.       }
  11.     }
  12.   })
  13. )

局限性

当使用 vuetify-loader 时，有几种情况需要手动导入组件。

动态组件

v-data-iterator 可以通过内容标签属性使用任何组件。此组件必须注册为 globally：

  1. <!-- Vue Component -->
  3. <template>
  4.   <v-data-iterator content-tag="v-layout">
  5.     ...
  6.   </v-data-iterator>
  7. </template>
  1. // src/plugins/vuetify.js
  3. import Vue from 'vue'
  4. import Vuetify, { VLayout } from 'vuetify/lib'
  6. Vue.use(Vuetify, {
  7.   components: { VLayout },
  8. })
  10. const opts = {}
  12. export default new Vuetify(opts)

使用 <component :is="my-component"> 的动态组件可以注册为 locally：

  1. <!-- Vue Component -->
  3. <template>
  4.   <component :is="button ? 'v-btn' : 'v-chip'" />
  5. </template>
  7. <script>
  8.   import { VBtn, VChip } from 'vuetify/lib'
  10.   export default {
  11.     components: { VBtn, VChip },
  12.     data: () => ({ button: false }),
  13.   }
  14. </script>

函数组件

函数组件是在运行时使用 vue 嵌入的，在他们的选项中不能有 components 属性。 无论在哪里使用自定义组件，在自定义功能组件中使用的任何 Vuetify 组件都必须在全球注册（推荐），或者在本地注册。

手动导入

当不使用 Vuetify 加载器时，组件可以手动导入。 当你使用动态组件和 vuetify-loader 时，您还需要这样做，因为它只能解析显式用法。 这通常发生在内建 Vue <component is="my-component" /> 时。关于动态组件的更多信息在官方的 Vue documentation。

  1. // src/plugins/vuetify.js
  3. import Vue from 'vue'
  4. import Vuetify, {
  5.   VCard,
  6.   VRating,
  7.   VToolbar,
  8. } from 'vuetify/lib'
  9. import { Ripple } from 'vuetify/lib/directives'
  11. Vue.use(Vuetify, {
  12.   components: {
  13.     VCard,
  14.     VRating,
  15.     VToolbar,
  16.   },
  17.   directives: {
  18.     Ripple,
  19.   },
  20. })
  22. const opts = {}
  24. export default new Vuetify(opts)

您也可以从 .vue 文件中导入组件。

  1. <!-- Vue Component -->
  3. <template>
  4.   <v-card>
  5.     <v-card-title>...</v-card-title>
  6.     <v-card-text>...</v-card-text>
  7.   </v-card>
  8. </template>
  10. <script>
  11.   import { VCard, VCardText, VCardTitle } from 'vuetify/lib'
  13.   export default {
  14.     components: {
  15.       VCard,
  16.       VCardText,
  17.       VCardTitle,
  18.     }
  19.   }
  20. </script>