在Laravel使用Vue.js 5.3
在5.3以前,我使用Vue.js使用脚本标签这样的Laravel项目:在Laravel使用Vue.js 5.3
<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文档中提到的:
组件是Vue.js最强大的功能之一。它们可以帮助您扩展基本的HTML元素封装可重用的代码。
任何意见,将不胜感激,谢谢!
如果要合并vuejs到使用一饮而尽然后app.js你可以用灵药做到这一点:
首先,你需要laravel-仙丹 - browserify官方从NPM:
NPM安装laravel-仙丹 - browserify官方
然后把FOL降脂在的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's 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's 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>
现在只需运行一饮而尽
如果你不使用仙丹那么你应该能够做类似的事情与browserify或的WebPack包来回m npm。
编辑
要回答你的问题更新,你当然可以使用vue.js单个页面的。我个人使用knockout这个东西(我使用vue,因为laravel护照使用它),但在架构上它们是相同的 - 它们是MVVM库。
在MVVM点是到视图绑定到底层的数据模型,所以当一个更新其它被自动更新(即更新在DOM自动更新模型和副沃瑟)。 Vue的组件重用的代码,这是一个用于创建部件或复杂的部件确实不错块一个简单的方法,但如果你只是希望呈现到您的网页从视图模型数据,那么你就不会通常需要创建一个组件。
至于产生app.js,这完全取决于你的项目。您不能将多个视图模型绑定到视图,因此如果您计划在项目中使用多个视图模型,则需要找到一种方法来为页面添加特定的视图模型。为了实现这一点,我可能会从app.js中删除视图模型,并保留引导程序和注册组件,然后创建单独的视图模型,这些视图模型需要包含在每个页面上。
我会离开Laravel谈到,随着的WebPack的方式。这使您可以添加一些良好的Webpack配置。 Plus gulp watch
现在在Homestead vagrant虚拟机内工作,因为它将使用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
文件仍然为全球的东西的地方,所以这里添加的组件都可用(例如作为上面看到的example
组件)转换为包含它的任何页面脚本。
欢迎页脚本
现在让我们创建一个表示欢迎页面的脚本:
资源/资产/ JS /页/欢迎。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>
欢迎刀片查看
让我们更新的欢迎刀片认为附带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>
这个想法是博客视图也一样。
药剂
现在你一饮而尽文件中使用药剂的能力,有自己的(阅读更多有关here)合并的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,但我真的认为这应该是一个完全独立的回购/项目,独立的后端。 SPA中没有涉及Laravel/PHP模板视图,因此需要单独构建SPA。顺便说一句,在SPA会有“页”部件(其通常由VueRouter,当然所谓的会由多个嵌套组件的...看我下面的示例项目链接)。
但是,对于“网站”我认为Laravel仍然是服务于刀片意见和没有必要去SPA应该是一个不错的选择。你可以做我在这个答案中描述的。此外,您可以将您的网站连接到您的网络应用程序。在您的网站,你将有一个“登录”链接,将采取从网站用户webapp的SPA登录。您的网站仍然是搜索引擎友好的(虽然有很好的证明,谷歌看到的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
。
@ haakym请将此标记为正确答案。经过长时间的不懈追寻,在5.3中如何处理这个问题的正确解释之后,这真的是我所见过的唯一真实的解释。 – jacurtis
值得一提的是'php artisan make:auth'支持使用捆绑的“app.js”和“app.scss”的布局和视图...... –