HyperUI 项目使用教程

1、项目的目录结构及介绍

HyperUI 项目的目录结构如下：

hyperui/
├── app/
├── public/
├── src/
├── .eslintrc.json
├── .gitignore
├── LICENSE
├── README.md
├── jsconfig.json
├── next.config.mjs
├── package.json
├── postcss.config.mjs
├── prettier.config.mjs
├── tailwind.config.mjs
└── yarn.lock

目录介绍

• app/: 存放应用程序的主要代码文件。
• public/: 存放公共资源文件，如图片、字体等。
• src/: 存放源代码文件。
• .eslintrc.json: ESLint 配置文件，用于代码风格检查。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• jsconfig.json: JavaScript 配置文件。
• next.config.mjs: Next.js 配置文件。
• package.json: 项目依赖和脚本配置文件。
• postcss.config.mjs: PostCSS 配置文件。
• prettier.config.mjs: Prettier 配置文件，用于代码格式化。
• tailwind.config.mjs: Tailwind CSS 配置文件。
• yarn.lock: Yarn 依赖锁定文件。

2、项目的启动文件介绍

HyperUI 项目使用 Next.js 框架，启动文件主要包括 package.json 中的脚本配置和 next.config.mjs 配置文件。

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

• dev: 启动开发服务器。
• build: 构建生产环境代码。
• start: 启动生产环境服务器。
• lint: 运行代码风格检查。

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

export default nextConfig;

该文件配置了 Next.js 的一些基本设置，如严格模式等。

3、项目的配置文件介绍

HyperUI 项目包含多个配置文件，主要用于代码风格检查、构建工具配置等。

.eslintrc.json

{
  "extends": "next/core-web-vitals"
}

该文件配置了 ESLint，使用 Next.js 推荐的规则。

tailwind.config.mjs

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

该文件配置了 Tailwind CSS，指定了需要处理的文件路径和主题扩展。

postcss.config.mjs

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

该文件配置了 PostCSS，使用了 Tailwind CSS 和 Autoprefixer 插件。

prettier.config.mjs

module.exports = {
  semi: false,
  singleQuote: true,
}

该文件配置了 Prettier，指定了代码格式化的规则，如不使用分号、使用单引号等。

通过以上配置文件，HyperUI 项目可以实现代码风格统一、构建优化等功能。