Vue.js 组件引入的几种方式

默认方式

优点:

清晰的知道在页面中使用了哪些组件

缺点:

如果 n 个页面使用同一个组件,就需要在 n 个页面中各引入一次该组件

import HelloWorld from "@/components/HelloWorld.vue"

export default {
  components: {
    HelloWorld
  }
}

手动统一引入

优点:

一次引入全局可用,解决了默认方式中需要引入多次的问题

() => import('') 方法提供了按需引入的解决方案

可以按功能或其它方式拆分到不同的文件中

缺点:

所有组件还是需要手动引入一次

不能非常清晰的知道页面中使用了哪些组件

components/components.js

export default Vue => {
  Vue.component("Header", () => import("./HelloWorld.vue"))
  // ...
}

main.js

import components from "@/components/components"
Vue.use(components)

自动引入

优点:

不再关注需要引入哪些组件,全部由程序自动完成

缺点:

不能非常清晰的知道页面中使用了哪些组件

components/components.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

import components from "@/components/components"
Last Updated: 7/8/2019, 8:14:22 PM