Laravel框架 之 Mix

本文的示例代码参考mix-basic

目录

• Composer

• Auth

• Mix

  • Versioning

  • Source-Maps

  • Vendor-Extraction

  • JS-&-CSS

• EasyUI

Composer

composer create-project laravel/laravel mix-basic --prefer-dist "5.5.*"

cd mix-basic

Auth

docker run --name laravel-mix -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7.17

docker exec -i laravel-mix mysql -uroot -p123456  <<< "CREATE DATABASE IF NOT EXISTS basic DEFAULT CHARSET utf8 COLLATE utf8_general_ci;"

sed -i "" 's/DB_DATABASE=homestead/DB_DATABASE=basic/g' .env

sed -i "" 's/DB_USERNAME=homestead/DB_USERNAME=root/g' .env

sed -i "" 's/DB_PASSWORD=secret/DB_PASSWORD=123456/g' .env

php artisan make:auth

php artisan migrate

• 测试

php artisan serve

浏览器打开http://localhost:8000/register 注册账号如下

Name: test1

Email: [email protected]

Password: test1zeaho

Mix

cnpm i

Versioning

vim webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .version();

sed -i "" 's/asset/mix/g' resources/views/layouts/app.blade.php

cnpm run prod

Source Maps

vim webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
    .sourceMaps()
    .sass('resources/assets/sass/app.scss', 'public/css')
    .version();

cnpm run watch-poll

Vendor Extraction

vim webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
    .extract(['axios', 'bootstrap-sass', 'jquery', 'lodash', 'vue'])
    .sourceMaps()
    .sass('resources/assets/sass/app.scss', 'public/css')
    .version();

JS & CSS

vim resources/assets/js/register.js

console.log('register');

vim resources/assets/sass/register.scss

.panel-heading {
    color: red !important;
}

vim resources/views/layouts/app.blade.php

    
    
    @yield('css')


    
    
    
    
    @yield('script')

vim resources/views/auth/register.blade.php

@section('css')

@endsection

@section('script')

@endsection

EasyUI

下载并导入 EasyUI

mkdir public/vendor

cp -R jquery-easyui-1.6.3 public/vendor/

find public/vendor/jquery-easyui-1.6.3 -type d

public/vendor/jquery-easyui-1.6.3
public/vendor/jquery-easyui-1.6.3/themes
public/vendor/jquery-easyui-1.6.3/themes/default
public/vendor/jquery-easyui-1.6.3/themes/default/images
public/vendor/jquery-easyui-1.6.3/themes/icons

vim resources/views/layouts/app.blade.php

    
    
    
    
    @yield('css')


    
    
    
    
    
    
    @yield('script')

vim resources/views/home.blade.php

@extends('layouts.app')

@section('content')

    

        

            

                
Dashboard

                

                    @if (session('status'))
                        

                            {{ session('status') }}
                        
                    @endif

                    You are logged in!
                
            
        
        

            

                
jQuery EasyUI framework helps you build your web pages easily.
                

                    
easyui is a collection of user-interface plugin based on jQuery.
                    
easyui provides essential functionality for building modem, interactive, javascript applications.
                    
using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.
                    
complete framework for HTML5 web page.
                    
easyui save your time and scales while developing your products.
                    
easyui is very easy but powerful.
                
            
            

                This is the help content.
            
        
        

        

            

                
Item ID
                
Product
                
List Price
                
Unit Cost
                
Attribute
                
Status
            
        
    
    
    

@endsection

关于EasyUI更多介绍 可以参考JQuery EasyUI中文网

参考

• 2.6. 基础布局

• Compiling Assets (Laravel Mix)

• Laravel 的资源任务编译器 Laravel Mix