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

添加新评论