// 引入 path 模块
const path = require('path') // path 是 Node.js 内置的模块,用于处理和转换文件路径。
const files = require.context('./', false, /\.vue$/)
const modules = {}
files.keys().forEach((key) => {
const name = path.basename(key, '.vue')
modules[name] = files(key).default || files(key)
})
export default modules
一、注册一个目录下的所有 Vue 组件。这种方法通常用于按需加载组件或在需要动态注册组件时使用。在这段代码中,使用了 `require.context` 方法,这是 Webpack 提供的一个工具,用于创建上下文模块,允许你动态加载模块。
让我们逐行解析这段代码:
1. **引入 `path` 模块**:
const path = require('path');
`path` 是 Node.js 内置的模块,用于处理和转换文件路径。
2. **创建一个 `require.context` 实例**:
const files = require.context('./', false, /\.vue$/);
`require.context` 是 Webpack 的 API,创建一个上下文,允许你批量导入模块。
- 第一个参数 `'./'` 指定搜索的目录,这里是当前目录。
- 第二个参数 `false` 表示不递归搜索子目录。
- 第三个参数 `/\.vue$/` 是一个正则表达式,用于匹配 `.vue` 文件。
3. **初始化一个空对象 `modules`**:
const modules = {};
4. **遍历上下文中的文件,并动态导入它们**:
files.keys().forEach((key) => {
const name = path.basename(key, '.vue');
modules[name] = files(key).default || files(key);
});
- `files.keys()` 返回一个数组,包含上下文中所有匹配的文件路径。
- `forEach` 方法遍历这个数组。
- `path.basename(key, '.vue')` 去掉文件的扩展名 `.vue`,获取文件名,作为模块的名称。
- `files(key).default || files(key)` 动态导入文件,`files(key)` 返回文件模块,通常 Vue 组件会在 `default` 属性下,如果没有,则直接使用 `files(key)`。
5. **导出 `modules` 对象**:
export default modules;
这个 `modules` 对象包含了所有自动导入的 Vue 组件。
### 示例
假设当前目录下有三个 Vue 组件文件:
- `Header.vue`
- `Footer.vue`
- `Sidebar.vue`
那么生成的 `modules` 对象将如下:
{
Header: /* Header.vue 模块 */,
Footer: /* Footer.vue 模块 */,
Sidebar: /* Sidebar.vue 模块 */
}
二、页面运用
<template>
<div>
<div style="margin-bottom: 30px;"
v-for="(list,index) in lists"
:key="index">
<div class="name">{{ index + 1 }}、{{ list.name }}</div>
<div class="pre-box"
:class="{'bg': !list.url}">
<div v-if="!!lists.length"
class="ifnormal">
<component :is="list.componentName"
:list="list">
</component>
</div>
<div v-else
class="ifnull">暂无模板</div>
</div>
</div>
</div>
</template>
<script>
import LargeScreen from '../thumbnailComponents/LargeScreen'
import modules from '../thumbnailComponents/exportModel.js';
export default {
components: {
LargeScreen,
...modules
},
props: {
lists: {
type: Array,
default: () => []
}
},
watch: {
lists: {
handler: function (n, o) {
// console.log(n, 'nnnnn')
},
immediate: true,
deep: true
}
},
}
</script>
componentName 为对应组件名称组件名称,如果
<component :is="list.componentName"
:list="list">
</component> 不理解可自行查看 vue component 用法
或者下一章节解释 component用法
这段代码有助于简化组件的导入过程,特别是当你有大量组件时,不需要手动一个个地导入它们。谢谢希望对您有所帮助!