How to introduce vue3+typescript in blade?

sage
, , ,
1

现在我使用以前的批量导入，在blade文件输入<abc-def></abc-def> 已然失败

我的代码：

  • package.json
{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config"
  ],
  "engines": {
    "node": ">=16.0.0"
  },
  "type": "module",
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "translate": "yarn translate:pot && yarn translate:update",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"app,resources\"",
    "translate:update": "wp i18n update-po ./resources/lang/sage.pot ./resources/lang/*.po",
    "translate:compile": "yarn translate:mo && yarn translate:js",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
  },
  "devDependencies": {
    "@roots/bud": "6.12.2",
    "@roots/bud-babel": "^6.12.3",
    "@roots/bud-tailwindcss": "6.12.2",
    "@roots/bud-typescript": "^6.12.3",
    "@roots/bud-vue": "^6.12.3",
    "@roots/sage": "6.12.2",
    "@types/webpack-env": "^1.18.1"
  },
  "dependencies": {}
}
  • bud.config.js
/**
 * Compiler configuration
 *
 * @see {@link https://roots.io/docs/sage sage documentation}
 * @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
 *
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {

  /**
   *  vue
   */
  app.vue.set(`runtimeOnly`, false)
  /**
   *  bud.babel.presets.
   *  
   */
  console.dir(app.babel.presets)
  app.babel.setPreset('@babel/preset-env')

  app.define({
    __VUE_OPTIONS_API__: true, 
    __VUE_PROD_DEVTOOLS__: false, 
  });
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/docs/bud.entry}
   * @see {@link https://bud.js.org/docs/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/docs/bud.setPublicPath}
   */
  app.setPublicPath('/app/themes/sage/public/');

  /**
   * Development server settings
   *
   * @see {@link https://bud.js.org/docs/bud.setUrl}
   * @see {@link https://bud.js.org/docs/bud.setProxyUrl}
   * @see {@link https://bud.js.org/docs/bud.watch}
   */
  app
    .setUrl('http://localhost:3000')
    .setProxyUrl('http://w.co')
    .watch(['resources/views', 'app']);

  /**
   * Generate WordPress `theme.json`
   *
   * @note This overwrites `theme.json` on every build.
   *
   * @see {@link https://bud.js.org/extensions/sage/theme.json}
   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
   */
  app.wpjson
    .set('settings.color.custom', false)
    .set('settings.color.customDuotone', false)
    .set('settings.color.customGradient', false)
    .set('settings.color.defaultDuotone', false)
    .set('settings.color.defaultGradients', false)
    .set('settings.color.defaultPalette', false)
    .set('settings.color.duotone', [])
    .set('settings.custom.spacing', {})
    .set('settings.custom.typography.font-size', {})
    .set('settings.custom.typography.line-height', {})
    .set('settings.spacing.padding', true)
    .set('settings.spacing.units', ['px', '%', 'em', 'rem', 'vw', 'vh'])
    .set('settings.typography.customFontSize', false)
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize()
    .enable();
};
  • app.ts
import domReady from '@roots/sage/client/dom-ready';
import { createApp } from 'vue';
// import Menu from './vue/stores/Menu.vue';

/**
 * Application entrypoint
 */
domReady(async () => {
  // ...
});

const hello: string = "Hello World!"
console.log(hello)
import { version } from 'vue'

console.log(version)


const app = createApp({});


const requireComponent = require.context('./vue/components', false, /\.vue$/)

console.log('View an array of matched filenames', 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
  );
});

app.mount('#ap');


// const app = createApp(Menu);
// app.mount("#ap");
  • The two lines of code in my comment can be registered separately
// const app = createApp(Menu);
// app.mount("#ap");

I’m a noob, what do I need to do to run them properly？