效果展示
技术栈
前端：React, Next.js, Tailwind CSS , TypeScript
后端-CMS：Sanity
项目前后端初始化
前端：Next.js, Tailwind 项目文件架构——自动生成
打开终端，运行命令：
npx create-next-app --example with-tailwindcss <项目名>
- ❗注意：运行上述命令时，关闭所有代理，含GitHub加速器，避免出现 proxy-代理报错
成功提示：
-
- 自动生成项目文件夹及相关配置文件
后端CMS：Sanity——新建项目
Sanity 官网登录，终端输入安装命令：
npx -y @sanity/cli init --template empty --create-project "Sanity Project" --dataset production
- 成功提示：
输入后端项目文件初始化命令：
sanity init --coupon sonny2022
- 成功提示：
上下键选择项目类型：Blog > enter
- 官网登录：即可看到新建的项目 www.sanity.io/manage
- 项目文件夹中可见新生成的> Sanity后台项目文件夹
运行开发环境
- 运行
npm run dev
组件开发——Header
打开 /index.tsx，删除 main, footer部分
根目录创建 /component 文件夹 > Header.tsx
- 安装 React 代码提示插件：
- 效果：输入
rfce> 提示：ReactFunctionExportComponent
运用 Next.js 标签组件
- 页面预加载：pre-fetch data from the linked page by default
运用 Tailwind CSS，调整样式
- 安装 Tailwind CSS 代码提示插件：
