Shadcn Landing Page 项目使用教程

Shadcn Landing Page 项目使用教程

shadcn-landing-pageFree Landing page template using Shadcn, React, Typescript and Tailwind项目地址:https://gitcode.com/gh_mirrors/sh/shadcn-landing-page

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

Shadcn Landing Page 项目的目录结构如下：

shadcn-landing-page/
├── public/
├── src/
│   ├── components/
│   ├── index.html
├── .eslintrc.cjs
├── .gitignore
├── LICENSE
├── README.md
├── components.json
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts

目录介绍

• public/: 存放公共资源文件。
• src/: 源代码目录，包含组件和其他源文件。
  • components/: 存放项目中使用的组件。
  • index.html: 项目的主 HTML 文件。
• .eslintrc.cjs: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• components.json: 组件配置文件。
• index.html: 项目的主 HTML 文件。
• package-lock.json: 锁定依赖版本文件。
• package.json: 项目依赖和脚本配置文件。
• postcss.config.js: PostCSS 配置文件。
• tailwind.config.js: Tailwind CSS 配置文件。
• tsconfig.json: TypeScript 配置文件。
• tsconfig.node.json: Node.js 环境下的 TypeScript 配置文件。
• vite.config.ts: Vite 配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 package.json 中的脚本部分。以下是一些关键的启动脚本：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  }
}

脚本介绍

• dev: 启动开发服务器。
• build: 构建生产环境版本。
• serve: 预览构建后的生产环境版本。

3. 项目的配置文件介绍

.eslintrc.cjs

ESLint 配置文件，用于代码风格检查和格式化。

postcss.config.js

PostCSS 配置文件，用于处理 CSS 文件。

tailwind.config.js

Tailwind CSS 配置文件，用于自定义 Tailwind CSS 的配置。

tsconfig.json

TypeScript 配置文件，用于 TypeScript 编译选项。

tsconfig.node.json

Node.js 环境下的 TypeScript 配置文件，用于 Node.js 项目的 TypeScript 编译选项。

vite.config.ts

Vite 配置文件，用于 Vite 开发服务器和构建工具的配置。

以上是 Shadcn Landing Page 项目的基本使用教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望这些信息能帮助你更好地理解和使用该项目。

shadcn-landing-pageFree Landing page template using Shadcn, React, Typescript and Tailwind项目地址:https://gitcode.com/gh_mirrors/sh/shadcn-landing-page