在开始开发我们的在线工具箱项目之前，我们需要先配置好必要的开发环境。本文将指导你完成所有环境配置步骤。
安装 Node.js
- 访问 Node.js 官网
- 下载并安装 LTS（长期支持）版本
- 安装完成后，打开终端验证安装：
# 检查 Node.js 版本
node --version
# 检查 npm 版本
npm --version
确保 Node.js 版本 >= 16.0.0。
安装 pnpm
我们将使用 pnpm 作为项目的包管理工具，它比 npm 更快、更节省空间。
- 使用 npm 安装 pnpm：
# 使用 npm 安装 pnpm
npm install -g pnpm
# 验证安装
pnpm --version
- 验证 pnpm 安装成功后，我们就可以使用它来管理项目依赖了。
安装 Trae
访问 Trae 官网 下载安装即可。
安装 Git
- 访问 Git 官网
- 下载并安装 Git
- 配置 Git 全局设置：
# 设置用户名和邮箱
git config --global user.name "你的名字"
git config --global user.email "你的邮箱"
# 验证配置
git config --list
创建 GitHub 账号
- 访问 GitHub
- 注册新账号或登录已有账号
- 配置 SSH 密钥（推荐）：
# 生成 SSH 密钥
ssh-keygen -t ed25519 -C "你的邮箱"
# 复制公钥内容
cat ~/.ssh/id_ed25519.pub
- 将公钥添加到 GitHub 账号设置中
安装 GitHub Desktop
按照官网 GitHub Desktop 的指引安装即可。
初始化项目
在开始开发之前，我们需要先初始化项目。我们将按照以下三个主要步骤来进行：
- 使用 pnpm 创建 Astro 项目
- 使用 GitHub Desktop 推送项目
- 安装配置 Tailwind CSS 和 DaisyUI
第一步：创建 Astro 项目
-
创建 Astro 项目：
你可使用以下 AI 提示词来初始化一个 Astro 项目：
初始化一个 Astro 项目，要求：
- 项目名称为 web-toolbox，
- 使用 pnpm 作为包管理工具，
- 使用 TypeScript 作为编程语言，
- 使用 Tailwind CSS 和 DaisyUI 作为样式库，
- 使用 Vue 作为组件库。
# 创建项目
pnpm create astro@latest web-toolbox
# 按照提示进行配置：
# 1. 选择基础模板
# 2. 选择安装依赖
# 3. 选择使用 TypeScript（推荐）
# 4. 选择 Strict 类型检查（推荐）
# 进入项目目录
cd web-toolbox
-
启动项目并查看：
你可使用以下 AI 提示词来启动项目：
启动项目
pnpm dev
打开其中展示的网址，会看到以下界面：
第二步：使用 GitHub Desktop 推送项目
由于 Astro 在初始化项目时已经完成了 Git 仓库的配置，我们只需要使用 GitHub Desktop 将项目推送到 GitHub 即可。
-
添加本地项目：
- 打开 GitHub Desktop
- 点击 “File” > “Add Local Repository”
- 选择项目所在目录（web-toolbox 文件夹）
- GitHub Desktop 会自动识别这是一个 Git 仓库
-
创建 GitHub 仓库：
- 点击 “Publish repository”
- 填写仓库信息：
- Name: web-toolbox
- Description: 在线工具箱项目
- 选择是否保持仓库私有（推荐选择 Public）
- 点击 “Publish Repository”
现在你的项目已经成功托管到 GitHub 上了。你可以通过 GitHub Desktop 方便地进行代码的提交、推送和拉取操作。
第三步：安装配置 Tailwind CSS
-
安装 Tailwind CSS 集成：
你可使用以下 AI 提示词来安装 Tailwind CSS 集成：
安装 Astro Tailwind 集成
pnpm astro add tailwind
-
配置 Tailwind CSS（
tailwind.config.mjs）：你可使用以下 AI 提示词来配置 Tailwind CSS：
配置 Tailwind CSS
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
}
-
创建全局样式文件（
src/styles/global.css）：你可使用以下 AI 提示词来创建全局样式文件：
创建 Tailwind CSS 全局样式文件
@tailwind base;
@tailwind components;
@tailwind utilities;
-
在布局文件中引入样式（
src/layouts/Layout.astro）：你可使用以下 AI 提示词来在布局文件中引入样式：
在布局文件中引入样式
---
import '../styles/global.css';
---
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>在线工具箱</title>
</head>
<body>
<slot />
</body>
</html>
第四步：安装配置 DaisyUI
-
安装 DaisyUI：
你可使用以下 AI 提示词来安装 DaisyUI：
安装 DaisyUI
# 安装 DaisyUI
pnpm add -D daisyui
-
在 Tailwind CSS 配置中添加 DaisyUI 插件（
tailwind.config.mjs）：你可使用以下 AI 提示词来在 Tailwind CSS 配置中添加 DaisyUI 插件：
在 Tailwind CSS 配置中添加 DaisyUI 插件
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
},
plugins: [require("daisyui")],
daisyui: {
themes: true,
},
}
- 验证安装：
- 重启开发服务器
- 在任意组件中使用 DaisyUI 的组件类名
- 确认样式是否正确应用
第五步：启用 SSR 模式
由于我们的在线工具箱需要通过后端 API 获取远程数据（如天气、汇率等），为了确保：
- 更好的 SEO 优化
- 更快的首屏加载
- 避免客户端 API 密钥泄露
- 统一的数据获取方式
我们需要启用 Astro 的 SSR（服务端渲染）模式。
-
修改
astro.config.mjs配置：你可使用以下 AI 提示词来修改
astro.config.mjs配置：
修改 Astro 配置启用 SSR 模式
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
import tailwind from '@astrojs/tailwind';
export default defineConfig({
output: 'server', // 启用 SSR 模式
adapter: 'node', // 使用 Node.js 适配器
integrations: [
vue(),
tailwind(),
],
});
-
创建环境变量文件（
.env）：你可使用以下 AI 提示词来创建环境变量文件：
创建环境变量文件来存储我的聚合数据 API 密钥
JUHE_API_KEY=你的聚合数据API密钥
-
在
.gitignore中添加环境变量文件：你可使用以下 AI 提示词来在
.gitignore中添加环境变量文件：
在 `.gitignore` 中添加环境变量文件
# 环境变量
.env
.env.*
!.env.example
第六步：安装配置 Vue
你可使用以下 AI 提示词来安装 Vue 集成：
安装 Astro Vue 集成
以下是我的到的代码，供你参考：
# 安装 Astro Vue 集成
pnpm astro add vue
启动开发服务器
pnpm dev
访问 http://localhost:4321 查看项目。
