Nuxt3来了！送给你们最全的Nuxt3 Demo

hd996
5,773 阅读2分钟

Nuxt 官网顶部公告 Nuxt3 倒计时的时候，我满怀期待，前几天打开，发现已经 Beta 了，趁着热乎，赶紧试一试！

image.png

==========================================================================

2022-02-11 更新

针对 Nuxt3 的使用，我做了一个项目，是基于 Nuxt3 的低代码平台，可以去 GitHub 看一下，GitHub 上也有项目的视频演示，项目应该会覆盖一部分 Nuxt3 的使用场景，希望可以帮助到大家。

==========================================================================

前言

Nuxt 的新特性大家可以去官网看一下，官网是最好的学习文档。很多官网提供的基本 API，我在 Demo 中并没有体现，我关注的重点是一些工程化相关的问题，旨在解决大家在项目架构搭建过程中，可能遇到的问题。

项目集成功能列表

  • Saas
  • ESLint + Prettier
  • Element Plus
  • I18n
  • 数据库
  • Server
  • 多环境部署

开发

导入 init.sql

$ yarn install
$ yarn dev

# 健康检查
$ curl http://localhost:3000/api/health
# 数据库API接口
$ curl http://localhost:3000/api/user

上线

  • 参考 Dockerfile，我部署使用的是 Kubernetes，部署相对比较简单，使用 pm2 等工具也都是可以的。

你可能遇到的问题 & 解决方案

  • Nuxt3 I18n
  • Nuxt3 I18n Discussions
  • Nuxt3 Element Plus Demo
  • 静态资源 CDN: 目前这是个 Open Issue，是在构建时，将资源路径改为 CDN Path，需要等待官方解决，但如果你整个站点都在 CDN 上，我觉得这个问题也不大
  • 环境配置
    • 可以参考 config 目录以及 server/db.ts 中的使用
    • 在 Dockerfile 注入 NODE_ENV 变量，确保打包时的环境变量和上线后统一
  • 数据库: 使用的是 Sequelize ，如果使用 Typeorm 可能在配置 entities 有问题，所以也没有尝试使用

最后要说的话

  • 目前 Nuxt3 仍存在很多问题，包括相关配套工具的没有适配，不建议此时放到生产环境，但如果是一些比较简单的项目，我倒觉得可以试一试
  • 喜欢的帮忙点个 Star

相关链接

avatar
文章
阅读
粉丝