Nuxt3学习-简介

简介

Nuxt3是基于Vue3发布的SSR框架,也是Vue全家桶一员

使用默认Vue3开发的网站默认都是SPA单页面应用程序,但SPA应用程序对SEO极其不友好!!!

已我自己开发的TimeMailer时光邮局为例,它就是个Vue3开发的SPA程序。

SPA程序操作都在index.html页面上完成,都由JavaScript来控制,但搜索引擎无法执行JavaScript,所以搜索引擎真正抓取到的就是这种:

TimeMailer时光邮局-给未来写封信

而我们正常看到的确是这样:

image-20220808225957263

而SSR应用呢,则是在服务端进行渲染,渲染完成后再返回给客户端,这样搜索引擎就可以抓取到真实的内容了

如果你要开发的网站是企业网站、博客网站、购物网站,强力建议使用SSR,但如果是后台管理系统,那么使用SSR和SPA区别不大。

安装

nuxt3官方文档:https://v3.nuxtjs.org/

1.使用脚手架创建项目

进入项目目录打开cmd执行

npx nuxi init nuxt3-demo

说明:

  1. npx nuxi init是固定命令
  2. nuxt3-test表示项目名称,可以自定义,保持语义化

cmd中出现这个表示安装成功image-20220808231350860

启动项目:

yarn i
or
npm i

npm dev
or
yarn dev
// 开启服务

打开 localhost:3000,出现此页面代表安装成功

aDTwV3FaPRyQGLc7zD

项目目录

- .nuxt               // 自动生成的目录,用于展示结果
- node_modules        // 项目依赖包存放目录
- .gitignore          // Git的配置目录,比如一些文件不用Git管理就可以在这个文件中配置
- app.vue             // 项目入口文件,你可以在这里配置路由的出口
- nuxt.config.ts      // nuxt项目的配置文件 ,这个里边可以配置Nuxt项目的方法面面
- package-lock.json   // 锁定安装时包的版本,以保证其他人在 npm install时和你保持一致
- package.json        // 包的配置文件和项目的启动调式命令配置
- README.md           // 项目的说明文件
- tsconfig.json       // TypeScript的配置文件

在vue3 SPA中我们习惯将代码放到src目录下,现在Nuxt3全部转移项目根目录下了

最后修改:2023 年 08 月 27 日
如果觉得我的文章对你有用,请随意赞赏