探索 Tall 技术栈 = Tailwind CSS + Alpine.js + Laravel + Livewire

自动摘要

正在生成中……

前一段时间意外看到一种新的技术栈，tall ，准备学习一下，用来做点东西。

• Tailwind CSS
• Alpine.js
• Laravel
• Livewire

项目主页 https://github.com/laravel-frontend-presets/tall/

今天构建php-fpm的镜像时，顺便把这套弄起来了，把它装进了容器，按照github的安装说明 ， 先安装laravel（我把laravel 安装器打包进了镜像）

安装

创建项目： laravel new 你的项目名

再进入项目依次执行：

composer require livewire/livewire laravel-frontend-presets/tall
php artisan ui tall --auth
npm install
npm run dev

它使用了vite 来管理前端资源，执行完打开网站会报错，这时需要执行 npm run build 来构建一次，可以正常访问，但不会监听修改,首页如图：

修改vite开发服务器配置

为了让vite能监听修改，需要把vite开发服务器的默认监听端口5170映射出来，也就是加上docker启动时的端口映射参数，而且由于它默认在本地监听，不会暴露到外面，还需要修改监听地址为 0.0.0.0。 配置位于代码目录下的 vite.config.js，修改如下：

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'

export default defineConfig({
    server: {
        host: '0.0.0.0', // 这里设置监听的IP
        // port: 5173 // 这里设置监听的端口
    },
    plugins: [
        laravel({
            input: ['resources/sass/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
})

OK，这样就能监听 resources/sass/app.scss及 resources/js/app.js下的修改了。vite下的更多配置项参考官方文档