在sage 10 的入门主题使用Vue 3，自动加载文件夹下的所有组件

***.blade.php

/**
 * sage 10 默认有id="app"的
 * 
 * 在随便一个`***.blade.php`使用
 * 
 * 注意<abc-def></abc-def>跟<abc-def/>
 * 
 * 我使用<abc-def/>会失败。
 * 
 * 
 */
 
 <div id="app">
      ....
        <abc-def></abc-def>
      ....
 </div>

app.js

// /resources/scripts/app.js
//我在主题的`resources`里创建`components`文件夹，用来存放我的`vue`文件

import {
  createApp
} from 'vue'
const app = createApp({});

// 导入components文件夹下的所有组件
// 批量导入需要使用一个函数 require.context(dir,deep,matching)
// 参数：1. 目录  2. 是否加载子目录  3. 加载的正则匹配
//匹配当前文件夹下的所有.vue文件 注册全局组件
const requireComponent = require.context('../components', false, /\.vue$/)

// 匹配到的文件名数组
// console.log('查看匹配到的文件名数组', requireComponent.keys()) 

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName);
  const componentName = fileName.substring(fileName.lastIndexOf('/') + 1, fileName.lastIndexOf('.'));
  app.component(
    componentName,
    componentConfig.default || componentConfig
    //最后：如果文件名为AbcDef.vue的文件，最后就是使用<abc-def></abc-def>
    //如果文件名为Abcdef.vue的文件，那么就是使用<abcdef></abcdef>
  );
});

app.mount('#app');

webpack.mix.js

//通过mix.vue()激活Vue

mix
  .js('resources/scripts/app.js', 'scripts').vue({ version: 3 }).extract();

我的package.json

  "devDependencies": {
    "@tailwindcss/typography": "^0.4.1",
    "@tinypixelco/laravel-mix-wp-blocks": "^1.1.0",
    "@wordpress/babel-preset-default": "^6.1.0",
    "@wordpress/browserslist-config": "^4.0.0",
    "@wordpress/dependency-extraction-webpack-plugin": "^3.1.3",
    "babel-eslint": "^10.1.0",
    "browser-sync": "^2.26.14",
    "browser-sync-webpack-plugin": "^2.3.0",
    "eslint": "^7.27.0",
    "eslint-plugin-import": "^2.23.3",
    "laravel-mix": "^6.0.19",
    "postcss": "^8.3.0",
    "sass": "^1.34.0",
    "sass-loader": "11.1.1",
    "stylelint": "^13.13.1",
    "stylelint-config-standard": "^22.0.0",
    "tailwindcss": "^2.1.2",
    "@vue/compiler-sfc": "^3.2.26",
    "vue-loader": "16.1.0"
  },
  "peerDependencies": {
    "jquery": "^3.5.1"
  },
  "dependencies": {
    "naive-ui": "^2.23.0",
    "vue": "^3.2.26"
  }