本文的示例代码参考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
浏览器打开http://localhost:8000/register 注册账号如下
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
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
@yield('css')
</head>
<body>
<!-- Scripts -->
<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>
@yield('script')
</body>
</html>
vim resources/views/auth/register.blade.php
@section('css')
<link href="{{ mix('css/register.css') }}" rel="stylesheet">
@endsection
@section('script')
<script src="{{ mix('js/register.js') }}"></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
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<!-- Styles -->
<link href="vendor/jquery-easyui-1.6.3/themes/default/easyui.css" rel="stylesheet">
<link href="vendor/jquery-easyui-1.6.3/themes/icon.css" rel="stylesheet">
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
@yield('css')
</head>
<body>
<!-- Scripts -->
<script src="vendor/jquery-easyui-1.6.3/jquery.min.js"></script>
<script src="vendor/jquery-easyui-1.6.3/jquery.easyui.min.js"></script>
<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>
@yield('script')
</body>
</html>
vim resources/views/home.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
You are logged in!
</div>
</div>
</div>
<div class="easyui-tabs" style="width:700px;height:250px">
<div title="About" style="padding:10px">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>
<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
This is the help content.
</div>
</div>
<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</table>
</div>
</div>
@endsection
关于EasyUI更多介绍 可以参考JQuery EasyUI中文网
