CodeSky 代码之空

随手记录自己的学习过程

Laravel 5.3 + Vue2 + Element试水

2016-10-07 12:09分类: PHP评论: 12

重新开一篇文章来写,这样可以免于仓库个人维护成本比较高,以及大家可以自己尝试配一下,不必依赖克隆仓库等。

首先这里省略安装Laravel的步骤,直接laravel new blog

如果你是中国大陆用户,可以尝试这个composer镜像:http://pkg.phpcomposer.com

如果在new之后发生了Warning(嗯,反正我每次都遇到了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

接下来就只能手动继续执行:composer installphp artisan key:generate,否则如果一切顺利,接下来使用php artisan serve就能够成功启动了。

由于官方包依旧存在问题,在gulp --production会报错,所以我们要修改package.json中的laravel-elixir-webpack-official,改为:

1"laravel-elixir-webpack-official": "https://github.com/SebastianS90/laravel-elixir-webpack-official/tarball/22a3805996dfb7ca3e4137e9bdcb29232ba9f519"
2

接下来,由于我们需要使用到Vue,首先运行npm install安装相关依赖。(截止2016年10月06日,本行撰写时,Laravel已经将依赖换成Vue2套装,不必人工修改依赖。

接下来,安装一些Element需要的包,首先当然是他自己:cnpm install --save element-ui

接下来安装一些我们需要的额外的loaders:

cnpm install --save-dev css-loader style-loader vue-loader babel-loader babel-core

全部安装完成后,配置一下gulpfile中的webpack

1const path = require('path');
2require('laravel-elixir-webpack-official');
3

laravel-elixir-webpack-official版本小于1.0.9:

然后在注释后加入:

1Elixir.webpack.config.module.loaders = [];
2
3Elixir.webpack.mergeConfig({
4    resolveLoader: {
5        root: path.join(__dirname, 'node_modules'),
6    },
7    module: {
8        loaders: [
9	        {
10	            test: /\.js$/,
11	            loader: 'babel',
12	            exclude: /node_modules/
13	        },
14	        {
15	            test: /\.css$/,
16	            loader: 'style!css'
17	        }
18        ]
19    }
20});
21

这里因为mergeConfig方法会追加而不会覆盖包内的配置信息,而buble会导致无法正常的编译,所以我们只能直接覆盖掉配置,比较无奈,向该包作者提了一个issue,期待有更好的方法。

laravel-elixir-webpack-official版本大于等于1.0.9:

1elixir(mix => {
2    // Elixir.webpack.config.module.loaders = [];
3
4    Elixir.webpack.mergeConfig({
5        resolveLoader: {
6            root: path.join(__dirname, 'node_modules'),
7        },
8        module: {
9            loaders: [
10                {
11                    test: /\.css$/,
12                    loader: 'style!css'
13                }
14            ]
15        }
16    });
17
18    mix.sass('app.scss')
19       .webpack('app.js');
20});
21

可见:https://github.com/ElementUI/element-in-laravel-starter/commit/a988bd471af3b8253decde090e43b2163a0a4a8a#diff-b9e12334e9eafd8341a6107dd98510c9

之后在resources/assets/js/app.js中我们加入:

1import ElementUI from 'element-ui';
2import 'element-ui/lib/theme-default/index.css';
3
4Vue.use(ElementUI);
5

resources/views/welcome.blade.php改为:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>Example</title>
6</head>
7<body>
8  <div id="app">
9    <example></example>
10    <el-button>Hello</el-button>
11  </div>
12  
13  <script src="{{ asset('js/app.js') }}"></script>
14</body>
15</html>
16

运行命令gulp watchphp artisan serve

等待编译完成后,我们就能看到正确的结果了。

当然,你可以直接引入一个App.vue文件,使用它来进行前后端分离式的开发。

app.js大概像这样:

1import App from './App.vue';
2import ElementUI from 'element-ui';
3import 'element-ui/lib/theme-default/index.css';
4
5Vue.use(ElementUI);
6
7const app = new Vue({
8  el: '#app',
9  render: h => h(App)
10});
11

App.vue

1<template>
2  <div id="app">
3    <example></example>
4    <el-button>Hello Element</el-button>
5  </div>
6</template>
7<script>
8  import Example from './components/Example.vue';
9  export default {
10    name: 'app',
11    components: {
12      Example
13    }
14  };
15</script>
16

祝大家使用愉快。

相关仓库:

评论 (8)

dansan2017年3月29日 15:29

我 gulp watch ,php artisan serve 都成功了,但是看到的页面一直是 Whoops, looks like something went wrong. 请问什么原因?? 我的gulpfile.js var elixir = require('laravel-elixir'); const path = require('path'); require('laravel-elixir-vue-2'); 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'); });

dansan2017年3月29日 15:01

const path = require('path'); require('laravel-elixir-vue-2'); 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'); }); 提示elixir undefined

dansan2017年3月29日 14:44

你好,下载的element-in-laravel-starter里面没有gulpfile.js,自己新建gulpfile.js 总是报各种错,请问是什么原因呢?

kuangkwan2017年2月7日 15:48

请问 如何在开发过程中使用热更新?

seed2017年1月17日 16:04

cnpm install --save-dev css-loader style-loader vue-loader babel-loader babal-core babal-core => babel-core ?

敖天羽2017年1月17日 23:08

是的 打错了 谢谢提醒

vue-star2016年12月18日 13:36

因为app.js是在每个页面都会引入的,这样其它页面引入app.js 也都是你那个example了。。。

joywen2017年2月14日 11:43

想问一样的问题 最后你那有解决吗?求解

栗子2017年6月5日 14:44

同求

vue-star2016年12月18日 13:32

看到在 app.js 这样写 import App from './App.vue'; const app = new Vue({ el: '#app', render: h => h(App) }); 目前只有一个页面 那新增一个页面呢

敖天羽2016年12月20日 23:26

那就采用上面那种,下面是给前后端分离用的,也就是前端是 SPA。上面那种只要加入那几句就行了,不需要对 Laravel 生成的文件做其他更改。

任宝宝2016年11月28日 10:33

不错的教程~~~赞赞赞~~