3个月1比1复制2个框架 nuxt3 和 vue3 后台操作系统

2023 年是我开始学习前端，nodejs 也是今年开始深挖，17年 PHP 经验的我早在4年开始看前端，但是还是迟迟没开始，因为当时不管看了react 和 vue 的教学，即使听别人说性能比PHP好的，但是感觉开发速度没有我PHP开发快，当时我还是自由业多年，所以一拖再拖，看了一些视频，没有真正的下手练习。

直到有一天，我下定决心去一家小公司打个工学学新技能，后来上司推荐了nuxt3，学了半年后，发现这2023年刚好是 nuxt3, vue3, react 有了很大的转变，有了vite 加持可以让任何 javascript 框架都可以快速开发，于是我下定决心用了 nuxt3 开发传统的操作系统，就从常用的基本操作功能开始。

Nuxt3 本身提供了 前端和后端，这才是真正的全栈框架，基于vue3
Nuxt3 由于是一开始，所以我花的时间比较多，有30% 时间都在做优化，比如语言吧转换，可json化翻译隔离，可增减语言，整理可重复使用的函数与components，比如列表排序统一，列表搜索统一，这些优化当你敲定，所有的东西都是简单。

有了一开始的优化布局，2个月后，我用vue3 重写了和nuxt3接近一摸一样，只是nuxt3 是用了nuxt/ui，vue3 侧是用 element-plus，今天刚好是我完成了vue3, 大约3个星期多。

以下是我的开发依赖的工具：
Nuxt3:

1. nuxt3 背后使用了vite
2. nuxt/ui (界面设计)
3. sequelize (MySQL) - 数据库
4. api 接口 - nuxt3 本身就有，一般路径是 ~/server/api

Vue3:

1. 使用 vite 运行开发配置 (unplugin-element-plus, vite-plugin-svg-icons, unplugin-auto-import, unplugin-vue-components, unplugin-vue-router)
2. element-plus (界面设计)
3. sequelize (MySQL) - 数据库
4. api 接口 - 采用了 nodejs 的 koa, 你也可以用 express 或是其它

如果没有vite，我估计要import 多少的 components 的 vue, icons, router的vue?
如果没有vite，当要优化时，要修改多少个components，icons, router?
如果没有vite，3个星期完成时不可能，需要多1个月才可以，
如果没有vite，维护难道不用说了
如果没有vite，就不能提高的你的产量，也就是不能提高你的收入。

总结:

• vue3 比 nuxt3 原始，nuxt3 是把 vue3 再封装一遍
• 有些原始js 码在nuxt3 不能使用，nuxt3 大部分不太需要 onMounted, 除非代码需要用到dom.
• nuxt3 可以直接放入，但是vue3 却不能

  <script setup lang="ts">
  await loadData() 
  </script>

• vue3 要这样做才可以

  <script setup lang="ts">
  const loading = async () => {await loadData()}
  loading();
  </script>

不说了，明天要准备用react 1 比 1复制多一个已写好的nuxt3 操作系统，也是要依赖 vite, 现在 vite 越来越火

本作品采用《CC 协议》，转载必须注明作者和本文链接