# Vue.js 组件引入的几种方式 ## 默认方式 优点: > 清晰的知道在页面中使用了哪些组件 缺点: > 如果 n 个页面使用同一个组件,就需要在 n 个页面中各引入一次该组件 ```js import HelloWorld from "@/components/HelloWorld.vue" export default { components: { HelloWorld } } ``` ## 手动统一引入 优点: > 一次引入全局可用,解决了默认方式中需要引入多次的问题 > `() => import('')` 方法提供了按需引入的解决方案 > 可以按功能或其它方式拆分到不同的文件中 缺点: > 所有组件还是需要手动引入一次 > 不能非常清晰的知道页面中使用了哪些组件 components/components.js ```js export default Vue => { Vue.component("Header", () => import("./HelloWorld.vue")) // ... } ``` main.js ```js import components from "@/components/components" Vue.use(components) ``` ## 自动引入 优点: > 不再关注需要引入哪些组件,全部由程序自动完成 缺点: > 不能非常清晰的知道页面中使用了哪些组件 components/components.js ```js // 组件动态注册 import Vue from "vue" /** * 首字母大写 * @param str 字符串 * @example heheHaha * @return {string} HeheHaha */ function capitalizeFirstLetter(str) { return str.charAt(0).toUpperCase() + str.slice(1) } /** * 对符合 'xx/xx.vue' 组件格式的组件取组件名 * @param str fileName * @example abc/bcd/def/basicTable.vue * @return {string} BasicTable */ function validateFileName(str) { return ( /^\S+\.vue$/.test(str) && str.replace(/^\S+\/(\w+)\.vue$/, (rs, $1) => capitalizeFirstLetter($1)) ) } const requireComponent = require.context("./", true, /\.vue$/) // 找到组件文件夹下以 .vue 命名的文件,如果文件名为 index,那么取组件中的 name 作为注册的组件名 requireComponent.keys().forEach(filePath => { const componentConfig = requireComponent(filePath) const fileName = validateFileName(filePath) const componentName = fileName.toLowerCase() === "index" ? capitalizeFirstLetter(componentConfig.default.name) : fileName Vue.component(componentName, componentConfig.default || componentConfig) }) ``` main.js ```js import components from "@/components/components" ```