初识Nuxt3


highlight: a11y-dark

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情

🎨前言

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

技术选型

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

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

因为我们公司用到的技术栈是vuereact但是因为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中的扩展商店中就可以找到对vue3ts的支持更加完善。

环境搭建

  • 创建项目
    1. npx nuxi init nuxt-app
  • 安装依赖
    1. npm install

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

  • 运行项目
  1. npm run dev

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

  • vscode查看项目
    1. code nuxt-app
    脚手架安装之后发现目录很干净只是在app.vue中有这样一段话。
    1. <template>
    2. <div>
    3. <NuxtWelcome />
    4. </div>
    5. </template>
    NuxtWelcome在哪里定义的,为什么没有引用,突然后我想起来Nuxt是自动引用组件的我用ctrl+鼠标左键点进了定义发现NuxtWelcome是Nuxt内部提供的显示组件。

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

总结

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


文章标签:

原文连接:https://juejin.cn/post/7102225197981237279

相关推荐

中杯超大杯中间的新选择——vue2.7+vite+ts实践

Vue详解知识概括

使用vuepress从零开始搭建我的技术文档|已部署到线上

JavaScript中一些流行的模块、vite快速搭建、vue3简梳理

从0搭建Vue3组件库之Icon组件

什么?都2022年了,你还在一遍又一遍重复写form表单?

Vue3 中如何加载动态菜单?

vue源码解读十: 响应式对象

vue|运行 npm run xxx 的时候发生了什么?

【一库】semver:语义版本号标准 + npm的版本控制器🧲

试着换个角度理解低代码平台设计的本质

Vite 也可以模块联邦

vue3 写个task list,带你了解基础用法

The Last Naruto

从零开始搭建一个VUE项目 三种方式

Vue3+Node实现一个WebSocket即时通讯聊天室

Vue与React对比(基础篇) : 一、Hello World

Vue3 + TypeScript 开发一个 ProTable(第二弹)

Vue中怎么自动注册组件、过滤器?

理论+实践,彻底掌握Vue自定义指令