# Nuxt.js 入门

## Nuxt.js 是什么

TODO

是基于 Vue 的一个开发框架。

Nuxt.js 之于 Vue，相当于 Next.js 之于 React，可以这样分：`nUxt` 和 `vUe`，`nExt` 和 `rEact`。

## 安装

**第一步：创建项目**

```
npm init nuxt-app <project-name>
```

> 或者[手动创建](https://nuxtjs.org/guides/get-started/installation#manual-installation)

**第二步：安装 Nuxt**

```
npm install nuxt
```

## 路由

Nuxt 会为 `pages` 目录下的所有 `.vue` 文件自动生成路由，开发者不需要自己配置路由。

而且 Nuxt.js 还会为路由文件进行自动 code splitting，开发者不需要进行额外的配置。

### 普通路由

文件结构：

```
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
```

自动创建的路由结构：

```javascript
router: {
    routes: [
        {
            name: 'index',
            path: '/',
            component: 'pages/index.vue',
        },
        {
            name: 'user',
            path: '/user',
            component: 'pages/user/index.vue',
        },
        {
            name: 'user-one',
            path: '/user/one',
            component: 'pages/user/one.vue',
        },
    ];
}
```

### 动态路由

创建动态路由只需要在文件名前面加 `下划线` 就好了。

文件结构：

```
pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue
```

> \_slug/index.vue 这种结构表示 `:slug` 参数是必须的 \_id.vue 这种结构表示 `:id?` 参数是可选的 如果要将 `:id` 参数变成必选，只需要修改文件结构为 `_id/index.vue`

自动创建的路由结构：

```javascript
router: {
    routes: [
        {
            name: 'index',
            path: '/',
            component: 'pages/index.vue',
        },
        {
            name: 'users-id',
            path: '/users/:id?',
            component: 'pages/users/_id.vue',
        },
        {
            name: 'slug',
            path: '/:slug',
            component: 'pages/_slug/index.vue',
        },
        {
            name: 'slug-comments',
            path: '/:slug/comments',
            component: 'pages/_slug/comments.vue',
        },
    ];
}
```

### 嵌套路由

需要创建一个和父级页面同名的文件夹。还需要在父级路由的页面组件中加入 `NuxtChild` 组件。

文件结构：

```
pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue
```

自动创建的路由结构：

```javascript
router: {
    routes: [
        {
            path: '/users',
            component: 'pages/users.vue',
            children: [
                {
                    path: '',
                    component: 'pages/users/index.vue',
                    name: 'users',
                },
                {
                    path: ':id',
                    component: 'pages/users/_id.vue',
                    name: 'users-id',
                },
            ],
        },
    ];
}
```

### 不常见的路由需求

* [动态嵌套路由](https://nuxtjs.org/docs/2.x/features/file-system-routing#dynamic-nested-routes)
* [不确定嵌套层级的动态路由](https://nuxtjs.org/docs/2.x/features/file-system-routing#unknown-dynamic-nested-routes)

### 路由拓展

* 用 [router-extras-module](https://github.com/nuxt-community/router-extras-module) 自定义页面的路由参数。
* 用 [@nuxtjs/router](https://github.com/nuxt-community/router-module) 来自己写 `router.js` 覆盖 Nuxt 的路由。
* 在 `nuxt.config.js` 中使用 [router.extendRoutes](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#extendroutes) 属性进行配置。

**导航**

使用 `NuxtLink` 组件来进行页面间导航，这个组件是由 Nuxt 提供的，不用额外引入，可以看成是 Vue 的 `RouterLink` 的替代品。

## 目录结构

### pages 文件夹

Nuxt 会为这个文件夹下的 `.vue` 文件生成页面路由。

[learn more](https://nuxtjs.org/guides/directory-structure/pages)

### components 文件夹

放 Vue 组件的地方，组件会由 Nuxt 自动引入，开发者不需要手动引入。（前提是 `nuxt.config.js` 中的 `component` 字段设为 `true`）

[learn more](https://nuxtjs.org/guides/directory-structure/components)

### assets 文件夹

放不用编译的资源，比如样式文件、图片、字体。

[learn more](https://nuxtjs.org/guides/directory-structure/assets)

### static 文件夹

会映射到服务器根路由。

[learn more](https://nuxtjs.org/guides/directory-structure/static)

### `nuxt.config.js` 文件

[配置文件](https://nuxtjs.org/guides/directory-structure/nuxt-config)

[learn more about directories](https://nuxtjs.org/guides/directory-structure/nuxt)

## 渲染

* 服务端渲染(SSR)：就是每次用户请求的时候都在服务端动态获取数据，组合好 HTML 文档返回给浏览器。
* 静态网站(static sites)：HTML 文档是在打包构建阶段就已经生成了，用户请求页面的时候服务器只要直接返回文档。

要开启 SSR 或者静态渲染的话，在 `nuxt.config.js` 中设置：

```javascript
export default {
    ssr: true, // 不过这是默认值，所以其实不用手动设置
};
```

* 客户端渲染：指的是用户请求页面时，服务端返回一个基础的 HTML 文档，里面是没有数据的，浏览器接收到文档后再使用 JS 进行数据请求，然后将数据渲染到页面中。

在 `nuxt.config.js` 中设置：

```javascript
export default {
    ssr: false,
};
```

## 部署

### 静态网址

在 `nuxt.config.js` 中设置：

```javascript
export default {
    target: 'static', // 默认值是 'server'
};
```

使用 `nuxt generate` 命令打包生成静态文件，Nuxt.js 会为每一个页面路由生成一个 HTML 文件，放到 `dist/` 文件夹下。

### 服务端渲染

在 `nuxt.config.js` 中设置：

```javascript
export default {
    target: 'server', // 这是默认值
};
```

使用 `nuxt build` 命令打包构建项目。

## 引入 element-ui

安装 element-ui 之后在 `nuxt.config.js` 中设置：

```javascript
export default {
    css: ['element-ui/lib/theme-chalk/index.css'],
    plugins: [{ src: '~plugins/element-ui', ssr: false }],
    build: {
        vendor: ['element-ui'],
    },
};
```

新增 `plugins/element-ui.js`：

```javascript
import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://suki.gitbook.io/notes/articles/vue/intro_to_nuxtjs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.