manbetxapp

通过Nuxt组件提高您的开发人员体验

2020年6月24日13分钟阅读
摄影者亚当·尼尔

介绍

Nuxt团队已经介绍了@ nuxt /组件模块的目的是使Nuxt开发更快,使您成为开发人员,更高效。此模块附带了惊人的功能和选项,可以提高您的发展体验。无论您刚刚开始或高级用户,@ nuxt /组件提供从最简单的设置到高级配置的一系列选项,这些选项肯定会使您的项目受益。

简而言之,此模块自动扫描、导入和注册在~ /组件目录,使我们在使用它们的页面,布局甚至在组件中时,我们不必编写导入语句。

这里是如何黛比·奥布莱恩解释了它是如何工作的,

此模块解析模板,并自动包含文件中的组件,您可以使用它,例如页面,布局甚至组件。由于Nuxt.js使用自动代码拆分默认情况下,此模块工作完美,因为它只能包含该页面上使用的组件。此外,如果您在超过2页中使用组件,尤其是由于网客的魔力,将自动为它们创建共享块。

目录

在本文中,我们将学习<代码>@ nuxt /组件通过例子。我已经用两组UI组件设置了一个演示,<代码>用户界面-1和<代码>用户界面-2

|组件--|用户界面-1/----|卡片/--|用户界面-2/----|BaseButton./----|卡片/----|列表/----|魔法丁/

我们将实现<代码>@ nuxt /组件在这些组件上,然后详细查看模块选项来定制默认行为。在本文的后面,我们还将查看一下懒惰装载auto-importing第三方库组件。

如果你设置这个是最好的示例项目在本地到可能感兴趣的选项。

模块设置

从next v2.13开始,这个模块是否默认可用创建新Nuxt项目时。但是,您仍然需要使用<代码>组件:真在<代码>nuxt.config.js.。

nuxt.config.js.
// for nuxt v2.13 +出口默认的{组件真正的}

如果您的项目使用的是以下v2.13**的next版本,我们建议您升级您的next版本,因为这些版本之间没有中断。

如果<代码>组件:真是集,<代码>~ /组件默认扫描目录。

上面的最小配置足以让您开始。但是,与其他任何Nuxt模块一样<代码>@ nuxt /组件在于模块选项。在我们详细查看之前,下面是该模块的一页摘要。

备忘单

@ nuext /components模块的一页摘要“src=

在这里下载可打印的PDF

使用模块选项,您可以选择具有特定文件扩展的特定目录<代码>~ /组件目录中。

要接受自定义目录选项,<代码>组件:接受一系列目录路径,而不仅仅是布尔值!这些目录路径可以是数组的字符串对象

让我们详细介绍两种格式。

作为字符串的目录路径

目录路径作为字符串是一个简化版本,用于指示要扫描、监视和注册的目录。

例如,在我们的示例项目中,我们可以使用下面这样的字符串表示法自动导入位于<代码>组件/ui-1/和<代码>组件/ ui-2 /

//numxt.config.js文件出口默认的{//作为字符串数组的模块选项组件['〜/ components / UI-1 /''〜/ components / UI-2 /']}

目录路径作为对象

目录路径作为一个对象变得更加有趣!当路径作为对象给定时,它将成为必需的。

