Laravel 5.3 + Vue2 + Element试水

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

首先这里省略安装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 install和php artisan key:generate，否则如果一切顺利，接下来使用php artisan serve就能够成功启动了。

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

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

接下来，由于我们需要使用到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：

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

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

然后在注释后加入：

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'
            }
        ]
    }
});

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

laravel-elixir-webpack-official版本大于等于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');
});

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

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

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';

Vue.use(ElementUI);

把resources/views/welcome.blade.php改为：

<!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>

运行命令gulp watch和php artisan serve。

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

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

则app.js大概像这样：

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>

祝大家使用愉快。

相关仓库：

植入部分

如果您觉得文章不错，可以通过赞助支持我。

如果您不希望打赏，也可以通过关闭广告屏蔽插件的形式帮助网站运作。

标签: 成品, 代码段, 命令, Vue

已有 12 条评论

  1. 任宝宝

    不错的教程~赞赞赞

    回复
  2. vue-star

    看到在 app.js 这样写
    import App from './App.vue';
    const app = new Vue({
    el: '#app',
    render: h => h(App)
    });

    目前只有一个页面 那新增一个页面呢

    回复
    1. 敖天羽

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

      回复
  3. vue-star

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

    回复
    1. joywen

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

      回复
    2. 栗子

      同求

      回复
  4. seed

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

    babal-core => babel-core ?

    回复
    1. 敖天羽

      是的 打错了 谢谢提醒

      回复
  5. kuangkwan

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

    回复
  6. dansan

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

    回复
  7. dansan

    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

    回复
  8. dansan

    我 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');

    });

    回复

添加新评论