Symfony4のプロジェクトを作成し、Vue.jsをインストールします
composer create-project symfony/website-skeleton vue-symfony
cd vue-symfony
yarn add --dev vue vue-loader@14 vue-template-compiler
php bin/console make:controller Default
<?php
namespace App\Controller;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
class DefaultController extends Controller
{
/**
* @Route("/", name="default")
*/
public function index()
{
return $this->render('default/index.html.twig');
}
}{% extends 'base.html.twig' %}
{% block body %}
<div class="text-center">
<h3>My Symfony 4 sample project</h3>
<div class="jumbotron text-center">
<example></example>
</div>
</div>
{% endblock %}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
{% endblock %}
</head>
<body>
<div id="app">
{% block body %}{% endblock %}
</div>
{% block javascripts %}
<script src="{{ asset('build/js/app.js') }}"></script>
{% endblock %}
</body>
</html>var Encore = require('@symfony/webpack-encore'); Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.addEntry('js/app', './assets/js/app.js')
// .addStyleEntry('css/app', './assets/css/app.scss')
// .enableSassLoader()
// .autoProvidejQuery()
// Enable Vue loader
.enableVueLoader()
;
module.exports = Encore.getWebpackConfig();// assets/js/app.js
import Vue from 'vue';
import Example from './components/Example'
/**
* Create a fresh Vue Application instance
*/
new Vue({
el: '#app',
components: {Example}
});<template>
<div>
<p>This is an example of a new components in VueJs</p>
</div>
</template>
<script>
export default {
name: 'example'
}
</script>
<style scoped>
</style>php bin/console server:run
yarn run encore dev --watch
The MIT License (MIT). Please see LICENSE for more information.