Метка: Laravel

Рубрики
Laravel

Настройки в шаблоне Laravel проекта

  • Автор записи Автор: bo52
  • Дата записи 12.04.2022
  • Первый модульный компонент Vue3 в Laravel проекте
    resources\js\components\MyTest.vue
<template>
<div>test</div>
</template>
  • регистрируем компонент Vue в Laravel проекте
    resources\js\app.js
require('./bootstrap');
import {createApp} from 'vue';
import MyTest from './components/MyTest.vue';

const app=createApp({});
app.component('my-test',MyTest);

app.mount('#app');
  • На шаблоне Laravel проекта
    (пример resources\views\index.blade.php)
    размещение Vue3 компонента в атрибуте id тега (примере my-test)
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    <div id="app">
    <my-test/>
    </div>

    <script src="./js/app.js"></script>
    </body> 
</html>
  • создание роуминга Laravel
    для шаблона (пример resources\view\index.blade.php)
    как главной страницы
    на routes\web.php
...
Route::get('/', function () {
    return view('index');
});
...
Рубрики
Vue.js

Настройка работы компонентов Vue3 в Laravel проекте

  • Автор записи Автор: bo52
  • Дата записи 12.04.2022
  • Закрепленная запись
  • Установка Vue3 в Laravel проекте через терминале IDE
установка менеджера пакетов в проекте
npm install
установка последней версии laravel-mix
npm i laravel-mix
установка пакета vue через npm
npm install --save vue@next
npm install --save-dev vue-loader@next
запуск приложения Vue локально (не использую)
npm run serve
  • Настройка работы Vue3 в проекте Laravel
    в файл webpack.mix.js (находится в корне проекта)
    добавить метод vue
...
mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);
  • папка, где хранятся компоненты vue resources\js\components
  • файл регистрирует компоненты Vue в Laravel
    resources\js\app.js
require('./bootstrap');
import {createApp} from 'vue';

const app=createApp({});

app.mount('#app');
Рубрики
Vue.js

Первый Vue3 компонент в Laravel проекте

  • Автор записи Автор: bo52
  • Дата записи 12.04.2022
  • Первый модульный компонент Vue3 в Laravel проекте
    resources\js\components\MyTest.vue
<template>
<div>test</div>
</template>
  • регистрируем компонент Vue в Laravel проекте
    resources\js\app.js
require('./bootstrap');
import {createApp} from 'vue';
//главный компонент
import App from 'components/../App.vue';
//компоненты
import comp1 from 'components/comp1.vue';
import comp2 from 'components/comp2.vue';
//создание главного компонента
//и регистрация внутри него других компонентов
const app=createApp(App);
app.component('comp-1',comp1);
app.component('comp-2',comp2);
app.mount('#app');
  • На шаблоне Laravel проекта
    (пример resources\views\index.blade.php)
    размещение Vue3 компонента в id=»app» (примере my-test)
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    <div id="app"></div>
    <script src="./js/app.js"></script>
    </body> 
</html>
  • создание роуминга Laravel
    для шаблона (пример resources\view\index.blade.php)
    как главной страницы
    на routes\web.php
...
Route::get('/', function () {
    return view('index');
});
...
Рубрики
Vue webpack.mix.js Laravel

Абсолютный и Относительный путь для Vue.js в Laravel

Абсолютный путь

  • файл webpack.mix.js в корне проекта
    (пример сократить путь к компонентам)
const mix = require('laravel-mix');

const path = require('path');

mix.webpackConfig({
  resolve: {
    alias: {
     'components':path.resolve(__dirname,'resources/components/')
    },
  },
});

любой файл, связанный с vue 

../Project/resources/components/dir1/dir2/comp.js
import comp from 'root/dir1/dir2/comp';
../Project/resources/components/dir1/dir2/comp.vue
import comp from 'root/dir1/dir2/comp.vue';
Рубрики
Laravel+Vue3 project Vue.js Vue основы Vue компонент

Регистрация компонентов Vue3 для Laravel проекта

Первый Vue3 компонент в Laravel проекте
Регистрация компонента может проводится двумя видами во Vue.js

1. Глобальная
регистрация компонента

  • явная регистрация
    До сих пор мы создавали компоненты с помощью Vue.component
  • не явная регистрация

2. Локальная
регистрация компонента

Глобальная регистрация часто не идеальна. Например, если вы используете систему сборки, такую как Webpack, глобальная регистрация всех компонентов означает, что даже если вы прекратите использовать компонент, то он всё равно будет включён в вашу сборку приложения. Это излишне увеличит количество JavaScript, который должны будут загрузить ваши пользователи.

В таких случаях вы можете определить свои компоненты как обычные объекты JavaScript

регистрация компонента во Vue.js
Vue.js