Nuxt3 Tailwind Starter
你是否受夠了每次前端開(kāi)發(fā)npm install [..args],重復(fù)配置各種前端基本組件庫(kù)寥殖、Lint庫(kù)或悲、重復(fù)部署上線。在N 次以后配置一下午做了一個(gè)有好的Nuxt3開(kāi)發(fā)Template欠拾。
項(xiàng)目預(yù)覽
功能支持
- Nuxt 3
- Nuxt Content v2
- Tailwind CSS
- Nuxt Icon
- Pinia
- vee-validate
-
useAuthStore登錄驗(yàn)證 - @nuxtjs/i18n
其他
- ?? 使用Tailwind作為CSS組件庫(kù)
- ?? 內(nèi)置多種通用組件和布局
- ?? Eslint和Stylelint代碼檢驗(yàn)；
- ?? 創(chuàng)建Git commit message cn規(guī)范校驗(yàn)找爱；
- ?? 天然支持Vue3、Typescript泡孩、Vite等；
- ?? 集成Pinia作為狀態(tài)管理寺谤；
- ?? 集成vueuse作為Hooks庫(kù)仑鸥；
- ??文件式路由、componentsAPI自動(dòng)導(dǎo)入变屁、組件自動(dòng)導(dǎo)入等眼俊；
- ?? 集成Nuxt Content作為Markdown文件管理；
- ?? 集成Nuxt Icon作為SVG圖標(biāo)管理粟关；
- ?? 集成Nuxt I18n作為國(guó)際化管理疮胖；
- ?? 集成Vee-Validate作為表單驗(yàn)證；
- ?? 集成Vercel作為自動(dòng)部署闷板；
- ?? 集成Pnpm作為包管理工具澎灸；
- ?? 集成Github Action作為CI/CD；
- ?? 集成Prettier作為代碼格式化工具遮晚；
- ?? 集成Commitlint作為Git commit message規(guī)范校驗(yàn)性昭；
- ?? 集成Changelog作為自動(dòng)生成CHANGELOG.md；
- ?? 集成Husky作為Git commit message規(guī)范校驗(yàn)县遣；
- ?? 集成Lint-staged作為Git commit message規(guī)范校驗(yàn)糜颠；
- ?? 集成Prettier作為Git commit message規(guī)范校驗(yàn)；
- ?? 集成Nuxt PWA作為PWA支持萧求；
- ?? 集成Nuxt Composition API作為Vue3 Composition API支持其兴；
- ?? 集成Nuxt Image作為圖片優(yōu)化支持；
- ?? 集成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支持；
項(xiàng)目預(yù)覽
項(xiàng)目預(yù)覽
如何使用
# 克隆項(xiàng)目
git clone https://github.com/Createitv/nuxt3-tailwind-starter
# 進(jìn)入項(xiàng)目目錄
cd nuxt3-tailwind-starter
# 安裝依賴(lài)
pnpm install
# 啟動(dòng)服務(wù)
pnpm dev
如何部署
# 構(gòu)建
pnpm build
# 啟動(dòng)服務(wù)
pnpm start
如何查看
# 啟動(dòng)服務(wù)
pnpm dev
# 打開(kāi)瀏覽器
http://localhost:3000
如何提交
# 提交代碼
git add .
git commit -m 'feat: xxx'
git push
如何發(fā)布
# 發(fā)布代碼
git tag v1.0.0
git push origin v1.0.0
Gihub Action自動(dòng)部署
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到項(xiàng)目的Action secrets每次推送Main分支自動(dòng)同步部署到網(wǎng)站上
