Write the Code. Change the World.

7月 31

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

上边操作做了以下事情:

  1. 使用 composer 安装 laravel ui 软件包

  2. 生成 js/ui 文件和 package.json 修改

  3. 安装前端依赖项并编译开发环境的 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 来实时生成变更的逻辑。

发表评论

电子邮件地址不会被公开。 必填项已用*标注