在 mounted div 中加载 Vue 3 组件并传递 PHP 数据

Question

我目前正在开发一个新项目，我必须将 Vue 3 集成到一个大型 Symfony/Drupal 项目中。该项目已经包含很多 PHP 代码，实际上我不想一开始就重构太多。

好吧，我尝试设置一小段 Vue 代码，看看如何开始处理其余代码。实际上我只是想将一些 PHP 代码从 index.html.twig 传输到 sidebar.vue 文件。我还通过 Symfony 的方式使用 Webpack Encore。我读到我可以使用 Vue 组件来实现这一点，但我的组件没有加载到我的 <div id="app"></div> 中。或者至少不是我希望它们加载的方式。

webpack.config.js (Webpack Encore)

var Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('webroot/public/build/')
    .setPublicPath('/public/build')

    .addEntry('main', './vue/src/main.js')

    .splitEntryChunks()

    .enableSingleRuntimeChunk()


    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    .enableSassLoader()
    .enablePostCssLoader()

    // enables Vue
    .enableVueLoader(() => {}, {
        version: 3,
        runtimeCompilerBuild: false,
    });
;

module.exports = Encore.getWebpackConfig();

main.js

import { createApp } from 'vue';
import Sidebar from './components/sidebar';


const app = createApp({})

app.component('sidebar', Sidebar);

app.mount("#app");

sidebar.vue

<template>
    <h1>Sidebar</h1>
</template>

<script>
export default {
    name: 'Sidebar',
};
</script>

<style lang="scss" module>

</style>

index.html.twig

<div id="app"> <!-- The vue #app is loaded --> 
    <sidebar></sidebar> <!-- This is not loading -->
</div>

<!-- If it's loading I want to setup something like this -->

<div id="app"> <!-- The vue #app is loaded --> 
    <sidebar :item="{{ $item }}"></sidebar> <!-- This is not loading -->
</div>

{{ encore_entry_script_tags('main') }}

那么如何让 <sidebar></sidebar> 加载到 HTML/Twig 文件中呢？在下一步中，我想在 <sidebar> 组件上传递一些 PHP 数据，以便我可以在 sidebar.vue 文件中读取它。类似于：<sidebar :item="{{ $item }}"></sidebar> 我不完全确定我当前的设置是否可行，但我很乐意看到它像这样或以类似的方式工作。

Answer 1

看来我得用runtimeCompilerBuild了。这解决了问题。当 false Vue 只能与单文件组件一起使用时性能更好但目前不太适合我的应用程序。

.enableVueLoader(() => {}, {
   version: 3,
   runtimeCompilerBuild: true,
});

而不是

runtimeCompilerBuild: false;

Answer 2

在你的main.js中做：

app.mount("sidebar");

而不是

app.mount("#app");

在 mounted div 中加载 Vue 3 组件并传递 PHP 数据

Load Vue 3 Component inside mounted div and pass PHP data

symfony

vue.js

vue-component

webpack-encore

vuejs3