震惊~! 竟然可以批量注册vue公共组件!!!

首先我们需要在 src/components文件下下面新建一个index.js文件

我们只需在index.js中写下如下的代码

// 批量注册公共组件
export default {
  install (Vue) {
  
    // 三个参数 
    // 参数1. 加载的文件目录  
    // 参数2. 是否深度查找子目录   
    // 参数3. 正则,匹配文件
    // requireComponent :返回的值 :导入函数
    // keys() 获取所有的文件列表,可以自己试着打印看看
    
    var requireComponent = require.context('./', true, /\.vue$/)
    requireComponent.keys().forEach((item) => {
      var defaultCom = requireComponent(item).default
      Vue.component(defaultCom.name, defaultCom)
    })
  }
}

接下来我们就可以在src/main.js 写如下的代码

import plugin from '@/components'
Vue.use(plugin)

成功的话,可以回来点个赞,哈哈

这边顺便给大家科普一下一个小知识点,不知道大家是不是经常为了 @/ 没有提示而烦恼

下面我来帮大家解决这个烦恼!!

我们需要在项目的根目录下面新建一个 jsconfig.json 然后写下如下代码,你就可以快乐啦

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  },
  "exclude": ["node_modules", "dist"]
}

好啦,没啦