[羊腿]初识Nuxt3(一)

「时光不负，创作不停，本文正在参加2021年终总结征文大赛」

Nuxt3 已经出来一段时间了(虽然还是beta阶段) 我们来尝试一波 这里是Nuxt3的官方文档

安装下载

环境要求

• Node版本： 最好是最新版本

  我在他通过Nuxt Cli 创建项目的时候 提示的建议的Node的版本 ^14.16.0 || ^16.11.0 || ^17.0.0 这三个版本，那就先安装个^17.0.0

  nvm install ^17.0.0
  nvm use 17.0.0
  

  我开始用的版本是16.3.0 项目里暂时没有出现问题

• Valor 插件

  这个是Vue3 推荐 的 插件 可以替代Vetur

• 编辑器

  官方推荐的是vscode

创建项目

• 通过npx 安装

  npx nuxi init nuxt3-app
  cd nuxt3-app
  npm install
  npm run dev
  

• 也可以全局安装Nuxt Cli

  npm install nuxi -g
  nuxi init nuxt3-app
  cd nuxt3-app
  npm i
  npm run dev
  

浏览器打http://localhost:3000/ 初始化的页面还有个动画 Nuxt3 很用心啊

查看项目

• App.vue

  里面有个NuxtWelcome 组件就是我们初始化的页面

• 添加多个页面

  Nuxt3 通过NuxtPage 组件和 pages目录来 处理我们的路由

  1. 创建pages目录: 这里就是我们约定的路由
  2. app.vue 里 把NuxtWelcome 删掉 替换成 NuxtPage 组件
  3. 在pages目录下创建index.vue: 这个就是 / 对应的路由页面， 打开项目

     每次新建页面组件后 总是要重新npm run dev 后 新的页面路由才生效

  4. 再在pages目录下创建admin.vue http://localhost:3000/admin 就可以了

• 含有路由参数的页面的创建

  假设我们有一个用户详情的页面 vue-router 配置中 需要的url是 /user/detail/:id

  通过文件夹名和文件名来对应路径

  在Nuxt中我们通过 [参数] 来对应 :参数

  1. pages目录下创建user目录 再在user下创建detail目录 在创建 [id].vue文件

  2. 通过访问 http://localhost:3000/user/detail/3 可以得到 $route.params.id 是 3

  3. 当然也可以在文件夹目录名上

     创建user-[type]目录， 在下面常见一个[id].vue 文件

     访问 http://localhost:3000/user-detail/3 可以得到 $route.params 是{ type: detail, id: 3 }

总结

现阶段用方法和Nuxt2 没太大区别

明天继续

有大佬可以一起来学习