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

2019-10-04 03:35:37 阅读：184 来源： 互联网

标签：laravel-5-3 javascript laravel 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.

标签：laravel-5-3,javascript,laravel,vue-js
来源： https://codeday.me/bug/20191004/1851726.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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