vue cli plugin import components

VUE-CLI-PLUGIN-IMPORT-COMPONENT

自动在Vue Cli应用程序中自动导入树木摇动的组件，并支持VUE 2和3。

为什么以及如何？

查看我有关此功能为什么存在，工作方式和问题的文章。

需要更强大的东西吗？考虑使用Unplugin-Vue组件

特征

• ？ vue 2和3支撑，全树摇动
• ⚡懒惰加载组件
• 热模块重新加载准备就绪
• ？用打字稿编写

设置

使用VUE CLI安装。 （建议使用CLI 4+）

vue add import-components

---

用法

将组件添加到您的components/文件夹中。

 | components/
--- | ComponentFoo.vue
--- | ComponentBar.vue

按照.vue来使用它们。使用pascalcase或kebab-case访问组件。

 < template >
< div >
  < ComponentFoo />
  < component-bar />
</ div >
</ template >

从script部分中删除imports和components 。

异步组件加载

您可以根据您的语法将组件名称以Lazy或lazy-方式加载组件异步。

 < template >
< div >
  <!-- ComponentFoo will be loaded in async -->
  < LazyComponentFoo />
  <!-- ComponentBar will be loaded sync -->
  < ComponentBar />
</ div >
</ template > 

配置

您可以通过修改./vue.config.js中的选项来更改插件的行为。

 // vue.config.js
module . exports = {
  pluginOptions : {
    components : {
      ...
    }
  }
}

选项

所有选项都是可选的。

路径 - 字符串

用于查找组件的路径。注意：它应该相对于您的项目根。

默认值： ./src/components components

模式 - 字符串

正则是在path中查找文件。注意：如果省略模式，它将使用配置的extensions

默认值： **/*.{${extensions.join(',')},}

忽略 - 字符串[]

正则忽略path中的文件。

默认值： [ '**/*.stories.js' ],

MapComponent-（组件：组件）=>组件|错误的

您可以用来滤除不想扫描的路径的功能。

例如，如果我们只想在使用auto的前缀之前自动访问您的组件，则可以使用以下代码。

 // vue.config.js
module . exports = {
  pluginOptions : {
    components : {
      // prefix all automatically imported components with an auto prefix
      mapComponent ( component ) {
        component . pascalCase = 'Auto' + upperFirst ( component . pascalCase )
        component . kebabName = 'auto-' + component . pascalCase
        return component
      }
    }
  }
} 

扩展名 - 字符串[]

当扫描组件的路径时，应将文件视为组件。

默认值： ['.js', '.vue', '.ts']

限制

仅静态导入

仅在模板中静态定义的组件才能起作用。

< template >
  < component :is = " dynamicComponent " />
</ template >

将文件夹用作名称空间

假设您正在使用VUE约定来命名组件。如果不手动映射组件，以下是不起作用的。

 | components/
--- | Foo.vue
------ | Namespace/Foo.vue

它将与称为Foo.vue的两个组件造成冲突。您应该使用名称空间命名组件文件。即NamespaceFoo.vue 。

JavaScript组件

更新浏览器时可能需要刷新浏览器。有时候，热模块重新加载似乎有点越野车。

建议您坚持使用.vue SFC组件。

执照

麻省理工学院