Kết hợp Laravel vs Vuejs (ok)
https://laravel.com/docs/7.x/frontend
Cài đặt
$composer require laravel/ui:^2.4 nếu lỗi thì sử dụng composer require laravel/ui
$php artisan ui bootstrap
$php artisan ui vue
$php artisan ui bootstrap --auth
$php artisan ui vue --auth
$yarn dev nếu lỗi sử dụng tiếp
$npm install laravel-mix@latest --save-dev
$npm run dev nếu vẫn lỗi chạy tiếp npm update vue-loader
$npm run devC:\xampp\htdocs\vl\resources\views\welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{ url("public/css/app.css") }}">
<title>Laravel</title>
</head>
<body class="antialiased">
<div class="container relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
@if (Route::has('login'))
<div class="px-3 hidden fixed top-0 right-0 px-6 py-4 sm:block">
@auth
<a href="{{ url('/home') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Home</a>
@else
<a href="{{ route('login') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</a>
@if (Route::has('register'))
<a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline">Register</a>
@endif
@endauth
</div>
@endif
<div id="app">
<example-component />
</div>
</div>
<script type="text/javascript" src="{{ url("public/js/app.js") }}"></script>
</body>
</html>C:\xampp\htdocs\vl\resources\js\components\ExampleComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12 col-lg-12">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>C:\xampp\htdocs\vl\resources\js\app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue').default;
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});Kết quả:
Last updated
