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:

植入部分

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

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

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

已有 4 条评论

  1. 西秦公子

    您好，看了您的帖子，明白了如何在Laravel 中使用Element，但是有个疑问。

    您如何同时使用Blade和VueJs？

    按说 VueJS 已经搞定了几乎所有的 页面渲染，Blade 理论上渲染一个页面就可以了。
    但是看了一些代码，都是Blade和Vuejs混用。
    我想的是

    在 Vue 和 Blade 一起用的时候，
    页面的模板写在 .vue 文件内，laravel 主要通过 web.php 渲染一个首页，剩下的请求通过 api.php 返回JSON数据即可。

    您能告诉我正确的使用方式么？

    回复
    1. 敖天羽

      最初的 example 就是在做这个事情，这样的关键在于我们访问的路由还是由后端渲染的，前端只提供一些组件的解析，实际上这个时候 .vue 文件里的应该是组件的模板。

      如果你只要渲染首页而剩下的都用 JSON 交互，完全可以用前后端分离的思路去做。（当然 blade 渲染首页也可以）

      回复
      1. zonghua

        我得赶快整理一下 Django 配合使用的文章啊

        回复
        1. 敖天羽

          可以的 欢迎贡献

          回复

添加新评论