nuxt.config.js.
出口默认的{//作为对象数组的模块选项组件[{小路'〜/ components / UI-1 /'}{小路'〜/ components / UI-2 /'}]}

除了<代码>小路,我们还可以根据组件的位置和扩展名定义其他配置,以包括、排除、监视甚至添加前缀。

例如,当使用此模块导入组件时,它们的名称基于它们的文件名。但是你可以<代码>前缀组件名可以保持它们的文件名,并且仍然能够自定义它们的组件标记。

nuxt.config.js.
出口默认的{//作为对象数组的模块选项组件[{小路'〜/ components / UI-2 /'前缀'aex'}]}

需要注意的是,这些选项的范围仅限于<代码>小路在这个目标中提供。在上面的例子中,只有位于<代码>〜/组件/ UI-2 /是用前缀注册的吗AEX.

<! - 前缀之前 - ><卡片>卡片><aex卡>aex卡>

自己试试-目录路径

在我们的示例项目中:

  1. /页码/manual-import-example.vue手动导入组件。在<代码>nuxt.config.js。,配置适当的目录路径,以便<代码>用户界面-1组件可以自动导入。
  2. /phe/auto-import-example.vue.已经实现了基本的自动导入。实现<代码>前缀选择<代码>卡片UI组件。

通过将目录路径定义为对象,我们可以更好地控制哪些组件将被自动导入,哪些组件将被忽略。

您的组件是否用<代码>。vue那<代码>。js或<代码>。ts码,有时,您可能不想自动导入指定的每个组件文件<代码>小路.有一些方案在自动导入可能需要调整的情况下。例如:

多文件组件

如果您的组件被分成两个单独的文件,<代码>。vue模板和<代码>。js对于脚本。您希望避免自动导入<代码>。js文件,因为它们已经包含在模板中。在这个场景中,您将需要一种机制来阻止全部或部分<代码>。js自动导入的文件。

动态组件

在撰写本文时,自动导入不适用于动态组件。

<!--write import statement for BaseButton in script section --><成分:是=BaseButton./>

这是您需要在脚本标记中导入组件的场景。

幸运的是,这个模块允许我们指定目录路径或文件扩展名或两者的组合,以便有选择地包含或排除自动导入的文件。继续读下去如何去做。

纳入路径

有些方法可以选择性地包括组件文件使用模块。

  1. 延期选项
  2. 图案选项

扩展选项

延期选项允许您指示从给定的<代码>小路-应该扫描和注册。<代码>延期的数组文件扩展名<代码>细绳格式。

{小路“〜/ components / UI-2 / MAGYBUTTON /”/ /前缀:‘aex的成分股,延期[“vue”]//数组,包含匹配扩展名的文件}

两者<代码>。vue和<代码>。js作为默认扩展包含。这一选择尤其重要有助于具有多个文件的组件

在我们的示例项目中,<代码>魔法丁组件分为两个单独的文件,<代码>。vue模板和<代码>。js对于脚本。

|魔法丁--|魔法丁js--|魔法丁vue

在这个场景中,我们只允许自动导入Vue模板。好,<代码>延期选择权帮助我们实现这一目标。

你自己试试-扩展

在我们的示例项目中,

  1. 检查源代码<代码>魔法丁在<代码>//用户界面-2/魔法丁/组件及其配置<代码>nuxt.config.js。

延期选项最适合包括给定的选定文件<代码>小路。然而,当我们需要更精细地控制选择组件时,总是有高级用例——甚至是从子目录中!

对于那些边缘情况,我们可以利用<代码>图案和<代码>忽略选项分别指示包含和排除的路径模式。

{小路'〜/ components / UI-2 /'前缀'aex'延期[]//数组,组件包含图案''//字符串,组件包含忽略[]//数组,组件排除}

继续阅读更多关于这两个选项的例子以及它们是如何工作的。万博体育app彩票平台票

模式选项

图案选项允许您定义哪种类型的组件-从给定的<代码>小路-应进行扫描和登记。不像<代码>延期那<代码>图案定义为细绳它必须遵循glob模式风格

我们可以使用模式选项作为默认的添加额外的的,甚至定制它完全。

默认的

如前所述,二者都<代码>。vue和<代码>。js作为默认扩展包含。

//默认模式图案`** / *。{Vue,JS}`

如果您使用的是TypeScript,那么<代码>ts&<代码>tsx默认情况下也支持扩展。

添加额外的扩展

如果需要其他扩展,则可以在构建配置下指定其他扩展<代码>nuxt.config.js。

nuxt.config.js.
出口默认的{/ * **构建配置* /构建{额外的延期['JSX']}}

上面的代码补充道<代码>。jsx对默认模式的扩展,使生成的模式看起来像:<代码>**/*.{vue,js,jsx}

根据您的要求定制

如果需要,可以手动指定扩展以完全自定义模式。

/ /多个扩展/ *仅在给定路径上扫描Vue和JSX文件* /图案'***/.{vue,jsx}'

或者对于单个文件,

/ /单扩展/ *仅在给定路径* /时扫描VUE文件图案'** / *。Vue'

排除路径

我们刚刚看到了包含模式是如何工作的。<代码>忽略另一方面,它帮助我们排除扫描组件。

忽略选项

忽略选项的作用正好相反<代码>图案它接受的不是一个字符串,而是一个字符串数组!这些字符串还必须遵循glob模式风格

忽略选项排除具有指定位置和扫描扩展的组件。

三个单独的例子万博体育app彩票平台票在下面的代码片段中,我们展示了如何使用<代码>。js扩展。这在您希望对位于给定位置的子目录应用ignore-rules<代码>小路

//忽略示例1{小路'〜/ components / UI-2 /'//要扫描和监视的目录路径//忽略在components/ui-2/和子文件夹中找到的js文件忽略[“** / *。js”]}//忽略示例2{//忽略components/ui-2/card/中的js文件忽略[“** /卡/ *。js”]}//忽略示例3{//忽略Components / UI-2 /列表中找到的JS文件/忽略[“** / list / *。js”]}

.nuxtignore, ignore属性& ignore选项:

重要的是,我们突出了ubxt的两个类似特征,它可以像我们一样忽略文件<代码>忽略选项。

  • .nuxtignore文件也忽略类似的文件<代码>忽略选择,但<代码>。努克斯忽略文件忽略文件<代码>/页那<代码>/布局那<代码>/中间件和<代码>/店铺.它是一个在项目根目录中定义的点文件。阅读更多关于忽略属性在Nuxt文档上。
  • 忽略此外,属性,我们让我们定义多个Glob-Taplo-To忽略匹配的文件,如下所示。
nuxt.config.js.
出口默认的{忽略['**/*。测试。*']}

两者的影响<代码>。努克斯忽略文件和<代码>忽略在构建过程中实现了财产,它们在项目范围内运行,而且<代码>忽略选项在本地操作并忽略来自的文件<代码>/组件目录中。

如果你用的是1。<代码>。努克斯忽略文件2。顶级<代码>忽略财产,和3。<代码>忽略选项,然后所有三个将合并。

最终忽略= .nuxtignore +顶级忽略+忽略选项(本地)

现在,让我们假设你的所有组件都自动导入到项目中,并且你保存了很多import语句,但是……您的项目并没有预先使用所有的组件。

这就引出了这个模块值得强调的下一个特性,延迟加载。

懒惰加载组件

在初始渲染时不需要立即所需的组件 - 例如在折叠,侧边栏,模块或条件下呈现的任何其他组件下方的组件<代码>v或<代码>v-else.。-符合懒惰加载(AKA动态导入)。

使用此模块,延迟加载组件非常简单。您只需添加<代码>懒惰的组件标记在模板区域中使用时的前缀。

页面/ lazy-loading-example.vue
<懒散列表v-else.><惰性列表项V-for.=(post, index)在帖子中:关键=`post  -  $ {index}`>{{职位。标题}}<lazy-list-item-icon图标=代码/>惰性列表项>懒散列表>

这就是它,你有你的组件动态导入,按需!

自己尝试一下——惰性加载

延迟装载已经实施<代码>/pages/lazy-loading-example.vue.。

在这里,您可以看到当数据变得可用时,惰性组件被加载,并且它们有自己的独立包。看到了吗<代码>list.js,listitem.js.和<代码>ListItemIcon.js文件文件在下面的屏幕截图中。

延迟加载Nuxt / Components“src=

第三方组件库

第三方组件图书馆也可以受益<代码>@ nuxt /组件

我已经为您创建了一个最小的外部组件库来修补这个特性。它叫kru组件!!

克鲁人的组件回购-https://github.com/Krutie/Kru-Components

Kru组件库公开了一个叫做,<代码>组件:dirs,它允许您(作为组件库作者)将组件目录扩展到next项目中。

// https://github.com/Krutie/Kru-Components/blob/master/src/nuxt.js努克斯'组件:DIRS'dirs=>{//添加./components到列表中dirs{小路加入__dirname.'组件'前缀'kru'}}

这样,外部库的组件就可以利用这种方法自动tree-shaking组件注册

然后作为外部库的用户可以使用<代码>kru-components像Nuxt模块一样简单。

nuxt.config.js.
建筑物[//使用Kru-components作为next模块“kru-components / src / nuxt”]

尝试自己 - 第三方图书馆

在我们的示例项目中,我实现了<代码>kru组件在<代码>第页/third-party-example.vue。确保本地设置Kru组件,然后<代码>npm链接它到我们的样品项目。

注意:如果您的组件库包含需要编译支持的组件,那么<代码>@ nuxt /组件提供<代码>转块选项,设置为<代码>汽车默认情况下。记住,<代码>转块如果组件已转换,则可以禁用选项。

对于更具体的例子,我建议您关注一下脉轮UI因为他们是Vue努力使图书馆兼容和<代码>@ nuxt /组件

结论

如果您已经完成了这一步,您可以看到这个模块提供了几个机会来微调我们自动导入组件的方式,并改善整个Nuxt开发人员的体验。下面是我们在这篇文章中所学内容的简要总结。

有三种方法可以开始使用这个模块。

  • 激活<代码>组件开始使用<代码>~ /组件目录,
  • 以字符串形式提供目录,并开始使用指定目录中的组件,
  • 将目录作为对象提供,以及可以从基本要前进的配置。这是我们涵盖的目录选项的回顾:
    1. 小路- (字符串) - 所有四个选项,路径是必需参数。它表示要扫描哪个目录。
    2. 前缀-(字符串)-指定组件名称的前缀。
    3. 延期(数组)-指定要扫描的组件的文件扩展名。
    4. 图案- (String) - 指定要扫描的组件的路径和扩展。
    5. 忽略- (Array) -指定要排除扫描的组件的路径和扩展名。

上面的目录选项与延迟加载相结合,这个模块可以用在许多可能的组合中。但是,您始终可以从裸最小值选项开始,例如<代码>组件:真并不断优化配置。

组件 auto-import 懒惰装载 动态导入 忽略规则 第三方 - 图书馆

努克斯JS通讯

把最新的Nuxt新闻放到你的收件箱里,由NuxtJS团队策划。