Differences

This shows you the differences between two versions of the page.

--- laravel-mix-vuejs [2021/08/20 08:22] – chifek
+++ laravel-mix-vuejs [2023/09/14 06:06] (current) – external edit 127.0.0.1
@@ Line 34: / Line 34: @@
 **!!!В этом приложении маршрутизация будет не на стороне Laravel, в файле web.php напишем единую точку входа:**
-''Route::get('/{any', 'SpaController@index')->where('any', '.*');''
+''Route::get('/{any}', 'SpaController@index')->where('any', '.*');''
 Все остальные пути будут через пакет Vue Router
@@ Line 75: / Line 75: @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>SPA Laravel</title>
+    <link rel="stylesheet" href="{{mix('css/app.css')}}">
 </head>
 <body>
     <div id="app">
+        <app></app>
     </div>
+<script src="{{mix('js/app.js')}}"></script>
 </body>
 </html>
 </code>
@@ Line 92: / Line 95: @@
 import Vue from 'vue'
+Vue.component('app', require('../components/App').default)
 const app = new Vue({
     el: '#app',
 })
 </code>
@@ Line 115: / Line 121: @@
  */
-mix.js('resources/js/app.js', 'public/js')
+mix.js('resources/js/app.js', 'public/js').vue();
-    .postCss('resources/css/app.css', 'public/css', [
+mix.css('resources/css/app.css', 'public/css').vue();
-        //
-    ]).vue();
 </code>
+Внимание! Чтобы использовать Laravel Mix с VueJS, необходимо дописать к подключаемым файла .vue() (см.выше на код)
+Следующим шагом будет создание файла resources/components/App.vue
+<code>
+<template>
+    <div class="container">
+        <h1>Qsoft Company</h1>
+    </div>
+</template>
+<script>
+export default {
+    name: "app"
+}
+</script>
+<style scoped>
+</style>
+</code>
+==== Запуск и проверка ====
+''php artisan serve''
+''npx mix''
+http://joxi.ru/l2Zy3dEcR7GpOm
+===== Ссылки  =====
+Этот проект на Github [[https://github.com/Chifek/Laravel-VueJS-Laravel-Mix]]
+Офф.сайт Laravel Mix [[https://laravel-mix.com]]