使用 Vite、Alpine.js 和 Tailwind CSS 构建基础运行环境
简介
我主要的目的则是通过Preline UI 组件库快速构建微调一个自己需要的模板组件库，以及配合相对应的组件的使用方式。
ps：这几个技术栈我一个也不会，我通过AI辅助造个轮子，顺便学习一下相关技术栈。
本教程如何搭建一个结合了 Vite、Tailwind CSS、Preline UI、Vanilla JavaScript (ES6 Modules) 和 (可选的) Alpine.js 的现代化前端开发环境。这个技术栈非常适合构建静态优先、对 SEO 友好且具备现代交互功能的网站和主题模板。
Vite: 一个现代化的前端构建工具，它极大地提升了前端开发体验。Vite 通过在开发阶段利用浏览器原生的 ES 模块导入功能，实现了极快的冷启动和即时模块热更新。了解更多请访问：https://cn.vite.dev/guide/
Tailwind CSS: 一个高度可定制的、低级别的 CSS 框架，它为您提供了一系列原子化的 CSS 类，让您可以直接在 HTML 中快速构建用户界面，而无需编写自定义 CSS。了解更多请访问：https://tailwindcss.com/docs/installation/using-vite
Preline UI: 一个开源的 UI 组件库，提供了基于 HTML 和 Tailwind CSS 的预设计组件。您可以直接使用 Preline 提供的 HTML 结构，并结合其可选的 JavaScript 来添加交互功能。了解更多请访问：https://preline.co/
Alpine.js: (可选) 一个轻量级的 JavaScript 框架，用于在您的 HTML 标记中添加交互性。它借鉴了 Vue.js 和 Angular.js 的一些优秀特性，但保持了极简的体积和学习曲线，并且可以直接在 HTML 中使用。了解更多请访问：https://alpinejs.dev/essentials/installation
Vanilla JavaScript (ES6 Modules): 使用原生 JavaScript 并结合 ES Modules，可以实现代码的模块化和组织，按需为静态 HTML 组件添加更复杂的交互逻辑，或者集成其他现代 JS 插件。
先决条件
在开始之前，请确保您的系统上安装了以下软件：
Node.js: (建议使用 LTS 版本，例如 18.x 或更高版本)。您可以从 Node.js 官网 下载并安装。
npm: (通常随 Node.js 一起安装)。
步骤 1：创建 Vite 项目
首先，我们使用 Vite CLI 创建一个新的项目。我们将使用 vanilla (原生 JavaScript) 模板，因为这个方案的核心是静态 HTML 加上按需引入的 JS，不需要特定的框架模板。
打开您的终端并运行以下命令：
npm create vite@latest my-static-ui-app --template vanilla在提示时，选择 vanilla 作为模板，并选择 JavaScript。
进入项目目录：
cd my-static-ui-app安装项目依赖：
npm install运行一下验证安装是否成功：
npm run dev此时，您已经有了一个基本的 Vite 项目结构。
步骤 2：安装和配置 Tailwind CSS (v4.1+)
接下来，我们将 Tailwind CSS 添加到项目中。在 Tailwind CSS v4.1 及更高版本中，与 Vite 集成时流程有所简化。
安装 tailwindcss 和 @tailwindcss/vite：
npm install -D tailwindcss @tailwindcss/vite配置 Vite 插件：
使用 vanilla 模板创建的项目默认不会生成 vite.config.js，您需要手动在项目根目录创建该文件。
创建 vite.config.js 文件，并添加 @tailwindcss/vite 插件。
// vite.config.js
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite'; // 导入插件
export default defineConfig({
plugins: [
tailwindcss(), // 添加插件到 plugins 数组
// 其他可能的插件...
],
// 其他 Vite 配置...
});在 Tailwind CSS v4.1 中，通常不再需要运行 npx tailwindcss init -p 来生成 tailwind.config.js 和 postcss.config.js 文件。大部分配置可以直接在 CSS 文件中完成，或者 Tailwind 会自动检测您的模板文件。
步骤 3：导入 Tailwind CSS
在您的项目的主 CSS 文件中（通常是 src/style.css），添加 Tailwind 的 @import 指令。
/* src/style.css */
@import "tailwindcss";
/* 您可以在这里添加其他自定义 CSS */
确保这个 CSS 文件在您的应用入口文件 (src/main.js) 中被导入：
// src/main.js
import './style.css'; // 确保这里导入了您的 CSS 文件
// 您将在下一步在这里导入和初始化 Alpine.js 或编写 Vanilla JS 代码
步骤 4：引入 Preline UI (通过 npm 本地引入)
Preline UI 可以通过 npm 安装并本地引入其 CSS 和可选的 JavaScript 文件。这是在生产环境中更推荐的方式，可以更好地管理依赖和构建过程。
安装 Preline UI：
npm install preline然后，您可以在您的主 CSS 文件 (src/style.css) 中导入 Preline 的样式：
/* src/style.css */
@import "tailwindcss";
@import "preline/variants.css"; /* 导入 Preline 的样式 */
/* 您可以在这里添加其他自定义 CSS */
并在您的 JavaScript 入口文件 (src/main.js) 中导入并初始化 Preline 的 JavaScript：
// src/main.js
import './style.css'; // 导入您的 CSS 文件 (包含 Tailwind 和 Preline 样式)
import 'preline'; // 导入 Preline 的 JavaScript
// 您可以在这里添加其他全局 JavaScript 代码
console.log('Preline UI and main script loaded!');
注意: 如果同时使用 Preline 的 JS 和 Alpine.js，请注意它们对 DOM 的操作和事件监听是否会产生冲突。通常情况下，它们可以一起使用，但对于同一个元素的复杂交互，您可能需要选择其中一种方式来实现。
步骤 5：安装和使用 Alpine.js (可选)
如果您选择使用 Alpine.js 来添加轻量级交互，请按照以下步骤操作。如果您更倾向于完全使用 Vanilla JS，可以跳过此步骤。
安装 Alpine.js：
npm install alpinejs
在您的 JavaScript 入口文件 (src/main.js) 中导入并初始化 Alpine.js。确保在 Preline 的导入之后（如果选择本地导入 Preline JS）。
// src/main.js
import './style.css'; // 导入您的 CSS 文件 (包含 Tailwind 和 Preline 样式)
// 如果选择本地导入 Preline JS，在这里导入
// import 'preline'; // Preline JS 本地导入示例
import Alpine from 'alpinejs'; // 导入 Alpine.js
// 初始化 Alpine.js
window.Alpine = Alpine;
Alpine.start();
// 您可以在这里添加其他全局 JavaScript 代码
console.log('Alpine.js and main script loaded!');
现在您可以在 HTML 中使用 Alpine.js 的指令和 Tailwind CSS 类了。
步骤 6：编写 Vanilla JavaScript (ES6 Modules)
除了 Alpine.js 提供的声明式交互，您还可以使用 Vanilla JavaScript (ES6 Modules) 来处理更复杂的逻辑或集成其他现代 JS 插件。
在 src 目录下创建新的 .js 文件来组织您的 Vanilla JS 代码，例如 src/utils.js 或 src/components/my-component.js。
// src/utils.js
export function greet(name) {
console.log(`Hello, ${name}!`);
}然后在 src/main.js 中导入并使用这些模块：
// src/main.js
import './style.css'; // 导入您的 CSS 文件
// 在模块打包环境中，通过 import 'preline' 引入 Preline 的 JavaScript 是标准做法
import 'preline';
// 您可以在这里添加其他全局 JavaScript 代码
console.log('Preline UI and main script loaded!');
// 如果选择使用 Alpine.js，在这里导入并初始化
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
// 您可以在这里添加其他全局 JavaScript 代码
console.log('Alpine.js and main script loaded!');
// 导入您的 Vanilla JS 模块
import { greet } from './utils.js';
// 在页面加载后执行一些 Vanilla JS 代码
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM fully loaded and parsed');
greet('World');
// 您可以在这里编写代码来查找特定的 DOM 元素并添加事件监听器等
const myButton = document.getElementById('my-vanilla-js-button');
if (myButton) {
myButton.addEventListener('click', () => {
alert('Vanilla JS button clicked!');
});
}
});
console.log('Main script executed');在您的 index.html 中，您可以添加带有特定 ID 的元素，以便在 Vanilla JS 中选中并操作它们。
步骤 7：运行开发服务器
现在您可以运行开发服务器来预览您的网站：
npm run dev
打开浏览器访问显示的地址 (通常是 http://localhost:5173/)，您应该能看到带有 Tailwind CSS 和 Preline UI 样式、以及通过 Alpine.js 或 Vanilla JS 添加的交互功能的页面。
结论
恭喜您！您已经成功搭建了一个使用 Vite、Tailwind CSS、Preline UI、Vanilla JS 和 (可选的) Alpine.js 的现代化前端开发环境。这个强大的组合让您能够高效地构建静态优先、美观且具备丰富交互功能的网站和主题模板。您可以根据您的需求，使用 Preline UI 的组件结构，利用 Tailwind CSS 进行样式定制，并按需使用 Alpine.js 或 Vanilla JS 来添加交互逻辑和集成其他现代 JS 插件。
一个简单的案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>技术栈集成展示 </title>
<link rel="stylesheet" href="/src/style.css">
</head>
<body class="font-sans bg-gray-100 antialiased p-8 flex items-center justify-center min-h-screen">
<div class="container mx-auto bg-white shadow-lg rounded-lg p-8 max-w-2xl w-full space-y-8">
<h1 class="text-3xl font-bold text-center text-gray-800 mb-6">
技术栈集成展示
</h1>
<div class="p-4 bg-blue-100 border border-blue-400 rounded-md text-blue-800">
<h2 class="font-semibold mb-2">Tailwind CSS 示例:</h2>
<p>这个 div 的样式完全由 Tailwind CSS 类控制。</p>
<button class="mt-3 px-4 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 transition duration-300 ease-in-out">
Tailwind 按钮
</button>
</div>
<div class="p-4 bg-green-100 border border-green-400 rounded-md text-green-800">
<h2 class="font-semibold mb-2">Preline UI JS 示例 (悬停下拉菜单):</h2>
<p class="mb-4">将鼠标悬停在按钮上。</p>
<div class="m-1 hs-dropdown [--trigger:hover] relative inline-flex">
<button id="hs-dropdown-hover-event" type="button" class="hs-dropdown-toggle py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Actions
<svg class="hs-dropdown-open:rotate-180 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-60 bg-white shadow-md rounded-lg mt-2 dark:bg-neutral-800 dark:border dark:border-neutral-700 dark:divide-neutral-700 after:h-4 after:absolute after:-bottom-4 after:start-0 after:w-full before:h-4 before:absolute before:-top-4 before:start-0 before:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-dropdown-hover-event">
<div class="p-1 space-y-0.5">
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700" href="#">
菜单项 A
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700" href="#">
菜单项 B
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700" href="#">
菜单项 C
</a>
</div>
</div>
</div>
</div>
<div x-data="{ count: 0 }" class="p-4 bg-purple-100 border border-purple-400 rounded-md text-purple-800">
<h2 class="font-semibold mb-2">Alpine.js 示例:</h2>
<p class="mb-4">点击按钮增加计数。</p>
<button @click="count++" class="px-4 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600 transition duration-300 ease-in-out">
计数: <span x-text="count"></span>
</button>
</div>
<div class="p-4 bg-red-100 border border-red-400 rounded-md text-red-800">
<h2 class="font-semibold mb-2">Vanilla JS 示例:</h2>
<p class="mb-4">点击下方按钮触发弹窗。</p>
<button
id="vanilla-js-trigger-alert"
class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition duration-300 ease-in-out"
>
触发 Vanilla JS 弹窗
</button>
</div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
// src/main.js
// 导入您的主 CSS 文件，其中包含了 Tailwind CSS 和通过 Tailwind 插件集成的 Preline UI 样式
import './style.css';
// =================================================================
// Preline UI JavaScript 的导入和初始化
// 这行代码导入并初始化 Preline UI 的交互功能，
// 使得带有 data-* 属性的 Preline 组件（如下拉菜单、模态框）能够工作。
// 您不需要为每个 Preline 组件单独编写 JS。
// =================================================================
import 'preline';
console.log('Preline UI JavaScript imported and initialized.');
// 如果您选择使用 Alpine.js，在这里导入
// Alpine.js 用于在 HTML 中添加声明式的轻量级交互
import Alpine from 'alpinejs';
// 导入 Alpine.js Collapse plugin (如果使用 x-collapse 指令需要，否则可选)
// 需要先通过 npm 安装: npm install @alpinejs/collapse
// import collapse from '@alpinejs/collapse';
// 导入您的 Vanilla JS 模块 (如果存在 src/utils.js 文件)
// 如果您没有 utils.js 或其他自定义模块，可以注释掉或移除这行
// import { greet } from './utils.js';
// 在页面加载后执行所有初始化代码和 Vanilla JS 逻辑
// DOMContentLoaded 事件确保在 DOM 完全加载和解析后执行代码
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM fully loaded and parsed');
// =================================================================
// 初始化 Alpine.js
// 将 Alpine 暴露到 window 对象，以便在 HTML 中直接使用 x-data 等指令
// 在 DOMContentLoaded 中启动确保元素可用
// =================================================================
// 注册 Alpine.js 插件 (在 Alpine.start() 之前)
// 如果使用 x-collapse 指令，取消注释下一行
// Alpine.plugin(collapse);
window.Alpine = Alpine;
Alpine.start();
console.log('Alpine.js started'); // 添加日志确认 Alpine 启动
// 如果导入了 greet 函数，可以在这里调用
// greet('World');
// =================================================================
// Vanilla JS 示例的交互逻辑
// 这些代码查找特定的 DOM 元素并添加事件监听器
// =================================================================
// 获取 Vanilla JS 弹窗按钮元素 (来自 integrated-showcase-v2.html)
const vanillaAlertButton = document.getElementById('vanilla-js-trigger-alert');
// 如果找到了按钮，则添加点击事件监听器来触发弹窗
if(vanillaAlertButton) {
vanillaAlertButton.addEventListener('click', () => {
alert('Hello from Vanilla JS!'); // 触发浏览器自带的弹窗
});
}
// =================================================================
// 您可以在这里添加更多您的自定义 Vanilla JS 代码
// 例如，为其他元素添加事件监听器，处理表单提交等
// =================================================================
console.log('DOMContentLoaded code executed'); // 添加日志确认 DOMContentLoaded 执行
});
// 这行代码会在 main.js 文件被执行时立即输出到控制台 (在 DOMContentLoaded 之前)
console.log('Main script file loaded');
