Nuxt3学习-简介
简介
Nuxt3是基于Vue3发布的SSR框架,也是Vue全家桶一员
使用默认Vue3开发的网站默认都是SPA单页面应用程序,但SPA应用程序对SEO极其不友好!!!
已我自己开发的TimeMailer时光邮局为例,它就是个Vue3开发的SPA程序。
SPA程序操作都在index.html页面上完成,都由JavaScript来控制,但搜索引擎无法执行JavaScript,所以搜索引擎真正抓取到的就是这种:
TimeMailer时光邮局-给未来写封信
而我们正常看到的确是这样:
而SSR应用呢,则是在服务端进行渲染,渲染完成后再返回给客户端,这样搜索引擎就可以抓取到真实的内容了
如果你要开发的网站是企业网站、博客网站、购物网站,强力建议使用SSR,但如果是后台管理系统,那么使用SSR和SPA区别不大。
安装
nuxt3官方文档:https://v3.nuxtjs.org/
1.使用脚手架创建项目
进入项目目录打开cmd执行
npx nuxi init nuxt3-demo
说明:
- npx nuxi init是固定命令
- nuxt3-test表示项目名称,可以自定义,保持语义化
cmd中出现这个表示安装成功
启动项目:
yarn i
or
npm i
npm dev
or
yarn dev
// 开启服务
打开 localhost:3000,出现此页面代表安装成功
项目目录
- .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全部转移项目根目录下了
此处评论已关闭