ThinkDiff

V1

2022/12/01阅读:36主题:红绯

Nuxt3 starter

Nuxt3 Tailwind Starter

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

项目预览

效果地址 直接修改

功能支持

其他

  • 🎨 使用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分支自动同步部署到网站上

分类:

后端

标签:

后端

作者介绍

ThinkDiff
V1