网站做浮动边框asp代码品牌策划方案ppt
前言
阅读本文你需要有
Next.js 基础
React 基础
Prisma 基础
tailwind 基础
MySql基础
准备工作
打开网站 https://ui.shadcn.com/docs
这不是一个组件库。它是可重用组件的集合，您可以将其复制并粘贴到应用中。
打开installation 选择Next.js 也就是此页面
项目安装
npx create-next-app@latest my-app --typescript --tailwind
出现Success即为成功
npx shadcn-ui@latest init
这下就可以启动
npm run dev
开始写代码
更改下global.css，使文档的根元素都会占据视口高度的100%。确保网页在不同设备和屏幕尺寸下都能有一致的布局表现，而不会出现不必要的滚动条。
加入以下代码
//:root是css的伪类选择器 确保这些样式能够应用到整个页面中的所有元素。
html,body,:root{height:100%;}
(main)–> (routes) 是一个工作习惯
可以将routes和layout分开
Clerk权限控制
https://clerk.com/ 使用Clerk来进行权限控制
进行注册 QQ邮箱不能使用 需要使用网易邮箱
根据文档一步一步来
安装
npm install @clerk/nextjs
创建环境变量.env文件 在文件中添加内容
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_d29uZHJvdXMtY29uZG9yLTM0LmNsZXJrLmFjY291bnRzLmRldiQ
CLERK_SECRET_KEY=sk_test_n19eZwEzX9NUaONd3BRMhUWqKeZZn9lHxQDEY3IQ7Q
添加middleware.ts中间件
import { clerkMiddleware } from "@clerk/nextjs/server";export default clerkMiddleware();export const config = {matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};
在全局layout中使用ClerkProvider包裹
return (
<ClerkProvider>
<html lang="en">
<body className={font.className}>{children}</body>
</html>
</ClerkProvider>
);
}
创建目录结构
创建文件夹(auth),这种被小括号包裹的文件夹，这种命名约定并不会直接影响路由系统，而是用于特定的用途或者命名风格。比如说这里就是用来表示特定的文件 而不影响next路由系统
创建文件夹[[...sign-in]]与[[...sign-up]]
[[...sign-in]] 是 Next.js 中用于创建动态路由的一种特殊语法。这种语法允许你处理带有多个参数的动态路由，其中 ... 表示匹配零个或多个路径段。
最后格式是这样
并在sign-in中的page.tsx中写入内容
import { SignUp } from "@clerk/nextjs";
export default function Page() {return <SignUp />;}
在sign-un中的page.tsx中写入内容
import { SignUp } from "@clerk/nextjs";export default function Page() {return <SignUp />;}
并在.env中加入内容
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
让我们来看看效果 localhost:3000/sign-up
接下来创建主文件夹(main)并在其中page.tsx中创建 <UserButton /> 组件https://clerk.com/docs/components/user/user-button#user-button-component
这个组件支持即时帐户切换，无需重新加载整个页面。
😬😬按钮只会在登陆后显示
// app/(main)/(routes)/page.tsx
import { UserButton } from "@clerk/nextjs";
export default function Home() {
return (
<div>
<UserButton afterSignOutUrl="/"/>
</div>
);
}
安装主题
https://ui.shadcn.com/docs/dark
安装
npm i next-themes
在components文件夹中创建文件夹providers中创建theme-provider.tsx 复制内容
"use client"import * as React from "react"import { ThemeProvider as NextThemesProvider } from "next-themes"import { type ThemeProviderProps } from "next-themes/dist/types"export function ThemeProvider({ children, ...props }: ThemeProviderProps) {return <NextThemesProvider {...props}>{children}</NextThemesProvider>}
进入全局layout文件将body中children文件包裹
import { ThemeProvider } from "@/components/providers/theme-provider";
<html lang="en" suppressHydrationWarning><body className={cn(font.className,"bg-white dark:bg-[#313338]")}><ThemeProviderattribute="class"defaultTheme="light"// forcedTheme="light"enableSystem={false}storageKey="discord-theme">{children}</ThemeProvider></body></html>
);
再搞个切换dark模式与light模式的切换按钮
在components中创建文件
// components/mode-toggle.tsx
"use client"import * as React from "react"import { Moon, Sun } from "lucide-react"import { useTheme } from "next-themes"import { Button } from "@/components/ui/button"import {DropdownMenu,DropdownMenuContent,DropdownMenuItem,DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"export function ModeToggle() {const { setTheme } = useTheme()return (<DropdownMenu><DropdownMenuTrigger asChild><Button variant="outline" size="icon"><Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /><Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /><span className="sr-only">Toggle theme</span></Button></DropdownMenuTrigger><DropdownMenuContent align="end"><DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem><DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem><DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem></DropdownMenuContent></DropdownMenu>)}
因为没有安装dropdownmenu报错
npx shadcn-ui@latest add dropdown-menu
拿下
接下来安装prisma
npm i -D prisma
初始化
npx prisma init