Использование Vue.js в Laravel 5.3

В проектах Laravel до 5.3 я использовал Vue.js, используя тег script, как это:

<script type="text/javascript" src="../js/vue.js"></script>

Затем я создавал экземпляр Vue для этой страницы следующим образом:

<script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    });
</script>

а затем привяжите его к соответствующему идентификатору div # в моем HTML.

Теперь, в Laravel 5.3 Vue.js поставляется в комплекте, и я полностью понимаю, что я могу использовать компоненты, как описано в документах, с помощью gulp/elixir, однако мой вопрос , если я хочу создать Экземпляр Vue.js, как я уже упомянул, т.е. где я создаю экземпляр Vue.js строго для данной страницы (а не компонента), как это сделать?

Установить его так, как я использовал, импортировав библиотеку vue.js в тег script или я могу использовать сгенерированный файл app.js?

Я не должен делать это таким образом, должен ли я создавать компоненты для всего?

Для меня нет смысла составлять компонент для чего-то, что я использую только один раз - я думал, что целью компонентов было то, что они многоразовые - вы можете использовать его в нескольких местах. Как упоминалось в документах Vue.js:

Компоненты - одна из самых мощных функций Vue.js. Они помогают вам расширять базовые HTML-элементы для инкапсуляции кода повторного использования.

Любые советы будут оценены, спасибо!

ОТВЕТЫ

Ответ 1

Я оставил бы Laravel так, как он есть, с Webpack. Это дает вам возможность добавить хорошую конфигурацию Webpack. Плюс gulp watch работает внутри виртуальной виртуальной виртуальной машины Homestead, так как будет использовать Webpack для просмотра изменений файла. А также проверьте асинхронные компоненты.

Теперь на ваш вопрос относительно отдельных экземпляров Vue на странице... пусть начнется с app.js...

App.js
Когда вы впервые установите Laravel 5.3, вы найдете точку входа app.js. Давайте прокомментируем основной экземпляр Vue:

ресурсы/активы/JS/app.js

/**
 * First we will load all of this project JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * 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.
 */

Vue.component('example', require('./components/Example.vue'));

// Let comment this out, each page will be its own main Vue instance.
//
// const app = new Vue({
//     el: '#app'
// });

Файл app.js по-прежнему остается местом для глобального материала, поэтому компоненты, добавленные здесь, доступны (например, компонент example, указанный выше) на любую страницу script, которая включает его.

Приветственная страница Script
Теперь создайте script, который представляет страницу приветствия:

ресурсы/активы/JS/страницы/welcome.js

require('../app')
import Greeting from '../components/Greeting.vue' 

var app = new Vue({
    name: 'App',
    el: '#app',
    components: { Greeting },
    data: {
        test: 'This is from the welcome page component'
    }
})

Страница блога Script
Теперь создайте еще один script, который представляет страницу блога:

ресурсы/активы/JS/страницы/blog.js

require('../app')
import Greeting from '../components/Greeting.vue' 

var app = new Vue({
    name: 'App',
    el: '#app',
    components: { Greeting },
    data: {
        test: 'This is from the blog page component'
    }
})

Приветственный компонент
ресурсы/активы/JS/компоненты/Greeting.vue

<template>
    <div class="greeting">
       {{ message }}
    </div>
</template>

<script>
    export default {
        name: 'Greeting',
        data: () => {
            return {
                message: 'This is greeting component'
            }
        }
    }
</script>

Приветственный вид блейда
Обновите приветственное лезвие, которое поставляется с Laravel:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
    </head>
    <body>
        <div id="app">
            <example></example>
            @{{ pageMessage }}
            <greeting></greeting>
        </div>

        <script src="/js/welcome.js"></script>
    </body>
</html>

Идея будет одинаковой для просмотра блога.

Elixir
Теперь принесите все это в свой файл gulp, используя способность Elixir объединить параметры конфигурации Webpack со своим собственным (подробнее об этом здесь):

gulpfile.js

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(mix => {
    var config =  elixir.webpack.mergeConfig({
          entry: {
            welcome: './resources/assets/js/pages/welcome.js',
            blog: './resources/assets/js/pages/blog.js'
          },
          output: {
            filename: '[name].js' // Template based on keys in entry above
          }
       });

    mix.sass('app.scss')
       .webpack('app.js', null, null, null, config);
});

Запустите gulp или gulp watch, и вы увидите как опубликованные welcome.js, так и blog.js.

