javascript – 在Laravel 5.3中使用Vue.js.

在5.3之前的Laravel项目中,我使用脚本标记使用了Vue.js,如下所示：

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

然后我会创建一个特定于该页面的Vue实例,如下所示：

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

然后将其绑定到我的HTML中相关的div#id.

现在,在Laravel 5.3 Vue.js捆绑在一起,我完全清楚我可以使用gulp / elixir来使用文档中描述的组件,但是,我的问题是我是否想创建一个像我刚才提到的Vue.js实例,即我严格为给定页面(不是组件)创建Vue.js实例的地方我该怎么办？

我是否像以前一样通过在脚本标记中导入vue.js库来设置它,还是可以使用生成的app.js？

我不应该这样做,我应该为一切创建组件吗？

对我来说,为我只使用一次的东西制作一个组件是没有意义的 – 我认为组件的目的是它们可以重复使用 – 你可以在不止一个地方使用它.如Vue.js文档中所述：

Components are one of the most powerful features of Vue.js. They help you extend basic HTML elements to encapsulate reusable code.

任何建议将不胜感激,谢谢！

解决方法:

我会用Webpack离开Laravel.这使您能够添加一些良好的Webpack配置.此外,gulp手表现在可以在Homestead vagrant VM中运行,因为它将使用Webpack来监视文件更改.并查看异步组件.

现在回答你关于每页单独的Vue实例的问题……让我们从app.js开始……

App.js
首次安装Laravel 5.3时,您将找到app.js入口点.让我们注释掉主要的Vue实例：

资源/资产/ JS / app.js

/**
 * First we will load all of this project's 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's comment this out, each page will be its own main Vue instance.
//
// const app = new Vue({
//     el: '#app'
// });

app.js文件仍然是全局内容的地方,因此这里添加的组件可用于包含它的任何页面脚本(例如上面看到的示例组件).

欢迎页面脚本
现在让我们创建一个代表欢迎页面的脚本：

资源/资产/ 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'
    }
})

博客页面脚本
现在让我们创建另一个代表博客页面的脚本：

资源/资产/ 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>

欢迎Blade View
让我们更新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将Webpack配置选项与其自身合并的能力(在更多关于here的更多内容)中将所有内容整合到您的gulp文件中：

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中构建的例子,但我认为它应该是一个完全独立的repo /项目,独立于后端. SPA中没有涉及Laravel / PHP模板视图,因此请单独构建SPA.顺便说一下,SPA会有“页面”组件(通常由VueRouter调用,当然也会由更多嵌套组件组成…请参阅下面的示例项目链接).

但是,对于“网站”,我认为Laravel仍然是提供刀片视图的不错选择,而且无需为此提供SPA.你可以做我在这个答案中描述的内容.此外,您可以将您的网站连接到您的网络应用程序.在您的网站上,您将拥有一个“登录”链接,该链接将用户从网站到webapp SPA进行登录.您的网站仍然是SEO友好的(虽然有很好的证据表明Google也在SPA javascript网站上看到内容).

为了了解SPA方法,我在Vue 2.0中提供了一个示例：https://github.com/prograhammer/example-vue-project(它运行良好,但仍在进行中).

编辑：

您可能还想检查Commons Chunk Plugin.这样浏览器可以分别缓存一些共享模块依赖项. Webpack可以自动提取共享的导入依赖项并将它们放在一个单独的文件中.这样你就可以在页面上同时拥有common.js(共享内容)和welcome.js.然后在另一个页面上,您将再次拥有common.js和blog.js,浏览器可以重用缓存的common.js.

原文地址：https://codeday.me/bug/20191004/1851726.html

javascript – 在Laravel 5.3中使用Vue.js.

相关推荐