vue3.0中全局注册组件版本2-个人

前言：

       在使用vue3.0注册组件的过程中，也是有很多个人的感悟和方法，下面分享一下，用vue2.0做对比。

目录：

vue2.0 方法使用：

1、逻辑

2、componentRegister.js 见最下面

3、main.js中引入：

vue3.0 方法使用：

 1、逻辑

2、componentRegister.js 见最下面

3、main.js中引入：

vue2.0 componentRegister.js

vue3.0 componentRegister.js

---

vue2.0 方法使用：

1、逻辑

在 components 加入 componentRegister.js 文件，这个文件的目的是将 components 下的所有文件全局注册到vue上，然后再main.js中调用

2、componentRegister.js 见最下面

 

3、main.js中引入：

import './components/componentRegister' // 动态import基础组件

vue3.0 方法使用：

 1、逻辑

在 components 加入 componentRegister.js 文件，这个文件的目的是将 components 下的所有文件全局注册到vue上，然后再main.js中调用

2、componentRegister.js 见最下面

3、main.js中引入：

// 动态import基础组件
import componentRegister from './components/componentRegister'

const app = createApp(App)

componentRegister(app)


app.use(store).use(router).mount('#app')

vue2.0 componentRegister.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)
})

vue3.0 componentRegister.js

export default (app) => {
  /**
   * 首字母大写
   * @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
    app.component(componentName, componentConfig.default || componentConfig)

  })
}

到此结束！