Мысли
В настоящее время я перехожу на SPA-маршрут, когда дело доходит до "веб-приложений" и просто использует Laravel в качестве базового API (или любого другого языка/фреймворка). Я видел несколько примеров, где Vue SPA построен в Laravel, но я действительно думаю, что это должен быть полностью отдельный репо/проект, независимо от бэкэнда. Там нет шаблонов Laravel/PHP, связанных с SPA, поэтому создавайте SPA отдельно. BTW, SPA будет иметь "страничные" компоненты (которые обычно вызывают VueRouter и, конечно, будут состоять из более вложенных компонентов... см. Мою ссылку на проект ниже).

Однако для "веб-сайта" я думаю, что Laravel по-прежнему является хорошим выбором для просмотра роликов, и для этого нет необходимости идти на SPA. Вы можете сделать то, что я описал в этом ответе. Кроме того, вы можете подключить свой веб-сайт к webapp. На вашем веб-сайте у вас будет ссылка "Войти", в которой пользователь может перейти с веб-сайта в webapp SPA для входа в систему. Ваш сайт остается дружественным к SEO (хотя есть хорошее доказательство того, что Google также просматривает контент на сайтах JavaScript javascript).

Для взгляда на подход SPA я привел пример в Vue 2.0 здесь: https://github.com/prograhammer/example-vue-project (он отлично работает, но все еще продолжается).

Edit:

Возможно, вы захотите также проверить Commons Chunk Plugin. Таким образом, браузеры могут кэшировать отдельные зависимости между отдельными модулями. Webpack автоматически может вытащить общие импортированные зависимости и поместить их в отдельный файл. Так что у вас есть как common.js (общий материал), так и welcome.js на странице. Затем на другой странице вы снова получите common.js и blog.js, и браузер может повторно использовать кешированный common.js.

Ответ 2

Если вы хотите включить vuejs в app.js, используя gulp, вы можете сделать это с помощью elixir:

Во-первых, вам нужно laravel-elixir-browserify-official из npm:

npm установить laravel-elixir-browserify-official

Затем поместите следующее в package.json:

  "browserify": {
    "transform": [
      "vueify",
      "babelify"
    ]
  }

В этом случае вам понадобятся только ваши ресурсы/активы/js/app.js:

  require('./bootstrap');

Файл bootstrap.js должен находиться в папке "resources/assets/js". Я не могу вспомнить, было ли это установлено с паспортом в моей заявке, поэтому, если у вас его нет, тогда laravel предоставил следующий код для "bootstrap.js":

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');
require('vue-resource');

/**
 * We'll register a HTTP interceptor to attach the "CSRF" header to each of
 * the outgoing requests issued by this application. The CSRF middleware
 * included with Laravel will automatically verify the header value.
 */

Vue.http.interceptors.push((request, next) => {
    request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;

    next();
});

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from "laravel-echo"

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

Теперь в gulpfile.js вы можете использовать:

elixir(function(mix) {
    mix.browserify('app.js');
});

И в вашем HTML вы бы:

...
<div id="app">
  @{{message}}
</div>
...

<script type="text/javascript">
   new Vue({
     el: '#app',
     data: {
       message: 'Hello Vue.js!'
     }
  });
</script>

Теперь просто запустите gulp

Если вы не используете эликсир, вы должны иметь возможность делать аналогичную вещь с пакетами браузера или веб-пакетов от npm.

Edit

Чтобы ответить на ваш обновленный вопрос, вы можете, конечно, использовать vue.js для одной страницы. Я лично использую нокаут для этого материала (я использую vue, потому что паспорт laravel использует его), но по архитектуре они одинаковы - это библиотеки MVVM.

Точка в MVVM должна привязать ваше представление к базовой модели данных, поэтому при обновлении обновления автоматически обновляется (т.е. обновления в dom автоматически обновляют модель и наоборот). Компоненты Vue - это простой способ повторного использования блоков кода, который действительно хорош для создания виджетов или сложных компонентов, но если вы просто хотите отображать данные из модели представления на свою страницу, тогда вам обычно не нужно создавать для этого.

Что касается генерации app.js, это полностью зависит от вашего проекта. Вы не можете привязать более одного вида модели к виду, поэтому, если вы планируете использовать несколько моделей представлений в своем проекте, вам нужно будет найти способ включения конкретной модели представления для вашей страницы. Для этого я, вероятно, удалю модель представления из app.js и сохраню загрузочный файл и зарегистрированные компоненты там, а затем создаст отдельные модели представлений, которые должны быть включены на каждую страницу.

Ответ 3

Если вы используете Laravel 5.5 и более поздние версии, это лучшее решение, если вы хотите использовать мощь Blade, но по-прежнему наслаждаетесь реактивностью VueJS.

fooobar.com/info/16932573/...