项目综合状态页开发笔记（二）完成前端项目的准备工作

前言

前端项目的构建，上一次仅执行到这一步 NextUI Docs - #create-next-app，即：仅仅是创建了一个能启动的 Next.js + NextUI 项目。
本次还需完成多项前端开发前的准备工作，包括：安装 NextUI 和其实现动画效果的库、安装 Tailwind CSS、添加 NextUI 组件库。
当然在最后，我编写了一个测试页面以确保所有准备工作都已完成。

操作步骤

一、安装 NextUI 和其实现动画效果的库

参考文档：NextUI Docs - #Add dependencies

yarn add @nextui-org/react framer-motion

yarn add @nextui-org/react framer-motion

二、安装 Tailwind CSS

参考文档：Install Tailwind CSS with Next.js

1. 安装 Tailwind CSS 依赖和生成配置文件

安装依赖：

yarn add -D tailwindcss postcss autoprefixer

yarn add -D tailwindcss postcss autoprefixer 正常情况下你的项目根目录中会存在 tailwind.config.js 和 postcss.config.js 这两个 Tailwind CSS 的配置文件，因此不需要再按照文档生成。

但如果由于某些原因你缺少了这两个关键的配置文件，那么可以使用下面的命令生成：
npx tailwindcss init -p

2. 配置模板路径

如果 tailwind.config.js 配置文件是构建项目时生成的，而不是上一步手动生成的，那么就不需要做这一步。

否则需要修改 tailwind.config.js 为如下内容：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 将 Tailwind CSS 对应的注解添加到主要的样式文件中

确保 ./styles/globals.css 文件为如下内容即可：

@tailwind base;
@tailwind components;
@tailwind utilities;

4. 让 NextUI 组件的 Tailwind CSS 样式生效

为 tailwind.config.js 添加一行内容使 Tailwind CSS 匹配 node_modules 中的 NextUI 组件：

import {nextui} from "@nextui-org/react";

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    // 添加下面这一行内容
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()]
}

export default config;

5. 让 `<NextUIProvider>` 标签包裹整个应用

确保 ./app/providers.tsx 文件内容，像下面这样存在 <NextUIProvider> 包裹整个应用即可，不需要完全一致：

'use client'

import {NextUIProvider} from '@nextui-org/react'

export function Providers({children}: { children: React.ReactNode }) {
  return (
    <NextUIProvider>
      {children}
    </NextUIProvider>
  )
}

6. 让 `<Providers>` 标签包裹根节点

确保 ./app/layout.tsx 文件内容，像下面这样存在 <Providers> 包裹根节点即可，不需要完全一致：

import {Providers} from "./providers";

export default function RootLayout({children}: { children: React.ReactNode }) {
  return (
    <html lang="en" className='dark'>
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

三、添加 NextUI 组件库

添加组件库 @nextui-org/react：

nextui add --all

一般情况下构建项目的时候，就已经添加了这个依赖：

新建页面进行测试

创建 ./app/test 目录，然后创建 ./app/test/page.tsx 文件，内容如下：

"use client";

import {Button} from '@nextui-org/react'
import {RadioGroup, Radio} from '@nextui-org/react'

export default function Test() {
  return (
    <div>
      <Button>Click me</Button>
      <RadioGroup
        label="Select your favorite city"
        >
        <Radio value="buenos-aires">Buenos Aires</Radio>
        <Radio value="sydney">Sydney</Radio>
        <Radio value="san-francisco">San Francisco</Radio>
        <Radio value="london">London</Radio>
        <Radio value="tokyo">Tokyo</Radio>
      </RadioGroup>
    </div>
  )
}

启动项目：

yarn run dev

访问 localhost:3000/test，看上去没有问题，光标移动到按钮上动画效果也正常：