在挂载的 div 中加载 Vue 3 组件并传递 PHP 数据 [英] Load Vue 3 Component inside mounted div and pass PHP data
问题描述
我目前正在从事一个新项目，我必须将 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');如果 (!Encore.isRuntimeEnvironmentConfigured()) {Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');}再来一次.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 = '用法';config.corejs = 3;}).enableSassLoader().enablePostCssLoader()//启用 Vue.enableVueLoader(() => {}, {版本:3，运行时编译器构建:假，});;module.exports = Encore.getWebpackConfig();main.js
import { createApp } from 'vue';从'./components/sidebar'导入侧边栏；const app = createApp({})app.component('sidebar', Sidebar);app.mount("#app");sidebar.vue
<h1>侧边栏</h1></模板><脚本>导出默认{name: '侧边栏',};<style lang="scss";模块></风格>index.html.twig
<!-- vue #app 已加载--><边栏></边栏><!-- 这不是加载--><!-- 如果它正在加载，我想设置这样的东西--><div id="应用程序"><!-- vue #app 已加载--><sidebar :item="{{ $item }}></sidebar><!-- 这不是加载-->
{{ encore_entry_script_tags('main') }}
那么如何让 sidebar.vue 文件中读取它.类似于:<sidebar :item="{{ $item }}></sidebar>我不完全确定我当前的设置是否可行，但我很想看到它像这样或以类似的方式工作.
看来我必须使用 runtimeCompilerBuild.这解决了问题.当 false Vue 只能与单文件组件一起使用时，它的性能更好，但目前不太适合我的应用程序.
.enableVueLoader(() => {}, {版本:3，运行时编译器构建:真，});代替
runtimeCompilerBuild: false;I'm currently working on a new project where I have to integrate Vue 3 in a large Symfony/Drupal project. The project already contains a lot of PHP code and actually I don't want to refactor too much to begin with.
Well I tried setting up a very small piece of Vue code to see how I could start working on the rest of the code. Actually I just want some PHP code to be transferred from index.html.twig to the sidebar.vue file. I also work with Webpack Encore by the way from Symfony. I read that I could use Vue components to achieve this but my components are not loaded inside my <div id="app"></div>. Or atleast not how I want them to load.
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') }}
So how can I make <sidebar></sidebar> to load inside the HTML/Twig file? In the next step I would like to pass some PHP data on the <sidebar> component so I can read it inside the sidebar.vue file. Something like: <sidebar :item="{{ $item }}"></sidebar>
I'm not entirely sure if this is possible with my current setup but I would love to see it work like this or in a similar way.
It seems like I'll have to use the runtimeCompilerBuild. That solves the problem. When false Vue can only be used with single file components which performs better but is less suitable for my application at the moment.
.enableVueLoader(() => {}, {
version: 3,
runtimeCompilerBuild: true,
});
Instead of
runtimeCompilerBuild: false;
这篇关于在挂载的 div 中加载 Vue 3 组件并传递 PHP 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
