Vue3项目开发深度规范化指南-Setup+TypeScript
Netlify Status React TypeScript License
🚀 项目特色
🚀 项目特色
🚀 项目特色
🚀 项目特色
🚀 项目特色
🚀 项目特色
- 现代化技术栈: 基于 React 19 + TypeScript + React Router v7
- 服务端渲染: 支持 SSR，提升 SEO 和首屏加载速度
- 响应式设计: 使用 Tailwind CSS 实现优雅的响应式布局
- 全文搜索: 集成 Algolia 搜索引擎，提供快速精准的搜索体验
- 内容管理: 内置 Markdown 编辑器和文章管理系统
- 现代化开发体验: 严格的代码规范和类型安全
- 现代化技术栈: 基于 React 19 + TypeScript + React Router v7
- 服务端渲染: 支持 SSR，提升 SEO 和首屏加载速度
- 响应式设计: 使用 Tailwind CSS 实现优雅的响应式布局
- 全文搜索: 集成 Algolia 搜索引擎，提供快速精准的搜索体验
- 内容管理: 内置 Markdown 编辑器和文章管理系统
- 现代化开发体验: 严格的代码规范和类型安全
app/
├── assets/ # 静态资源
├── components/ # 组件库
├── config/ # 配置文件
├── hooks/ # 自定义 hooks
├── icons/ # 图标组件
├── query/ # 数据查询配置
├── routes/ # 路由组件 (具体路由请查看此目录)
├── server/ # 服务端逻辑
├── store/ # 状态管理
├── utils/ # 工具函数
└── globals.css # 全局样式
| 脚本 | 描述 |
|---|---|
| bun run dev | 启动开发服务器 |
npm run build |
生产环境打包 |
bun run build:bunx |
使用 bun 快速打包 |
bun run start |
预览生产构建 |
bun run clean |
清理缓存 |
bun run generate-env-types |
生成环境变量类型 |
bun run generate-icon |
从 SVG 生成图标组件 |
bun run generate-supabase-types |
生成 Supabase 数据库类型 |
bun run typecheck |
TypeScript 类型检查 |
bun run lint |
代码规范检查 |
bun run lint:fix |
自动修复代码规范问题 |
bun run format |
代码格式化检查 |
bun run format:fix |
自动格式化代码 |
bun run netlify:serve |
以 Netlify 环境启动 |
1import CodeBlock from '@tiptap/extension-code-block'
2import { ReactNodeViewRenderer } from '@tiptap/react'
3import CustomCodeBlockView from './CustomCodeBlockView'
4
5export const CustomCodeBlockWithView = CodeBlock.extend({
6 addNodeView() {
7 return ReactNodeViewRenderer(CustomCodeBlockView)
8 },
9})graph LR
源数据1 --> watch
源数据2 --> watch
watch --> 操作DOM
watch --> 修改数据
watch --> 发送请求
目录:
测试专栏
Vue进阶
Vue