php laravel mix,Laravel框架 之 Mix

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

目录

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

Name: test1

Email: test1@zeaho.com

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.

data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">

Item IDProductList PriceUnit CostAttributeStatus

@endsection

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

参考