laravel 初始化是不带 ui 这些的，可它天生支持 bootstrap，vue，react 这些。只需要安装配置下即可。
从零开始操作
这里以 laravel7 为例子，来使用 vue。
先安装 laravel 7
composer create-project laravel/laravel --prefer-dist testvue.cn "7.*"
cd testvue.cn
# 查看 laravel 的版本(发现是 7.22.4)
php artisan -V
# 创建 git 仓库
git init
git add .
git commit -m 'laravel 7.22.4 initialize'
浏览器访问 testvue.cn， 发现能正常访问到 laravel 基础页面（之前已经配合域名映射这些）。
安装 ui，以及依赖
composer require laravel/ui
php artisan ui vue
yarn --no-bin-links
yarn run dev
上边操作做了以下事情：
- 使用 composer 安装 laravel ui 软件包
-
生成 js/ui 文件和 package.json 修改
-
安装前端依赖项并编译开发环境的 js/css 文件
如果想要 laravel 自带的登录注册模板页面，可以用 php artisan ui vue --auth 替换 php artisan ui vue 命令。
如果有 cross-env 等问题，可以参考 https://www.pilishen.com/posts/reason-and-solution-why-npm-run-dev-cannot-find-cross-env-in-laravel5.4
配置和编写样例
# 创建一个 PageController 控制器
php artisan make:controller PageController
# 增加登录和注册路由
vim routes/web.php
Route::get('/login', 'PageController@login')->name('user.login');
Route::get('/register', 'PageController@register')->name('user.register');
修改 PageController.php，在其中增加下边两个函数。
public function login() {
return view('user/login');
}
public function register() {
return view('user/register');
}
再来创建 view 文件。这里，我们创建一个 layout 模型文件作为模板根文件。
resources/views/layouts/app.blade.php 模板文件
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ mix('/static/style/js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ mix('/static/style/css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
@yield('content')
</div>
</body>
</html>
修改 webpack.mix.js 使得生成的 js css 不直接在根目录下。加上 version,使得生成的文件带上 hash 值。
mix.js('resources/js/app.js', 'public/static/style/js')
.sass('resources/sass/app.scss', 'public/static/style/css').version();
mix 的使用可以看这里 https://learnku.com/docs/laravel-mix/4.0/basic-example/2955
再来看看 resources/views/user/login.blade.php ，
@extends('layouts.app')
仅有上边的一行。后边会填充。到目前为止，就这么多代码。现在来执行 yarn run dev 来生成 js css 文件。再访问 testvue.cn/login ，能正常访问，发现是个空白页。f12 可以查看到 dom 结构。发现已经在有效的使用着了。
开始着手 vue 项目
在 resources/js/components/ 下，已经有一个实例 vue 文件了。这里，我们在这个目录下新建一个 LoginComponent.vue 文件。内容如下：
<template>
<div>
<div class="row">
<form action="#" @submit.prevent="handleLogin">
<div class="form-row">
<input type="email" v-model="formData.email" />
</div>
<div class="form-row">
<input type="password" v-model="formData.password" />
</div>
<div class="form-row">
<button type="submit">Sign In</button>
</div>
</form>
</div>
</div>
</template>
<script>
import axios from "axios";
axios.defaults.withCredentials = true;
axios.defaults.baseURL = "http://xxx";
export default {
data() {
return {
formData: {
email: "",
password: "",
},
};
},
methods: {
handleLogin() {
axios.get("/sanctum/csrf-cookie").then((response) => {
axios.post("/login", this.formData).then((response) => {
console.log("登录成功!");
}).catch((error) => console.log(error)); // 如果验证不匹配
});
},
},
};
</script>
然后，在 resource /assets /js 中声明组件。
Vue.component('login-component', require('./components/LoginComponent.vue').default);
最后在 resources/views/user/login.blade.php 中使用组件。
@extends('layouts.app')
@section('content')
<login-component></login-component>
@endsection
到此，代码逻辑配置已经完成。我们执行 yarn run dev 来进行编译打包。成功后，访问 http://testvue.cn/login 是不是可以看到登录页面了。虽然看起来很丑。
在做项目的时候，我们可以执行 yarn run watch-poll 来实时生成变更的逻辑。