Làm quen với Laravel và Vuejs sử dụng webpack

Bài viết này mình sẽ hướng dẫn các bạn Khởi tạo 1 Project với Laravel và Vuejs. Tại sao lại là Vuejs mà ko phải Angular hoặc React. docs, Bởi vì nó sử dụng Virtual DOM, Performance cao, Kích thước nhẹ, Và đặc biệt Laravel với phiên bản 5.3 và Vuejs cho thấy 1 sự kết hợp tuyệt vời.

Tạo 1 ứng dụng Web application sử dụng frontend hoàn toàn bằng javascript, với javascript thì các bạn cũng biết nó hay như thế nào, nhẹ, tốc độ nhanh, và đặc biệt nó làm cho ứng dụng của bạn trở nên sinh động hơn. Giống như món ăn vậy, css làm cho ứng dụng đẹp mắt hơn, js làm cho nó ngon hơn dễ ăn hơn. Thật khó trong thời đại này các bạn chấp nhận ăn một món ăn nhạt nhẽo.

Với mình nguyên liệu thì chỉ có docs, docs... mà thôi. Đùa chút thôi, phải hình dung là cần những gì thì mới biết đọc docs gì chứ. Server side php chắc chắn rồi ở đây mình sẽ dùng laravel 5.3. Databases, tạm thời cứ dùng mysql thôi. client side thì rõ rồi Vuejs. Và bây giờ làm thế nào để kết hợp được laravel và vuejs nhỉ.??? Cũng có khá nhiều cách đơn giản, các bạn có thể kéo file js từ CDN, hoặc dùng http://browserify.org/, v..v.. Nhưng với bài này mình sẽ hướng dẫn các bạn dùng Webpack

Kéo Project laravel phiên bản mới nhất về thôi. composer global require "laravel/installer" Done! Trong phiên bản 5.3 này mình sẽ giới thiệu qua 1 chút. laravel đã hỗ trợ sẵn Gulp vì vậy chúng ta quan tâm đến gulpfile.js để task runner. Npm chắc chắn rồi để kéo Vuejs và các thư viện khác về. Cái đầu tiên các bạn kéo

npm install webpack -g

Open file package.json lên nội dung của nó na ná như sau

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-14",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  }
}

Ngon.! các thư viện đã được default sẵn các bạn chỉ việc npm install là có đủ. Để config webpack Các bạn có thể tạo file

webpack --config webpack.config.js

Mình config đơn giản như sau

var path = require('path');
require('es6-promise').polyfill()

module.exports = {
    module: {
        loaders: [
        {
            test: /.vue$/,
            include: [path.resolve(__dirname, './src')],
            loader: 'vue'
        },
        {
            test: /.js$/,
            loader: 'babel',
            include: [path.resolve(__dirname, './src')],
            query: {
                presets: ['es2015'],
                plugins: ['transform-runtime'],
                compact: false
            }
        }]
    }
}

Các bạn đừng quên kéo package npm install es6-promise về nhé

Ok rồi đó tiếp tục quay lại với file gulpfile.js để cấu hình tiếp nào

const elixir = require('laravel-elixir');

// Keo cac thu vien vao de config
var path = require('path');
var webpackConfig = require('./webpack.config.js');
require('laravel-elixir-webpack-official');
require('laravel-elixir-vue-2');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application as well as publishing vendor resources.
 |
 */

elixir((mix) => {
    mix.sass('app.scss')
        .webpack(
        './app/assets/js/app.js',
        './public/dist'
    );
});
elixir.webpack.mergeConfig(webpackConfig);

Config đơn giản tạm tạm vậy thôi mình lười quá ko viết chi tiết hết được *_^ Nhìn vào đoạn code trên thì ta cũng mò ra được nó sẽ compilation file app.js vào thưc mục public/dist Các bạn có thể tìm hiểu tại sao lại phải compilation nhé. Một vài key words ECMAScript 6, javascript module, ...

Tiếp theo xem file /app/assets/js/app.js nào

/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

Ái chà phức tạp dần rồi đây! Nó kéo 1 file bootstrap chắc để boot khởi động và 1 components Example.vue vào

Sau đó Bind Mọi thứ vào element #app Mình đoán là thế thôi ko rõ nữa *_^

Bây giờ open file /resources/assets/js/components/Example.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Mình đoán ra có lẽ Vuejs sẽ bind đoạn html trong tags <template></template> vào element #app và run script console.log('Component mounted.')

Thử thôi

Vậy là mọi thứ liên quan đến config vuejs có vẻ đã ổn, Sau này khi code js các bạn sẽ tạo file js hoặc components trong /resources/assets/js để gulp compile ra file js bình thường để chạy nhé. Code js theo Module sẽ sướng hơn bao giờ hết. Rồi các bạn sẽ phải tin mình thôi *_ *.

Bây giờ sang terminal và run gulp waiting a minute... Done ! nó sẽ build 1 file /public/dist/app.js. Bây giờ thì đơn giản rồi

tạo 1 file html chứa thẻ <div id="app"><example></example></div> Các bạn đừng quên kéo file /public/dist/app.js vào trang html đấy nhé.

Nếu màn hình hiện lên I'm an example component! thì mình chúc mừng các bạn!