Nuxt3 Tailwind Starter

你是否受够了每次前端开发npm install [..args],重复配置各种前端基本组件库、Lint库、重复部署上线。在N 次以后配置一下午做了一个有好的Nuxt3开发Template。

项目预览

效果地址 直接修改

功能支持

• Nuxt 3
• Nuxt Content v2
• Tailwind CSS
• Nuxt Icon
• Pinia
• vee-validate
• useAuthStore 登录验证
• @nuxtjs/i18n

其他

• 🎨 使用Tailwind作为CSS组件库
• 📦 内置多种通用组件和布局
• 💪 Eslint和Stylelint代码检验；
• 🐶 创建Git commit message cn规范校验；
• 🎉 天然支持Vue3、Typescript、Vite等；
• 🍍 集成Pinia作为状态管理；
• 🥤 集成vueuse作为Hooks库；
• 🎊文件式路由、componentsAPI自动导入、组件自动导入等；
• 🎁 集成Nuxt Content作为Markdown文件管理；
• 🎁 集成Nuxt Icon作为SVG图标管理；
• 🎁 集成Nuxt I18n作为国际化管理；
• 🎁 集成Vee-Validate作为表单验证；
• 🎁 集成Vercel作为自动部署；
• 🎁 集成Pnpm作为包管理工具；
• 🎁 集成Github Action作为CI/CD；
• 🎁 集成Prettier作为代码格式化工具；
• 🎁 集成Commitlint作为Git commit message规范校验；
• 🎁 集成Changelog作为自动生成CHANGELOG.md；
• 🎁 集成Husky作为Git commit message规范校验；
• 🎁 集成Lint-staged作为Git commit message规范校验；
• 🎁 集成Prettier作为Git commit message规范校验；
• 🎁 集成Nuxt PWA作为PWA支持；
• 🎁 集成Nuxt Composition API作为Vue3 Composition API支持；
• 🎁 集成Nuxt Image作为图片优化支持；
• 🎁 集成Nuxt Webfont loader作为字体加载支持；
• 🎁 集成Nuxt Style Resources作为全局样式支持；
• 🎁 集成Nuxt Google Analytics作为Google Analytics支持；
• 🎁 集成Nuxt Google Tag Manager作为Google Tag Manager支持；
• 🎁 集成Nuxt Sentry作为Sentry支持；
• 🎁 集成Nuxt Sitemap作为Sitemap支持；
• 🎁 集成Nuxt Robots作为Robots支持；

项目预览

如何使用

# 克隆项目
git clone https://github.com/Createitv/nuxt3-tailwind-starter
# 进入项目目录
cd nuxt3-tailwind-starter
# 安装依赖
pnpm install
# 启动服务
pnpm dev

如何部署

# 构建
pnpm build
# 启动服务
pnpm start

如何查看

# 启动服务
pnpm dev
# 打开浏览器
http://localhost:3000

如何提交

# 提交代码
git add .
git commit -m 'feat: xxx'
git push

如何发布

# 发布代码
git tag v1.0.0
git push origin v1.0.0

Gihub Action自动部署

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      #  your build commands
      # - run: |
      #    ng build --prod
      - uses: amondnet/vercel-action@v20 # deploy
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
          github-token: ${{ secrets.GITHUB_TOKEN }} # Optional
          vercel-args: --prod # Optional
          vercel-org-id: ${{ secrets.ORG_ID}} # Required
          vercel-project-id: ${{ secrets.PROJECT_ID}} # Required
          working-directory: .

上传Vecel生成的VERCEL_TOKEN ORG_ID PROJECT_ID到项目的 Action secrets每次推送Main分支自动同步部署到网站上