# sishanzhen

**Repository Path**: houcloud/sishanzhen

## Basic Information

- **Project Name**: sishanzhen
- **Description**: 这是一个作业，用 NextJS tailwindCSS开发
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-04
- **Last Updated**: 2024-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 家乡网站 - 广西来宾寺山镇（期末考试）

### 线上预览地址 [https://sishan.houcloud.com](https://sishan.houcloud.com)

### 前言
> 本项目采用了React、Next.js和Tailwind CSS进行开发。这个选择是基于多个因素的考虑，其中包括React的声明式组件和面向对象开发模式，这使得开发过程更符合人类思维方式，也更符合软件工程的发展趋势。通过使用React，我们能够以组件化的方式构建应用程序，将复杂的UI拆分为可重用的部分，提高了代码的可维护性和可重用性。

> Next.js作为React的扩展框架，为我们提供了更好的服务器渲染(SSR)和静态网站生成(SSG)的能力。这使得我们能够更好地优化网站的性能和SEO，并提供更好的用户体验。Next.js还提供了路由管理和数据预取等功能，简化了开发过程，提高了开发效率。

> 另外，我们选择了Tailwind CSS作为CSS框架，因为它提供了一套强大的工具和样式库，能够快速构建现代化的用户界面。Tailwind CSS的原子化类名系统使得样式定义和重用更加灵活和高效。通过使用Tailwind CSS，我们能够快速实现设计师的视觉效果，并且可以轻松地自定义样式以满足项目的需求。

> 这个技术栈的选择不仅提高了开发效率和代码质量，还使得团队协作更加顺畅。React的组件化开发模式和Next.js的路由管理使得团队成员可以并行开发不同的功能模块，而无需担心冲突和依赖问题。同时，Tailwind CSS的样式库和原子化类名系统使得团队成员能够快速理解和使用样式，提高了协作效率。

### 责任声明

> 声明：本项目采用框架React+NextJS+TailwindCSS进行开发，尽可能地遵循了W3C标准，支持响应式。
> 本项目为本人（黄运厚）的2023年上学期的期末考试项目，仅作为考试成绩评定以及学习参考，
> 请勿用于商业和其他违法犯罪活动。


### 技术栈以及第三方框架列表
- [TypeScript - TypeScript is JavaScript with syntax for types.](https://www.typescriptlang.org/)
- [React - The library for web and native user interfaces](https://react.org)
- [NextJS - The React Framework for the Web](https://nextjs.org)
- [TailwindCSS - Rapidly build modern websites without ever leaving your HTML.](https://tailwind.com)
- [Swiper - The Most Modern Mobile Touch Slider](https://swiperjs.com/)

大部分UI界面和布局借助TailwindCSS样式纯手写

### 运行以及开发项目
运行本项目需要 `NodeJS 18.13.1+`
并推荐使用 [Webstorm](https://jetbrains.com/webstorm) 或者 [VSCode](https://code.visualstudio.com/) 编辑器

在项目根目录运行以下命令:
```bash
# 这里推荐使用pnpm进行管理

# 安装依赖
pnpm install


# 运行开发
pnpm dev

# 或者用自带的npm运行

# 安装依赖
npm install

# 运行开发
npm run dev
```
### 其他注意事项

开发模式第一次启动所有页面加载会比较慢，最佳效果请在2024年6月之前浏览: sishan.houcloud.com，或者本地运行 `npm run build` `npm run start` 命令