Nuxt 最佳实践 #

前言 #

采用 Nuxt3 + element-plus + vue-i18n + windicss + pinia 技术栈

clone 基础模板 #

1、基于 element-plus 的示例项目
git 地址：https://github.com/element-plus/element-plus-nuxt-starter.git

添加语言国际化 #

1、基于 vue-i18n-next 的示例项目，按照项目配置添加。
git 地址:https://github.com/intlify/vue-i18n-next/tree/master/examples/frameworks/nuxt3

添加 windCSS #

1、基于 nuxt-windcss 示例项目
git 地址：https://github.com/windicss/nuxt-windicss/tree/main/playground/nuxt3

利用 plugin 功能添加谷歌分析 GA4 #

1、集成谷歌统计
传送门：https://v3.nuxtjs.org/guide/directory-structure/plugins

添加 pinia 状态管理 #

1、参考 pinia 集成 nuxt 官方示例
传送门：https://stackblitz.com/github/piniajs/example-nuxt-3

配置使用$fetch 请求接口数据 #

1、参考项目（在线地址：https://www.zngg.net/）
传送门：https://github.com/ZN-GG/ZNGG-Nuxt3

最终模板地址（(❤ ω ❤)期待小星星 ⭐⭐⭐） #

git 地址：https://github.com/attraction11/nuxt3-starter

添加环境变量 #

1、添加.env 文件 (加入.gitignore)，进行开发调试

# NUXT_API_SECRET=xxx
NUXT_PUBLIC_API_BASE=/api
NUXT_PUBLIC_LANG=en

# NUXT_API_SECRET=xxx
NUXT_PUBLIC_API_BASE=/api
NUXT_PUBLIC_LANG=en

关于简洁版 #

git switch simple 享用~