Vite 成为 Laravel 默认的前端打包器,从零创建基于 Vite 的项目

分类: 编程
日期: 2022-07-02
浏览: 447

Taylor Otwell大佬在6月28日宣布Vite正式成为了Laravel的前端打包工具🎉🎉🎉,接触Laravel至今已有4年时间,从Laravel5开始,那个时候Laravel主打的前端技术还只是Blade,与Bootstrap结合颇深,到后来Livewire、Alpinejs、TailwindCSS、Inertiajs的出现,Laravel作为全栈式框架在前端方面也迎来了重大改变,作为开发者的我们选择也越来越多。但其实到目前为止,不二使用过Livewire、Alpinejs、TailwindCSS唯独没有使用过Inertiajs,因为之前的编译工具是laravel-mix,它是对webpack的包装,随着项目越来越大,编译的时间也越来越长,慢的同时还特别耗性能,往往是写好几个地方才敢保存看下效果,效率实在是低。之前不二翻译过Laravel Vite的文档,还说有时间折腾一下在Laravel中集成Vite呢,没想到这么快官方就集成了,终于能愉快地全栈式开发了。

创建Laravel项目

这个不必多说,此乃万丈高楼之基石。

laravel new laravel

cd laravel

composer安装必要的组件

Inertia与Laravel的适配器
composer require inertiajs/inertia-laravel
Ziggy

GitHub地址:https://github.com/tighten/ziggy.git

作用:在JavaScript中使用Laravel路由。直白点就是在Laravel中定义的路由,在JavaScript中可以通过Ziggy提供的route()函数获取到,且route()函数的使用感受与Laravel的route()函数基本一致。

composer require tightenco/ziggy

生成中间件

php artisan inertia:middleware

生成中间件后,在App\Http\Kernel中注册HandleInertiaRequests中间件,作为web中间件组中的最后一项。

'web' => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,
],

创建Blade根模板文件

resources/views目录下创建app.blade.php文件,插入必要的指令。

  • @routes - 使用Ziggy的route()函数的指令
  • @vite - 添加前端资源的指令
  • @inertia - Inertia与Laravel的适配器默认使用app.blade.php视图,并通过该指令生成页面

如果不使用Inertiajs则不需要@inertia指令,且@vite指令需要同时包含app.jsapp.css,如果使用Inertiajs,还需要@inertiaHead指令以及@vite只需要包含app.js即可,app.cssapp.js中import!

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Ziggy提供,方便在js中使用route()函数 -->
    @routes
    <!-- Laravel Vite 提供,导入app.js,若未使用Inertiajs,则还需要导入app.css -->
    <!-- 写法:@vite(['resources/js/app.js', 'resources/js/app.css']) -->
    @vite('resources/js/app.js')
    <!-- Inertiajs提供,方便修改<head>中的内容 -->
    @inertiaHead
</head>
<body>
    <!-- Inertiajs提供,加载页面内容 -->
    @inertia
</body>
</html>

安装前端依赖

npm install

安装前端必要组件

npm install -D @inertiajs/inertia @inertiajs/inertia-vue3 @vitejs/plugin-vue vue@latest

配置vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel([
            'resources/js/app.js'
        ]),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

配置app.js

import './bootstrap'
import '../css/app.css'

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel'

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({el, app, props, plugin}) {
        return createApp({render: () => h(app, props)})
            .use(plugin)
            .use(ZiggyVue)
            .mount(el)
    }
})

增加路由和控制器

// web.php

Route::get('home', [\App\Http\Controllers\HomeController::class, 'index'])->name('home');
// app/Http/Controllers/HomeController

class HomeController extends Controller
{
    public function index()
    {
        // render中对应的根目录为 resources/js/Pages
        return Inertia::render('Home');
    }
}

创建页面

resources/js目录下新建Pages目录,Pages就是vue文件的根目录。在Pages下新建Home.vue

运行Vite

# 运行 Vite 开发服务器...
npm run dev

# 为生产环境打包和版本化资产...
npm run build

使用TailwindCSS

安装tailwindcss并初始化
npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p
配置tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
    ],
    theme: {
        extend: {}
    },
    plugins: []
}
配置resources/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;

重启npm run dev即可,修改任何配置文件,都要记得重启一下服务!

推荐的jsconfig.json

在项目根目录新建jsonconfig.json添加以下内容:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["resources/js/*"]
        }
    },
    "exclude": ["node_modules", "public"]
}

对于Inertiajs、Vite、Laravel Vite、TailwindCSS等不太熟练的伙伴,多读读官方文档或者不二文档,接着上手一两个项目,基本就能掌握了,加油!

版权声明
作者:不二
来源:不二博客
文章版权归作者所有,未经允许请勿转载。
共有 0 条评论
赶快发表评论吧~
发表评论