Try Laravel 5.3 + Vue2 with Element
I reposted an article to avoid high maintenance cost of the repo and as well, everyone can have a try, no more need to repy on cloing the repo.
First of all, the steps of how to install laravel is omitted, use laravel new blog
directly.
If you are a Chinese mainland user, you can use the composer image: http://pkg.phpcomposer.com
If there is a Warning
after new
like( Hmmm, anyway, I met the problem everytime. OTZ )
Warning: require(/Users/SkyAo/blog/bootstrap/../vendor/autoload.php): failed to open stream: No such file or directory in /Users/SkyAo/blog/bootstrap/autoload.php on line 17
Fatal error: require(): Failed opening required '/Users/SkyAo/blog/bootstrap/../vendor/autoload.php' (include_path='.:') in /Users/SkyAo/blog/bootstrap/autoload.php on line 17
PHP Warning: require(/Users/SkyAo/blog/bootstrap/../vendor/autoload.php): failed to open stream: No such file or directory in /Users/SkyAo/blog/bootstrap/autoload.php on line 17
PHP Fatal error: require(): Failed opening required '/Users/SkyAo/blog/bootstrap/../vendor/autoload.php' (include_path='.:') in /Users/SkyAo/blog/bootstrap/autoload.php on line 17
Script php artisan optimize handling the post-install-cmd event returned with error code 255
Next, you should manually run the two commands: composer install
and php artisan key:generate
. Otherwise, if everything goes on well, launching the server by php artisan serve
.
Since there are some problems in official package, we should edit laravel-elixir-webpack-official
in package.json
:
"laravel-elixir-webpack-official": "https://github.com/SebastianS90/laravel-elixir-webpack-official/tarball/22a3805996dfb7ca3e4137e9bdcb29232ba9f519"
Then, since we need to use Vue, run npm install
to install dependencies first. (As of Oct.6, 2016, Laravel has changed to Vue2 packages, we don't need to manually modify the dependencies.)
Next, install some packages Element
needed, of course, itself first: cnpm install --save element-ui
.
Then some extra loaders we will use:
cnpm install --save-dev css-loader style-loader vue-loader babel-loader babel-core
After all installed, configure webpack
in gulpfile.js
:
const path = require('path');
require('laravel-elixir-webpack-official');
laravel-elixir-webpack-official
Version < 1.0.9:
Adding the following codes after the comments.
Elixir.webpack.config.module.loaders = [];
Elixir.webpack.mergeConfig({
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: 'style!css'
}
]
}
});
Since mergeConfig
method will adding instead of overriding the config, while buble
will lead to the compile error, so we can only override the config. I have posted an issue to the author, hoping for better solution.
laravel-elixir-webpack-official
Version >=1.0.9:
elixir(mix => {
// Elixir.webpack.config.module.loaders = [];
Elixir.webpack.mergeConfig({
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css'
}
]
}
});
mix.sass('app.scss')
.webpack('app.js');
});
You can see the changes in: https://github.com/ElementUI/element-in-laravel-starter/commit/a988bd471af3b8253decde090e43b2163a0a4a8a#diff-b9e12334e9eafd8341a6107dd98510c9
In resources/assets/js/app.js
, we add:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
Vue.use(ElementUI);
And replace resources/views/welcome.blade.php
into:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<div id="app">
<example></example>
<el-button>Hello</el-button>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Run the commands: gulp watch
/ php artisan serve
。
After compiling finished, we can see the right result.
Of course, you can use a file: App.vue
and use it to develop with seperate front-end and back-end.
If you want to do, app.js
is like that:
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
Vue.use(ElementUI);
const app = new Vue({
el: '#app',
render: h => h(App)
});
App.vue
:
<template>
<div id="app">
<example></example>
<el-button>Hello Element</el-button>
</div>
</template>
<script>
import Example from './components/Example.vue';
export default {
name: 'app',
components: {
Example
}
};
</script>
Wish you using gladly.
Related Repo:
植入部分
如果您觉得文章不错,可以通过赞助支持我。
如果您不希望打赏,也可以通过关闭广告屏蔽插件的形式帮助网站运作。
您好,看了您的帖子,明白了如何在Laravel 中使用Element,但是有个疑问。
您如何同时使用Blade和VueJs?
按说 VueJS 已经搞定了几乎所有的 页面渲染,Blade 理论上渲染一个页面就可以了。
但是看了一些代码,都是Blade和Vuejs混用。
我想的是
在 Vue 和 Blade 一起用的时候,
页面的模板写在 .vue 文件内,laravel 主要通过 web.php 渲染一个首页,剩下的请求通过 api.php 返回JSON数据即可。
您能告诉我正确的使用方式么?
最初的 example 就是在做这个事情,这样的关键在于我们访问的路由还是由后端渲染的,前端只提供一些组件的解析,实际上这个时候
.vue
文件里的应该是组件的模板。如果你只要渲染首页而剩下的都用 JSON 交互,完全可以用前后端分离的思路去做。(当然 blade 渲染首页也可以)
我得赶快整理一下 Django 配合使用的文章啊
可以的 欢迎贡献