在 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>
然后将其绑定(bind)到我的 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 watch 现在可以在 Homestead vagrant VM 中运行，因为它将使用 Webpack 来监视文件更改。还要检查异步组件。
现在回答关于每页单独的 Vue 实例的问题...让我们从 app.js 开始...
App.js
当你第一次安装 Laravel 5.3 时，你会发现一个 app.js 入口点。让我们注释掉主要的 Vue 实例:
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 文件仍然是放置全局内容的地方，所以这里添加的组件(例如上面看到的 example 组件)对任何页面脚本都是可用的包括它。
欢迎页面脚本
现在让我们创建一个代表欢迎页面的脚本:
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'
}
})
博客页面脚本
现在让我们创建另一个代表博客页面的脚本:
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 附带的欢迎 Blade View :
<!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>
博客 View 的想法是一样的。
Elixir
现在，使用 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(或任何其他语言/框架)。我看过一些在 Laravel 中构建 Vue SPA 的例子，但我真的认为它应该是一个完全独立的 repo/项目，独立于后端。 SPA 中不涉及 Laravel/PHP 模板 View ，因此单独构建 SPA。顺便说一句，SPA 会有“页面”组件(通常由 VueRouter 调用，当然会由更多嵌套组件组成......请参阅下面我的示例项目链接)。
但是，对于“网站”，我认为 Laravel 仍然是提供 Blade View 的不错选择，并且无需为此使用 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。
关于javascript - 在 Laravel 5.3 中使用 Vue.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39708680/