Nuxt 3 是一款使得 web 开发变得更加简单,并且十分强大的开源框架。Nuxt 3 架构重新设计以后,内核变得更小,获得了更快的性能和对开发者更加友善的体验。
Nuxt 3 具有轻量且快速的特性并且使用 Composition API 使得代码的复用性更好 ,支持 Webpack5 以及 Vite 来进行打包,这意味着我们包的构建速度更快,体积更小,在生产环境可以使用 Webpack,而开发环境使用 Vite,简直完美。Nuxt 3 的开发使用 Vue3 和 TypeScript。
开始之前
在开始使用之前,请确保已经安装了以下推荐的程序
- Node.js
- Visual Studio Code
- Volar(VSCode 插件)
如果你已经安装好了 Node.js,请通过
node —version
检查一下版本是否是v14
或v16
。
友情提示:Nuxt 3 目前还只是处于 beta 阶段,不建议在生产环境中使用
创建项目
也可以直接在 SandBox 上在线体验。
创建新项目
在 terminal 中输入以下命令来创建一个 Nuxt 3 的项目
npx nuxi init <project-name>
复制代码
项目创建成功以后切入到文件中
cd <project-name>
复制代码
安装依赖项
yarn
复制代码
启动项目
yarn dev -o
复制代码
接下来你到项目将会在浏览器中打开,看到如下页面,项目成功运行起来了。
通过 VSCode 打开项目,查看文件夹如下:
app.vue
其中 app.vue
文件是我们的开发入口组件,我们在这个文件中中书写的任何 JS 和 CSS 都是全局作用的。
// app.vue
<template>
<div>
<NuxtWelcome />
</div>
</template>
复制代码
我们看到的页面展示内容就是 <NuxtWelcome>
这个组件。
在 Nuxt 3 中我们可以创建一个 pages
文件夹用来做路由配置。如果我们不使用 pages
文件夹,那么 Nuxt 也不包含有 vue-router
的依赖了。
如果我们创建了 pages
这个文件夹,我们可以通过 <NuxtPage>
这个组件做路由的输出。
// app.vue
<template>
<div>
<NuxtPage />
</div>
</template>
复制代码
因为
Nuxt
在<NuxtPage>
中 使用了<Suspense>
,所以建议在外面包裹单个根元素
pages(路由)
在 Nuxt 中会自动将 Vue-Router
和 pages
目录映射集成到应用程序的路由中。这也意味着我们只需要在 app.vue
中添加 <NuxtPage>
组件,然后直接在 pages
目录中写对应的路由文件即可,Nuxt
会自动根据 pages
中的结构自动生成 vue-router
的配置,然后添加到应用中。我们来试一试吧!
app.vue
文件中根元素下添加<NuxtPage />
- 创建
pages
文件夹,并添加两个路由页面
其中 index.vue
作为我们的首页,page1.vue
和 page2.vue
分别作为 /page1
和 /page2
路由展示页面。
nuxt3-app
├─ .gitignore
├─ README.md
├─ app.vue
├─ nuxt.config.ts
├─ package.json
├─ pages
│ ├─ index.vue
│ ├─ page1.vue
│ └─ page2.vue
├─ tsconfig.json
└─ yarn.lock
复制代码
地址栏中分别输入这三个地址就能分别看到对应文件的页面了。
嵌套路由
嵌套路由其实非常简单,只需要在 pages
中创建路由文件时创建成文件夹包裹的文件,如
pages/page1/test.vue
就表示着 /page1/test
这个路径。
路由导航
在 Nuxt 中,路由跳转与 vue 项目当中使用 <router-link>
来做页面跳转类似,通过设置属性 to=""
来跳转到某个路由,不同点在于 Nuxt 中使用的是 <NuxtLink>
// app.vue
<template>
<div>
<NuxtLink to="/page1" >to page1</NuxtLink>
<hr />
<NuxtLink to="/page2" >to page2</NuxtLink>
<NuxtPage />
</div>
</template>
复制代码
总结:本节简单的介绍了一下 Nuxt 具有哪些特性,如何下载安装,以及 app.vue
的一些特性,和如何进行路由配置、嵌套路由和路由切换。
明天我们将会补充路由这一部分,包含动态路由,路由传参等。