作为一个组件框架,Vuetify 总是会横向增长。根据你的项目,可能需要一个小的 包大小。A la carte 系统让你可以挑选和选择要导入的组件,大大 降低 了你的构建规模。使用 Vue CLI插件 创建的新项目默认情况下会启用这个功能。
只有在 生产模式 下,Treeshaking 才会在 Webpack 4 中工作。如果你使用的是 Vue CLI,那么这个功能将会自动启动。
跟踪正在使用的所有组件可能是一件很麻烦的事。vuetify-loader 通过自动导入你使用的所有 Vuetify 组件来减轻这种痛苦。这也将使代码的分割更加有效,因为 webpack 只加载显示该块所需的组件。
为了利用 a la-carte 组件,你必须从 vuetify/lib 中导入 Vuetify。
作为第二个参数对象传递给 Vue.use 的选项也可以包含组件,指令和过渡属性。
虽然不建议你手动关闭 Vue CLI 插件,但是如果你关闭了它,你也可以通过 Vue CLI 中的 configure webpack 选项手动配置加载器。
你还可以显式地安装基于 webpack 的项目的加载程序。与 vue.config.js 设置类似,只需将加载程序添加到项目的 webpack 插件中即可。
当你从 vuetify/lib
导入时,框架的基础样式也会被导入。每个组件都是单独负责它们的样式,并且将以相同的方式编译。如果你使用的是 Vue CLI 和 vue-cli-plugin-vuetify
插件,那么这些工作都会由程序自动完成,你可以 跳过 这部分。如果你在一个无法访问 cli 的环境中开发,那么你可以手动导入这个包。
欲了解如何设置你的应用程序来处理 SASS,请浏览 theme page。
安装后,你仍然需要配置你的 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 文件中导入组件。