Re-open an article to write, so that you can avoid the warehouse personal maintenance costs are relatively high, and we can try to match it, do not have to rely on clone warehouse.

First of all, I will skip the Laravel installation step and go directly to Laravel New Blog.

If you are a Chinese mainland user, you can try this composer image: pkg.phpcomposer.com.

If a Warning occurs after new (well, I encounter OTZ every time anyway)

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 255Copy the code

The next step is to continue manually with composer Install and PHP Artisan key:generate, otherwise if all goes well, the next step is to start successfully using PHP Artisan Serve.

Next, since we need to use Vue, first run NPM Install to install the dependencies. (As of October 06, 2016, at the time of writing, Laravel has replaced the dependency with the Vue2 package without manual modification of the dependency.

Next, install some of Element’s required packages, starting with himself of course: CNPM install –save element-ui@next.

Next install some additional loaders we need:

cnpm install --save-dev css-loader style-loader vue-loader babel-loader babel-core
Copy the code

After the installation is complete, configure the webpack in gulpfile:

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

Then add the following comment:

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

Here, the mergeConfig method will append but not overwrite the configuration information in the package, and buble will cause the normal compilation, so we have to directly overwrite the configuration. We have no choice but to propose an issue to the author of the package, expecting a better method.

In resources/assets/js/app. After we join in js:

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

Vue.use(ElementUI);
Copy the code

The resources/views/welcome. Blade. PHP is changed to:




  
  Example


  
       

        
    
    Hello
  
       


  


Copy the code

Run the gulp watch and PHP artisan serve commands.

Once the compilation is complete, we should see the correct result.

Of course, you could just import an app. vue file and use it to do a separate front and back development.

App.js would look something like this:

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)
});
Copy the code

App. Vue:



Copy the code

Have fun with it.

Related warehouse:

  • Element
  • element-in-laravel-starter