这个WenDoraAi官网的实战系列估计会更得比较慢基本上是WenDoraAi官网代码写到哪就更到哪并且是挤时间去进行汇总和沉淀。这篇内容主要是针对项目的插件的安装与初次组件的涉及。有些目录可能会和前两个实战项目有些变更如果是跟着做WenDoraAi官网项目练手的需要多注意一下哦。一项目基础开发的插件推荐工欲善其事必先利其器官网的技术栈主要是 Next.js React TypeScript Tailwind CSS1. 基础开发插件ES7 React/Redux/React-Native/JS snippets快速生成常用 React/TypeScript 代码片段。Prettier - Code formatter代码自动格式化保持风格统一。ESLint实时语法检查配合项目里的 eslint 配置使用。Path Intellisense路径自动补全import 路径更方便。2. Tailwind CSS 相关Tailwind CSS IntelliSenseTailwind 类名自动补全、语法高亮、错误提示这个真的要名字太多了太难记了也可以翻翻我前面发过的教程看看Tailwind CSS 完整类名对照表中文版。3. TypeScript/JSX 支持TypeScript HeroTypeScript 导入/跳转/重构增强。Auto Import自动补全并导入组件、函数等。其他最基础的vscode插件就不在这里描述啦只针对常规开发项目来说哈二、目录更新为更好的管理有进行更改哦三、Next.js的固定目录Next.js 有一些文件夹名字是固定的具有特殊意义不能随意更改否则会导致WenDoraAi官网框架功能失效。常见的固定文件夹有public用于存放静态资源图片、favicon 等通过 / 路径直接访问如 img src/logo.png / 或 background-image: url(/banner.jpg)pages 或 apppages 是传统路由目录app 是新版的 App Router 目录。二者之一必须存在且名字不能改。node_modules存放依赖包npm/yarn/pnpm 自动管理不能改名。styles可选但常见虽然不是强制但官方脚手架会生成 styles 文件夹用于存放全局样式。api在 pages/api 或 app/api 下用于存放 API 路由必须放在 pages/api 或 app/api 下不能改名。.next构建产物目录由 Next.js 自动生成不能改名。既然这里都有public那styles呢怎么判断什么该放public什么该放styles1、放在 public 的图片需要在 HTML、JSX、CSS 中通过 URL 直接访问如 img src/logo.png / 或 background-image: url(/banner.jpg)。需要被浏览器直接请求或被 SEO、社交分享等外部服务访问。例如WenDoraAi官网网站 logo、banner、产品图片、favicon、社交分享图等。2、放在 styles或其他源码目录比如 components、assets的图片仅作为 CSS 背景、组件内部资源且通过 import 语法引入如 import img from ../assets/bg.png。需要经过 Webpack/Vite 等构建工具处理比如自动压缩、hash 命名、按需加载。适合做为组件私有资源、仅在打包后由 JS/CSS 引用不需要被外部直接访问。四、Header组件Header.tsx// 这是服务端组件没有 use client 声明 // 导航链接全部静态不需要 JS 就能正常渲染对 SEO 和首屏性能都有好处 // next/link 的 Link 比原生 a 多了页面间预加载跳转更快 import Link from next/link; import styles from ./Header.module.css; // 用数据结构驱动菜单以后增删菜单只改这里不动 JSX const navItems [ { label: 首页, href: / }, { label: 选择角色, href: #, children: [ { label: 效果营销公司, href: /roles/marketing-company }, { label: 通道/线路商, href: /roles/channel-partner }, { label: 短信/外呼-平台/系统, href: /roles/sms-outbound }, { label: 连锁零售商, href: /roles/chain-retail }, { label: 线上广告主, href: /roles/online-advertiser }, { label: AI大模型需求者, href: /roles/ai-model-buyer }, ], }, { label: 服务体系, href: /services, children: [ { label: 精准圈客服务, href: /services/audience-targeting }, { label: 投前精筛服务, href: /services/pre-screening }, { label: 触达服务, href: /services/outreach }, { label: AI营销助手, href: /services/ai-marketing }, { label: AI求职辅助, href: /services/ai-career }, { label: Soulwork-全网同名, href: /services/soulwork }, ], }, { label: 企业动态, href: /news }, { label: 关于我们, href: /about }, ]; export default function Header() { return ( header classNameh-[84px] leading-[84px] nav classNameflex items-center justify-between safe-area {/* 品牌 Logo 区域点击回首页 */} div Link href/问多乐WenDora AI/Link /div {/* 主导航列表 */} ul className{flex items-center justify-center ${styles.headerBox}} {navItems.map((item) ( li key{item.href} className{item.children ? relative group : } Link href{item.href}{item.label}/Link {/* 有二级菜单才渲染下拉列表 */} {item.children ( ul classNameabsolute left-0 top-full hidden group-hover:block bg-white shadow rounded z-10 min-w-[160px] {item.children.map((child) ( li key{child.href} Link href{child.href} classNameblock px-4 py-2 hover:bg-gray-100 leading-[30px]{child.label}/Link /li ))} /ul )} /li ))} /ul {/* 立即咨询CTA 按钮单独放置突出优先级 */} Link href/contact className{bg-gray-800 text-white px-[20px] py-[10px] rounded-[8px] leading-[20px]}咨询试用/Link /nav /header ); }五、Tailwind CSS的使用这里需要重点说一下Tailwind CSS的使用Tailwind CSS 官方文档地址是https://tailwindcss.com/docs怎么做到鼠标悬浮过去下拉框展现出来呢relative让当前 li 成为定位上下文方便后代用absolute定位下拉菜单会绝对定位在它下面groupTailwind 的“分组”类用于配合子元素的group-hover:实现“父元素 hover 时子元素显示”px-4px-[20px]是什么意思px 指的是 paddingpx-4 指的是 padding-left:16px;padding-right:16px;这里的4 就是乘以了4- 后面纯数字的都是✖️4后的pxpx-[20px] 指的是 自定义写法代表 padding-left:20px;padding-right:20px;1、局部作用域CSS如果只想要这个单独页面设置单独的css【局部作用域】类似于vue的写法该怎么做vue写法style langscss scoped .pagination-container { .el-pagination { float: v-bind(float); } } .pagination-container.hidden { display: none; } /style实现方式CSS Modules新建同名 CSS 文件例如components/Header.module.cssHeader.module.css.headerBox { gap: 50px; }在 tsx 里引入并使用ul className{flex items-center justify-center ${styles.headerBox}} /ulimport Link from next/link;Next.js 官方文档有详细说明见这里英文文档https://nextjs.org/docs/pages/building-your-application/styling/css-modules文档里明确写了只要文件名以 .module.css 结尾Next.js 就会自动将其视为 CSS Module样式只作用于当前组件。2、全局作用域CSS在 globals.css 里添加globals.cssimport tailwindcss; :root { --background: #ffffff; --foreground: #171717; } theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); } media (prefers-color-scheme: dark) { :root { --background: #0a0a0a; --foreground: #ededed; } } body { background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; } .safe-area { max-width: 1152px; margin-left: auto; margin-right: auto; }这里主要设置了.safe-area是main的安全距离cssWenDoraAi官网哪里需要用哪里六、Next.js 的内置组件Link 是哪来的Next.js 提供有内置组件常见的如下Link页面跳转和预加载next/link。Image图片优化和懒加载next/image。Head设置页面head里的内容如标题、描述、SEO 标签next/head。Script安全地插入第三方脚本next/script。Dynamic动态导入组件实现懒加载next/dynamic。NotFound、ErrorBoundary处理 404 和错误页面新版 app 目录专用。这些组件都可以直接 import 使用具体用法可以查阅 Next.js 官方文档https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts以上就是此次WenDoraAi官网实战的全部内容啦弄了一个简单的header组件后续再开发WenDoraAi官网组件和写css应该都会容易上手很多啦