在Laravel 5.3中使用Vue.js. [英] Using Vue.js in Laravel 5.3
问题描述
在5.3之前的Laravel项目中，我使用了这样的脚本标签来使用Vue.js：
In Laravel projects prior to 5.3 I've utilised Vue.js using the script tag like this:
<script type="text/javascript" src="../js/vue.js"></script>
然后我会创建一个特定于该页面的Vue实例，如下所示：
I would then create a Vue instance specific for that page like this:
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
然后将其绑定到我的HTML中的相关div #id。
and then bind it to the relevant div#id in my HTML.
现在，在Laravel 5.3中捆绑了Vue.js，我完全清楚我可以使用gulp / elixir来使用文档中描述的组件，但是，我的问题是如果我想要的话像我刚刚提到的那样创建一个Vue.js实例，即我为给定页面（不是组件）严格创建Vue.js实例的方法我该如何做？
Now, in Laravel 5.3 Vue.js comes bundled and I am fully aware that I can use components as described in the docs by using gulp/elixir, however, my question is if I want to create a Vue.js instance like I just mentioned, i.e. where I create a Vue.js instance strictly for a given page (not a component) how do I do it?
我是否像以前那样通过在脚本标签中导入vue.js库来设置它，还是可以使用生成的app.js？
Do I set it up like I used to by importing the vue.js library in a script tag or can I use generated app.js?
我不应该这样做，我应该为所有东西创建组件吗？
Am I not supposed to do it this way, should I be creating components for everything?
对我来说，为我做的事情制作组件是没有意义的只使用一次 - 我认为组件的目的是它们可以重复使用 - 你可以在不止一个地方使用它。如Vue.js文档中所述：
For me, it doesn't make sense to make a component for something I am only using once - I thought the purpose of components was that they are reusable - you can use it in more than one place. As mentioned in the Vue.js docs:
组件是Vue.js最强大的功能之一。它们可以帮助您扩展基本HTML元素以封装可重用代码。
任何建议都将不胜感激，谢谢！
Any advice would be appreciated, thanks!
推荐答案
我会用Webpack离开Laravel。这使您能够添加一些良好的Webpack配置。加上 gulp watch 现在在Homestead vagrant VM中工作，因为它将使用Webpack来监视文件更改。并查看异步组件。
I'd leave Laravel the way it comes, with Webpack. This gives you the ability to add some good Webpack configuration. Plus gulp watch works inside the Homestead vagrant VM now since it will be using Webpack to watch the file changes. And also check out async components.
现在关于每页单独的Vue实例的问题......让我们从app.js开始......
Now on to your question regarding separate Vue instances per page...let's start with app.js...
App.js
首次安装Laravel 5.3时，你会发现 app.js 切入点。让我们注释掉主要的Vue实例：
App.js
When you first install Laravel 5.3, you'll find an app.js entry point. Let's comment out the main Vue instance:
resources / assets / 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 文件仍然是放置到全局的东西，所以这里添加的组件可用于任何包含它的页面脚本（例如上面看到的示例组件）。
The app.js file still remains a place to for global stuff, so components added here are available (such as the example component seen above) to any page script that includes it.
欢迎页面脚本
现在让我们创建一个代表欢迎页面的脚本：
Welcome Page Script
Now let's create a script that represents a Welcome Page:
resources / assets / js / pages / 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'
}
})
博客页面脚本
现在让我们创建另一个代表的脚本博客页面：
Blog Page Script
Now let's create another script that represents a Blog Page:
resources / assets / js / pages / 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'
}
})
问候组件
resources / assets / js /components/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附带的刀片视图：
Welcome Blade View
Let's update the welcome blade view that ships with 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>
博客视图的想法是一样的。
The idea would be the same for the blog view.
Elixir
现在使用Elixir将Webpack配置选项与其自身合并的能力将所有内容整合到您的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 已发布。
Run gulp or gulp watch and you'll see both welcome.js and blog.js published.
思考
我现在正在使用SPA路线来谈谈网络应用并且只是使用Laravel作为后端API（或任何其他语言/框架）。我已经看到一些Vue SPA在Laravel中构建的例子，但我认为它应该是一个完全独立的repo /项目，独立于后端。 SPA中没有涉及Laravel / PHP模板视图，因此请单独构建SPA。顺便说一下，SPA会有页面组件（通常由VueRouter调用，当然也会由更多嵌套组件组成......请参阅下面的示例项目链接）。
Thoughts
I'm currently going the SPA route when it comes to "web apps" and just using Laravel as the backend API (or any other language/framework). I've seen some examples where Vue SPA is built in Laravel, but I really think it should be a completely seperate repo/project, independent of the backend. There's no Laravel/PHP templating views involved in an SPA, so build out the SPA separately. BTW, the SPA would have "page" components (which are usually called by VueRouter and of course would be made up of more nested components...see my example project link below).
然而，对于网站，我认为Laravel仍然是提供刀片视图的不错选择，而且无需为此提供SPA。你可以做我在这个答案中描述的内容。此外，您可以将您的网站连接到您的网络应用程序。在您的网站上，您将拥有一个登录链接，该链接将用户从网站到webapp SPA进行登录。您的网站仍然是SEO友好的（虽然有很好的证据表明Google也在SPA javascript网站上看到内容）。
However, for the "web site" I think Laravel is still a good choice for serving blade views and no need to go SPA for that. You can do what I've described in this answer. Also, you can connect your website to your webapp. On your website, you would have a "login" link that will take a user from the website to the webapp SPA to login. Your website remains SEO friendly (although there is good proof that Google is seeing content on SPA javascript sites as well).
为了了解SPA方法，我已经在Vue 2.0中举了一个例子： https://github.com/prograhammer/example-vue-项目（效果很好，但仍在进行中）。
For a look at an SPA approach, I've put up an example in Vue 2.0 here: https://github.com/prograhammer/example-vue-project (it works great, but still in progress).
修改：
You may want to also checkout the Commons Chunk Plugin. This way browsers can cache some shared module dependencies separately. Webpack automatically can pull out shared imported dependencies and put them in a separate file. So that you have a both a common.js(shared stuff) and a welcome.js on a page. Then on another page you would again have common.js and blog.js and the browser can reuse the cached common.js.
这篇关于在Laravel 5.3中使用Vue.js.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
