Nuxt3 + element-plus + vue-i18n + windicss + pinia 最佳实践

1,500 阅读1分钟

一、clone基础模板

1、基于element-plus的示例项目
git地址:github.com/element-plu…

二、添加语言国际化

1、基于vue-i18n-next的示例项目,按照项目配置添加。
git地址:github.com/intlify/vue…

三、添加windCSS

1、基于nuxt-windcss示例项目
git地址:github.com/windicss/nu…

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

1、集成谷歌统计
传送门:v3.nuxtjs.org/guide/direc…

五、添加pinia状态管理

1、参考pinia集成nuxt官方示例
传送门:stackblitz.com/github/pini…

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

1、参考项目(在线地址:www.zngg.net/)
传送门:github.com/ZN-GG/ZNGG-…

七、最终模板地址((❤ ω ❤)期待小星星 ⭐⭐⭐)

git地址:github.com/attraction1…

八、添加环境变量

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

# NUXT_API_SECRET=xxx
NUXT_PUBLIC_API_BASE=/api
NUXT_PUBLIC_LANG=en

九、关于简洁版

git switch simple 享用~