初识Nuxt3

🎨前言

最近公司规模一点点的起来了，领导反馈可以考虑做一个企业官网了🧓，说起来比较简单都是一些静态的资源，但是毕竟是公司官网肯定要有很多的工作去做seo优化，所以就涉及到了技术栈的选型👩‍🔧。

技术选型

• 凡科建站

当初打算直接在凡科上选择一个模板，直接就交给运营的同事去弄这些事情了，我们就不参与开发了🧵，但是由于某种原因需要我们自己参与开发🎃。

• hexo

了解了领导的意思之后发现都是一些静态的页面，所以当初在考虑是否可以用hexo来搭建一下🎨。去hexo官网找了一些主题发现只有这个主题acorn比较适合做企业官网🦺，但是由于主题不够丰富后期扩展也是个麻烦事，就放弃了🎪。

• Nuxt

因为我们公司用到的技术栈是vue和react但是因为SPA应用这些多是在客户端的应用，不能进行SEO优化（搜索引擎优化），于是就想到了vue ssr(服务端渲染)🥙。 本身对vue ssr的了解也不是很深，这时发现了Nuxt框架打算研究一下🥠，因为之前对Nuxt2的也不太了解🍘，发现官网已经发布了更强大的Nuxt3（beat版）预计6月份就发布正式版了，莫不如先去尝尝鲜🍖。

Nuxt简介

Nuxt3是使用Vue3发布的SSR框架专注构建您的下一个应用程序，体验混合渲染、强大的数据获取和新功能。

下图不同Nuxt版本对比（引用官网）👇

功能 / 版本	Nuxt 2	Nuxt Bridge	Nuxt 3
Vue	2	2	3
稳定性	😊 稳定	😌 半稳定	😬不稳定
性能	🏎 快	✈️ 更快	🚀 最快
Nitro Engine	❌	✅	✅
ESM support	🌙 Partial	👍 Better	✅
TypeScript	☑️ Opt-in	🚧 Partial	✅
组合式api	❌	🚧 Partial	✅
选项API	✅	✅	✅
Components Auto Import	✅	✅	✅
<script setup> 语法	❌	🚧 Partial	✅
自动导入组件	❌	✅	✅
Webpack	4	4	5
Vite	⚠️ Partial	🚧 Partial	🚧 Experimental
Nuxi CLI	❌ Old	✅ nuxi	✅ nuxi
静态部署	✅	✅	🚧 Experimental

前期准备

• NodeJs🍕：版本要大于14.16.0
• vscode编辑器🥯：提供了丰富的插件
• TypeScript Vue 插件🥓：在vscode中的扩展商店中就可以找到对vue3和ts的支持更加完善。

环境搭建

• 创建项目

  npx nuxi init nuxt-app

• 安装依赖

  npm install

  在安装依赖的过程可能会报以下问题，注意要使用npm/yarn/pnpm 不要使用cnpm我通过cnpm安装了两次都报错了，感觉是依赖包的版本问题，使用yarn就可以了。

• 运行项目

npm run dev 

第一次启动可能会报错，无需改动中断后再次启动就没有问题了，速度飞快👇。

• vscode查看项目

  code nuxt-app

  脚手架安装之后发现目录很干净只是在app.vue中有这样一段话。

  <template>
    <div>
      <NuxtWelcome />
    </div>
  </template>

  NuxtWelcome在哪里定义的，为什么没有引用，突然后我想起来Nuxt是自动引用组件的我用ctrl+鼠标左键点进了定义发现NuxtWelcome是Nuxt内部提供的显示组件。

我将替换成Hello World一个简单的Hello World就出现啦。

总结

Nuxt能从2->3 就足以证明 Nuxt在服务端渲染还是有一定的定位的，并且开发的方式基本使用过vue都可以上手，希望我没有选错，继续加油。