Vuetify

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

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

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

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

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

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

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

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

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

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

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

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

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

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

想要了解更多?继续阅读:

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!