在Symfony 4中集成VueJs,它没有效果

I try to integrate VueJs to Symfony 4.3.

I have installed webpack-encore, vue vue-loader vue-template-compiler and so on.

Everything shows normal.

My os is windows 10. I have installed nodejs and yarn.

    Documents>node -v 
    v12.4.0
    Documents>npm -v
    6.9.0
    Documents>yarn -v
    1.16.0

//webpack.config.js

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

Encore

.setOutputPath('public/build/')

.setPublicPath('/build')

.addEntry('app', './assets/js/app.js')


.enableVueLoader()

.splitEntryChunks()

.enableSingleRuntimeChunk()

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

.configureBabel(() => {}, {
    useBuiltIns: 'usage',
    corejs: 3
})

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

}

module.exports = Encore.getWebpackConfig();

//app.js

import Vue from "vue";
import App from "./components/App";

console.log('abc');

new Vue({
    el: '#app',
    components: { App },
})

//App.vue

    <template>
        <h2>Welcome to Symfony 4 and vuejs</h2>
    </template>

    <script>
        export default {
        }
    </script>

    <style scoped>

    </style>

//index.html.twig

{% extends 'base.html.twig' %}

{% block title %}Hello HomeController!{% endblock %}

{% block body %}
    <div id="app">
       <App> </App>
    </div>

{% endblock %}

//base.html.twig

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <script src="{{ asset('build/app.js') }}"></script>
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
    </html>

//HomeController.php

    class HomeController extends AbstractController
    {
        /**
         * @Route("/home", name="home")
         * @return Response
         */
        public function index()
        {
            return $this->render('home/index.html.twig', [
                'controller_name' => 'HomeController',
            ]);
        }
    }

When I make the server run,all correct,not excetipn but noting shows.

D:\symfonyvue>npm run dev-server

> @ dev-server D:\symfonyvue
> encore dev-server

Running webpack-dev-server ...

 DONE  Compiled successfully in 3026ms
php bin/console server:run


 [OK] Server listening on http://127.0.0.1:8001


 // Quit the server with CONTROL-C.

visite the http://127.0.0.1:8000/home


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello HomeController!</title>
                <script src="http://localhost:8080/build/app.js"></script>
    </head>
    <body>
            <div id="app">
       <App> </App>
    </div>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