Nuxt学习笔记

Lemon

2021 年 10 月 04 日

72次浏览

暂无评论

2561字数

前端相关

## 前言:

最近看完了vue3，心血来潮想写一个博客的前端，于是去看了看nuxt

众所周知，vue是一个SPA框架，因此vue写的网页都是通过客户端渲染，这样会导致几个问题:

- 不利于seo
- 首屏加载很慢，因为用户首次加载需要先下载bundlejs，下载完成后在由浏览器渲染页面
- 如果js过大，会造成页面阻塞，用户体验非常不好

而服务端渲染的优势在于:

- 更利于SEO
- 更利于首屏渲染(特别是对于运行缓慢的设备或网速慢的用户，内容能更快到达)

官方文档:https://nuxtjs.org/docs/get-started/installation

中文文档:https://www.nuxtjs.cn/guide/installation

## 准备:

### 安装nuxt

```shell
# 使用yarn
yarn create nuxt-app 项目名

# 使用npm
npm create-nuxt-app 项目名
```

### 启动nuxt项目

```shell
# yarn
yarn run dev

# npm
npm run dev
```

## nuxt目录结构

![nuxt目录结构](http://i.mashiro.online/blog/image/nuxt_study/content-image/image-20210428102054357.png?x-oss-process=style/compressionImage "nuxt目录结构")

| 目录名称       | 描述                                                                                                                |
| ---------------- | --------------------------------------------------------------------------------------------------------------------- |
| assets         | 资源目录，用于存放需要编译的静态资源。例如：Less，Sass等<br />默认情况下，Nuxt使用webpack若干加载器处理目录中的文件 |
| components     | vue组件目录，Nuxtjs不会增强该目录，及不支持SSR                                                                      |
| layouts        | 布局组件目录                                                                                                        |
| pages          | 页面目录，所有的路由视图，nuxt根据目录结构生成对应的路由                                                            |
| plugins        | 插件目录                                                                                                            |
| static         | 静态文件目录，不需要编译的文件                                                                                      |
| store          | vuex目录                                                                                                            |
| nuxt.config.js | Next个性化配置文件,内容将覆盖默认                                                                                   |
| packge.json    | 项目配置文件                                                                                                        |

## 页面组成

Nuxt中每个页面都是由三个层级的文件组成

1. 布局文件(根组件):保存在layouts目录中，所有的页面都是布局文件中的字组件
2. 页面组件(页面):保存在pages目录，一个文件就是一个路由页面
3. 组件文件(组件): 保存在components中，在每个页面中使用的组件

![页面组成](http://i.mashiro.online/blog/image/nuxt_study/content-image/image-20210721102326834.png?x-oss-process=style/compressionImage "页面组成")

### 必要条件

所有页面都是由布局文件 + 页面文件组成,页面文件中还可以有多个组件文件

## 路由

- nuxt中已经内置了vue-router组件，所以我们直接使用即可，而且不需要写任何代码
- 在nuxt中不需要自己配置路由，nuxt会根据pages中的文件结构自动生成路由配置

待续...

最后修改：2021 年 10 月 04 日 08 : 31 PM

如果觉得我的文章对你有用，请随意赞赏

Nuxt学习笔记

Lemon • 2021 年 10 月 04 日

Nuxt学习笔记

发表评论取消回复

重新开始写博客

Nuxt学习笔记

Nuxt学习笔记

重新开始写博客

Nuxt学习笔记

发表评论 取消回复

Nuxt学习笔记

发表评论取消回复