Differences

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

--- laravel-mix-vuejs [2021/08/19 12:12] – chifek
+++ laravel-mix-vuejs [2023/09/14 06:06] (current) – external edit 127.0.0.1
@@ Line 29: / Line 29: @@
 {{:ebce88e301.jpg?600|}}
+==== Настройка приложения ====
 **!!!В этом приложении маршрутизация будет не на стороне Laravel, в файле web.php напишем единую точку входа:**
-''Route::get('/{any', 'SpaController@index')->where('any', '.*');''
+''Route::get('/{any}', 'SpaController@index')->where('any', '.*');''
 Все остальные пути будут через пакет Vue Router
@@ Line 40: / Line 42: @@
 ''php artisan make:controller SpaController''
-и пишем туда
+и пишем туда:
 <code>
@@ Line 57: / Line 59: @@
 }
 </code>
+След.шагом создаем сам файл index.blade.php в дерриктории resources/views/
+наполняем его след.содержимым:
+<code>
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <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>
+Весь javascript будем писать в resources/js/app.js
+<code>
+require('./bootstrap');
+import Vue from 'vue'
+Vue.component('app', require('../components/App').default)
+const app = new Vue({
+    el: '#app',
+})
+</code>
+Так же надо настроить webpack.mix.js, который должен лежать в корне проекта:
+<code>
+const mix = require('laravel-mix');
+/*
+ |--------------------------------------------------------------------------
+ | Mix Asset Management
+ |--------------------------------------------------------------------------
+ |
+ | Mix provides a clean, fluent API for defining some Webpack build steps
+ | for your Laravel applications. By default, we are compiling the CSS
+ | file for the application as well as bundling up all the JS files.
+ |
+ */
+mix.js('resources/js/app.js', 'public/js').vue();
+mix.css('resources/css/app.css', 'public/css').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]]