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

Posted 2023-02-23

【中文标题】在挂载的 div 中加载 Vue 3 组件并传递 PHP 数据

【英文标题】：Load Vue 3 Component inside mounted div and pass PHP data

【发布时间】：2020-11-14 03:02:38

【问题描述】：

我目前正在开发一个新项目，我必须将 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();

ma​​in.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> 我不完全确定我当前的设置是否可行，但我希望看到它像这样或以类似的方式工作。

【参考方案1】：

在你的 ma​​in.js 中做：

app.mount("sidebar");

而不是

app.mount("#app");

【参考方案2】：

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

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

代替

runtimeCompilerBuild: false;

【讨论】：

如何在没有 Encore 的情况下通过普通的 Webpack 配置来实现？