副业精选 - 使用Nuxt和Tailwind CSS的全栈、SEO友好、高性能应用

这是一个使用Nuxt 3全栈(SPA-SSR)开发的宠物领养组织应用。宠物数据通过服务器路由(由Nitro驱动)的API获取,静态生成的文章从外部REST API源获取,博客使用markdown文件编写,所有内容都使用Tailwind CSS的强大功能和美观性进行样式设计。

这是一个使用Vue Designer Nuxt Tailwind CSS - 快速启动模板创建的示例项目。

演示 - https://happy-paws-with-nuxt-tailwindcss.netlify.app/

Vue Designer

这是一个由Pinegrow开发的支持Mac、Windows和Linux的Vue应用桌面可视化编辑器。您可以在Vue Designer免费试用!

它允许您可视化设计🎨您的Vue单文件组件,并在构建基于组件的Vue应用时提高您的生产力和创造力。

它智能地集成了⚡️Vite基础的CLI,并通过其强大的可视化控件和功能提供了惊人的开发体验。

干净的代码😃,无锁定 - 您可以完全控制您的项目和开发工作流程❤️

立即尝试!

1. 克隆到本地

在GitHub上从此模板创建仓库。

(或者)

如果您更喜欢手动操作并保持较干净的git历史记录

npx giget@latest gh:pinegrow/happy-paws-with-nuxt-tailwindcss my-happy-paws-with-nuxt-tailwindcss-app #项目名称
cd my-happy-paws-with-nuxt-tailwindcss-app
npm install #或使用pnpm

2. 在Vue Designer中打开

在Vue Designer中打开您的项目,并按照配置面板中显示的说明进行操作(应该会自动弹出)。配置面板⚙️显示了关键包以及各个生态系统和社区的各种链接。

使用方法

启动开发服务器

npm run dev

构建

npm run build # SPA SSR,
npm run generate # SPA SSG (完全静态)

分析

npm run analyze # 包大小分析

预览

npm run now # 构建和预览

Lighthouse

npm run unlighthouse # 使用来自https://unlighthouse.dev/的npx unlighthouse对整个站点(所有页面)运行lighthouse

部署到Netlify

您可以通过点击此按钮将此仓库部署为您自己的站点以进行探索和实验。

查看部署文档以获取更多信息。

预装内容

元框架(基于Vue)

Nuxt - 直观的Vue框架
- 👉 查看Nuxt文档以了解令人惊叹的功能列表。
- 🚦 Nuxt-Router,基于官方Vue-Router,支持基于文件的路由。
- SSR友好的useState组合式API,用于在组件之间共享状态。

UI框架

Tailwind CSS - 令人惊叹的实用优先CSS框架。

基于文件的CMS(markdown)

Nuxt Content - 由Markdown和Vue组件驱动的基于文件的CMS。注意:本页面就是一个markdown文件🗒。

图标

UnoCSS Preset Icons - 使用超过100,000个开源Iconify图标。使用unocss格式的图标名称,例如i-mdi-home。

模块/插件

Pinegrow Nuxt模块 - 使您能够在Vue Designer中可视化地实时设计Vue单文件组件。
Pinegrow Tailwind CSS插件 - 通过设计面板,启用可视化控件自定义(自动)和主题自定义(可选)。
VueUse - 基本Vue组合式工具集合。
🍍 Pinia 用于全局状态管理,通过@pinia/nuxt模块。它轻量、类型安全、可扩展、模块化,支持vue-devtools。
VeeValidate 处理值跟踪、验证、错误、提交等。
Nuxt Image - Nuxt应用的即插即用图像优化。
Nuxt SEO - 一个令人惊叹的手工制作的Nuxt模块集合,用于所有SEO需求,具有统一的站点配置。包括nuxt-site-config、nuxt-simple-robots、nuxt-simple-sitemap、nuxt-og-image、nuxt-link-checker、nuxt-seo-experiments、nuxt-schema-org。
- 在开发过程中,可以使用nuxt-devtools预览OG图像和nuxtseo功能。OG图像也可以使用这种形式的URL查看 - /__og-image__/image/<path>/og.<extension>

开发工具

Nuxt Devtools - 通过一组令人惊叹的应用内功能增强您的DX(开发者体验)。
Vue Devtools - 官方开发工具,可以作为独立应用与Vue Designer一起使用。它被配置为Nuxt插件(仅在开发过程中)。
- 需要操作: 目前已停用。在plugins/devtools.client.ts中取消注释以激活。

VS Code扩展

[VS Code扩展](./.vscode/extensions.json & ./.vscode/settings.json)
- Volar - Vue 3 <script setup> IDE支持
- ESLint
- Prettier

编码风格

使用组合式API和<script setup> SFC语法
ESLint使用@nuxt/eslint Nuxt ESLint模块,采用ESLint 9并使用新的平面配置。
Prettier与eslint-config-prettier - 格式化而不与eslint规则冲突。

TypeScript

此项目允许JS,并且已关闭严格模式。根据需要更新tsconfig.ts。

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "strict": false
  }
}

功能详情

首页介绍
关于我们
支付页面
文章页面
付费文章页面
付费资源
引流公众号
引流群

GitDjAr/seo-nuxt-new