## 1. Project Overview & Quickstart (Splode/THEMES)

# THEMES

Radix Themes is an open-source component library optimized for fast development, easy maintenance, and accessibility. Maintained by @workos.

### Repository Details
- **Repository:** [Splode/THEMES](https://github.com/Splode/THEMES)
- **GitHub Stars:** ⭐ 8,367
- **Primary Language:** TypeScript

*Note: High-volume repository documentation is actively indexed and synchronized by YakaAI.*

## 2. Official Technical Reference & Guides (Splode/docs)

## File: README.md

# Nuxt.js Documentation

> This is where the documentation is stored and served as an API

## Developing

:warning: You must at least use `node >= 7` to start the server.

Start a dev server on `localhost:4000`

```bash
npm install
npm run dev
```

## On Translations

### Russian

Russian translation is maintained by Translation Gang.

* Translation Repo — [/translation-gang/ru.docs.nuxtjs](https://github.com/translation-gang/ru.docs.nuxtjs)
* Primary maintainer - [Grigoriy Beziuk](https://gbezyuk.github.io)
* Primary translator - [Nicholas Shachmatov](https://github.com/theOnlyBoy)

### Chinese

Chinese translation is maintained by AOTU Labs from China, Shenzhen.

* Translation Repo — [/o2team/i18n-cn-nuxtjs-docs](https://github.com/o2team/i18n-cn-nuxtjs-docs)
* Primary maintainer - [AOTU Labs](https://aotu.io)
* Primary translator - [Levin Wong](http://faso.me), [Edward Chu](https://github.com/chuyik)

### Japanese

Japanese translation is maintained by INOUE Takuya.

* Translation Repo — [/inouetakuya/jp.docs.nuxtjs](https://github.com/inouetakuya/jp.docs.nuxtjs)
* Primary maintainer - [INOUE Takuya](http://blog.inouetakuya.info/)
* Primary translator - [INOUE Takuya](https://github.com/inouetakuya)

### Want to help with the translation?

If you feel okay with translating sorta alone, just fork the repo, create a "work-in-progress" pull request (mark it with [WIP], see [Russian translation](https://github.com/nuxt/docs/pull/3) if you need an example) — and just go on.

If you are more of a team player, maybe Translation Gang is for you? Then just let us know somehow that you're ready to join this international open-source translators community. Feel free to contact [Grigoriy Beziuk](https://gbezyuk.github.io) or anybody else from the team.

And thank you in advance ;)

---

## File: cn/guide/assets.md

---
title: 资源文件
---

> 默认情况下 Nuxt 使用 vue-loader、file-loader 以及 url-loader 这几个 Webpack 加载器来处理文件的加载和引用。对于不需要通过 Webpack 处理的静态资源文件，可以放置在 `static` 目录中。

## Webpack 构建

默认情况下, [vue-loader](http://vue-loader.vuejs.org/en/)自动使用 `css-loader` 和Vue模板编译器来编译处理vue文件中的样式和模板。在此编译过程中，所有的资源URL例如 ``、 `background: url(...)` 和 CSS中的 `@import` 均会被解析成模块通过 `require` 引用。

举个例子, 假设我们有以下文件目录结构：

```bash
-| assets/
----| image.png
-| pages/
----| index.vue
```

如果我们在CSS代码中使用 `url('~assets/image.png')`, 那么编译后它将被转换成 `require('~assets/image.png')`。

又或者如果我们在 `pages/index.vue` 中使用以下代码引用图片资源：
```html
<template>
  
</template>
```

那么编译后会被转换成：

```js
createElement('img', { attrs: { src: require('~assets/image.png') }})
```

`.png` 并非 JavaScript 文件, 因此 Nuxt.js 通过配置Webpack使用[file-loader](https://github.com/webpack/file-loader) 和 [url-loader](https://github.com/webpack/url-loader) 这两个加载器来处理此类引用。

这样做的好处有：
- `file-loader` 能让你指定从什么地方拷贝资源文件以及发布后放到哪个目录去，并能让你使用版本哈希码来重命名发布后的文件来实现增量更新和更好的缓存策略。
- `url-loader` 能根据你指定的文件大小阈值，来判断一个文件是转换成内联的base-64码（如果该文件尺寸小于该阈值）还是使用`file-loader`来降级处理。小文件base-64化能有效减少HTTP请求数。

实际上, Nuxt.js 默认的加载器配置如下：

```js
[
  {
    test: /\.(png|jpe?g|gif|svg)$/,
    loader: 'url-loader',
    query: {
      limit: 1000, // 1KO
      name: 'img/[name].[hash:7].[ext]'
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    query: {
      limit: 1000, // 1 KO
      name: 'fonts/[name].[hash:7].[ext]'
    }
  }
]
```

也即文件（图片或字体）的尺寸小于1K的时候，它将会被转换成 Base-64 data URL 来内联引用；否则它将被拷贝至指定的子目录（在 `.nuxt` 目录下），并被重命名（加上7位的哈希码作为版本标识）以实现更好的缓存策略。

当用 `nuxt` 命令运行我们的应用时，`pages/index.vue` 中的模板代码：

```html
<template>
  
</template>
```

将被编译生成：
```html

```

如果你想更新这些加载器的配置或者禁用他们，请参考[loaders 配置](/api/configuration-build)。

## 静态文件

如果你的静态资源文件需要 Webpack 做构建编译处理，可以放到 `assets` 目录，否则可以放到 `static` 目录中去。

Nuxt 服务器启动的时候，该目录下的文件会映射至应用的根路径 `/` 下，像 `robots.txt` 或 `sitemap.xml` 这种类型的文件就很适合放到 `static` 目录中。

你可以在代码中使用根路径 `/` 结合资源相对路径来引用静态资源：

```html





```

---

## File: cn/guide/async-data.md

---
title: 异步数据
---

> Nuxt.js 扩展了 Vue.js，增加了一个叫 `asyncData` 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。

## asyncData 方法

`asyncData`方法会在组件（**限于页面组件**）每次加载之前被调用。它可以在服务端或路由更新之前被调用。
在这个方法被调用的时候，第一个参数被设定为当前页面的[上下文对象](/api#上下文对象)，你可以利用 `asyncData`方法来获取数据，Nuxt.js 会将 `asyncData` 返回的数据融合组件 `data` 方法返回的数据一并返回给当前组件。

注意：由于`asyncData`方法是在组件 **初始化** 前被调用的，所以在方法内是没有办法通过 `this` 来引用组件的实例对象。

Nuxt.js 提供了几种不同的方法来使用 `asyncData` 方法，你可以选择自己熟悉的一种来用：

1. 返回一个 `Promise`, nuxt.js会等待该`Promise`被解析之后才会设置组件的数据，从而渲染组件.
2. 使用 [async 或 await](https://github.com/lukehoban/ecmascript-asyncawait) ([了解更多](https://zeit.co/blog/async-and-await))
3. 为第二个参数指定一个回调函数. 注：该回调函数需符合通用的 NodeJs 回调函数的形式: `callback(err, data)`

### 返回 Promise
```js
export default {
  data ({ params }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
  }
}
```

### 使用 async或await
```js
export default {
  async data ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}
```

### 使用 回调函数
```js
export default {
  data ({ params }, callback) {
    axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      callback(null, { title: res.data.title })
    })
  }
}
```

### 返回 对象

如果组件的数据不需要异步获取或处理，可以直接返回指定的字面对象作为组件的数据。

```js
export default {
  data (context) {
    return { foo: 'bar' }
  }
}
```

### 数据的展示

`asyncData` 方法返回的数据在融合 `data` 方法放回的数据后，一并返回给模板进行展示，如：

```html
<template>
  <h1>{{ title }}</h1>
</template>
```

## 上下文对象

可通过 [页面数据API](/api) 来了解该对象的所有属性和方法。

## 错误处理

Nuxt.js 在上下文对象`context`中提供了一个 `error(params)` 方法，你可以通过调用该方法来显示错误信息页面。`params.statusCode` 可用于指定服务端返回的请求状态码。

以返回 `Promise` 的方式举个例子：
```js
export default {
  asyncData ({ params, error }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
    })
  }
}
```

如果你使用 `回调函数` 的方式, 你可以将错误的信息对象直接传给该回调函数， Nuxt.js 内部会自动调用 `error` 方法：
```js
export default {
  asyncData ({ params }, callback) {
    axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      callback(null, { title: res.data.title })
    })
    .catch((e) => {
      callback({ statusCode: 404, message: 'Post not found' })
    })
  }
}
```

如果你想定制 Nuxt.js 默认的错误提示页面，请参考 [页面布局](/guide/views#布局)。

---

## File: cn/guide/commands.md

---
title: 命令
---

> Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署。

## 命令列表

| 命令 | 描述 |
|---------|-------------|
| nuxt | 启动一个热加载的Web服务器（开发模式） [localhost:3000](http://localhost:3000)。 |
| nuxt build | 利用webpack编译应用，压缩JS和CSS资源（发布用）。 |
| nuxt start | 以生成模式启动一个Web服务器 (`nuxt build` 会先被执行)。 |
| nuxt generate | 编译应用，并依据路由配置生成对应的HTML文件 (用于静态站点的部署)。 |

你可以将这些命令添加至 `package.json`：

```json
"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}
```

这样你可以通过 `npm run <command>` 来执行相应的命令。如: `npm run dev`。

## 开发模式

可通过以下命令以开发模式启动带热加载特性的 Nuxt 服务：

```bash
nuxt
// 或
npm run dev
```

## 发布部署

Nuxt.js 提供了两种发布部署应用的方式：服务端渲染应用部署 和 静态应用部署。

### 服务端渲染应用部署

部署 Nuxt.js 服务端渲染的应用不能直接使用 `nuxt` 命令，而应该先进行编译构建，然后再启动 Nuxt 服务，可通过以下两个命令来完成：

```bash
nuxt build
nuxt start
```

推荐的 `package.json` 配置如下：
```json
{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
}
```

提示： 建议将 `.nuxt` 加入 `.npmignore` 和 `.gitignore` 文件中。

### 静态应用部署

Nuxt.js 可依据路由配置将应用静态化，使得我们可以将应用部署至任何一个静态站点主机服务商。

可利用下面的命令生成应用的静态目录和文件：

```bash
npm run generate
```

这个命令会创建一个 `dist` 文件夹，所有静态化后的资源文件均在其中。

如果你的项目需要用到[动态路由](/guide/routing#动态路由)，请移步 [generate配置API](/api/configuration-generate) 了解如果让 Nuxt.js 生成此类动态路由的静态文件。 

注意：使用 `nuxt generate` 静态化应用的时候, 传给 [asyncData()](/guide/async-data#asyncdata-方法) 和 [fetch()](/guide/vuex-store#fetch-方法) 方法的[上下文对象](/api#上下文对象) 不会包含 `req` 和 `res` 两个属性。

---

## File: cn/guide/configuration.md

---
title: 配置
---

> Nuxt.js 默认的配置涵盖了大部分使用情形，可通过 nuxt.config.js 来覆盖默认的配置。

### build

Nuxt.js 允许你在自动生成的 `vendor.bundle.js` 文件中添加一些模块，以减少应用 bundle 的体积。如果你的应用依赖第三方模块，这个配置项是十分实用的。

[关于 build 配置项的详细文档](/api/configuration-build)

### cache

该配置项让你开启组件缓存策略以提升渲染性能。

[关于 cache 配置项的详细文档](/api/configuration-cache)

### css

该配置项用于定义应用的全局（所有页面均需引用的）样式文件、模块或第三方库。

[关于 css 配置项的详细文档](/api/configuration-css)

### dev

该配置项用于配置 Nuxt.js 应用是开发还是生产模式。

[关于 dev 配置项的详细文档](/api/configuration-dev)

### env

该配置项用于定义应用客户端和服务端的环境变量。

[关于 env 配置项的详细文档](/api/configuration-env)

### generate

该配置项用于定义每个动态路由的参数，Nuxt.js 依据这些路由配置生成对应目录结构的静态文件。

[关于 generate 配置项的详细文档](/api/configuration-generate)

### head

该配置项用于配置应用默认的meta标签。

[关于 head 配置项的详细文档](/api/configuration-head)

### loading

该配置项用于个性化定制 Nuxt.js 使用的加载组件。

[关于 loading 配置项的详细文档](/api/configuration-loading)

### plugins

该配置项用于配置那些需要在 `根vue.js应用` 实例化之前需要运行的 Javascript 插件。

[关于 plugins 配置项的详细文档](/api/configuration-plugins)

### rootDir

该配置项用于配置 Next.js 应用的根目录。

[关于 rootDir 配置项的详细文档](/api/configuration-rootdir)

### router

该配置项可用于覆盖 Nuxt.js 默认的 `vue-router` 配置。

[关于 router 配置项的详细文档](/api/configuration-router)

### srcDir

该配置项用于配置应用的源码目录路径。

[关于 srcDir 配置项的详细文档](/api/configuration-srcdir)

### transition

该配置项用于个性化配置应用过渡效果属性的默认值。

[关于 transition 配置项的详细文档](/api/configuration-transition)

---

## File: cn/guide/contribution-guide.md

---
title: 开源贡献指引
---

> 欢迎为 Nuxt.js 做出开源贡献！

## 提交问题

开源贡献的其中一种方式是为项目提交问题的详细报告，以方便我们不断地迭代优化项目。
我们欢迎并感谢大家提交有良好书写习惯且能够清晰描述问题的报告！遇到问题的时候，麻烦先详细阅读 Nuxt.js 的文档，并在 https://github.com/nuxt/nuxt.js/issues 上查找是否已有相同或类似的问题。

## Pull Requests

欢迎大家提 PR（ `源码拉取请求` ），即便是修复一个拼写错误。
任何重要的问题修复或特性开发，在开始编码之前请先提 [GitHub issue](https://github.com/nuxt/nuxt.js/issues)，以便大家知悉，避免重复的功能开发或问题修复。

### 惯例

- 问题修复，分支命名为 `fix-XXX`，其中的 `XXX` 对应问题在 [GitHub issue](https://github.com/nuxt/nuxt.js/issues) 中的编号或名称。
- 特性开发，分支命名为 `feature-XXX`，其中的 `XXX` 对应特性在 [GitHub issue](https://github.com/nuxt/nuxt.js/issues) 中的编号或名称。

---

## File: cn/guide/development-tools.md

---
title: 开发工具
---

> 测试是 Web 应用开发过程中不可获缺的工作。Nuxt.js 尽量帮助你简化这部分工作。

## 端对端测试

[`ava`](https://github.com/avajs/ava) 是一个很强大的 JavaScript 测试框架，结合 [`jsdom`](https://github.com/tmpvar/jsdom)，我们就可以轻松地给 `nuxt` 应用进行端对端测试。

首先，我们需要添加 `ava` 和 `jsdom` 作为项目的开发依赖：

```bash
npm install --save-dev ava jsdom
```

然后在 `package.json` 中添加测试脚本，并配置 ava 如果编译待测试的文件：

__package.json__

```javascript
"scripts": {
  "test": "ava",
},
"ava": {
  "require": [
    "babel-register"
  ]
},
"babel": {
  "presets": [
    "es2015"
  ]
}
```

接下来我们可以在 `test` 目录下编写单元测试的逻辑代码：
```bash
mkdir test
```

假设我们有这样一个页面 `pages/index.vue`：
```html
<template>
  <h1 class="red">Hello {{ name }}!</h1>
</template>

<script>
export default {
  data () {
    return { name: 'world' }
  }
}
</script>

<style>
.red {
  color: red;
}
</style>
```

当我们利用 `npm run dev` 启动开发服务器的时候，用浏览器打开 [http://localhost:3000](http://localhost:3000)，我们能看到红色的 `Hello world` 标题。

添加一个单元测试文件 `test/index.test.js`：

```js
import test from 'ava'
import Nuxt from 'nuxt'
import { resolve } from 'path'

// 我们用两个变量保留 nuxt 和 server 实例的引用
// 这样可以在单元测试结束之后关掉它们
let nuxt = null
let server = null

// 初始化 Nuxt.js 并创建一个监听 localhost:4000 的服务器
test.before('Init Nuxt.js', async t => {
  const rootDir = resolve(__dirname, '..')
  let config = {}
  try { config = require(resolve(rootDir, 'nuxt.config.js')) } catch (e) {}
  config.rootDir = rootDir // 项目目录
  config.dev = false // 生产构建模式
  nuxt = new Nuxt(config)
  await nuxt.build()
  server = new nuxt.Server(nuxt)
  server.listen(4000, 'localhost')
})

// 测试生成的html
test('路由 / 有效且能渲染 HTML', async t => {
  let context = {}
  const { html } = await nuxt.renderRoute('/', context)
  t.true(html.includes('<h1 class="red">Hello world!</h1>'))
})

// 测试元素的有效性
test('路由 / 有效且渲染的HTML有特定的CSS样式', async t => {
  const window = await nuxt.renderAndGetWindow('http://localhost:4000/')
  const element = window.document.querySelector('.red')
  t.not(element, null)
  t.is(element.textContent, 'Hello world!')
  t.is(element.className, 'red')
  t.is(window.getComputedStyle(element).color, 'red')
})

// 关掉服务器和Nuxt实例，停止文件监听。
test.after('Closing server and nuxt.js', t => {
  server.close()
  nuxt.close()
})
```

运行上面的单元测试：
```bash
npm test
```

实际上 `jsdom` 会有一定的限制性，因为它背后并没有使用任何的浏览器引擎，但是也能涵盖大部分关于 dom元素 的测试了。
如果想使用真实的浏览器引擎来测试你的应用，推荐瞅瞅 [Nightwatch.js](http://nightwatchjs.org)。

## ESLint

> ESLint 是一个很棒的工具，帮助我们提升代码的规范和质量。

在 Nuxt.js 中集成 [ESLint](http://eslint.org) 是非常简单的，首先我们需要安装 ESLint 的一系列依赖包：

```bash
npm install --save-dev babel-eslint eslint eslint-config-standard eslint-plugin-html eslint-plugin-promise eslint-plugin-standard
```

然后, 在项目根目录下创建 `.eslintrc.js` 文件用于配置 ESLint：
```js
module.exports = {
  root: true,
  parser: 'babel-eslint',
  env: {
    browser: true,
    node: true
  },
  extends: 'standard',
  // 校验 .vue 文件
  plugins: [
    'html'
  ],
  // 自定义规则
  rules: {},
  globals: {}
}
```

最后，我们在 `package.json` 文件中添加一个 `lint` 脚本命令：

```js
"scripts": {
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
}
```

通过以上配置，可使用以下命令对项目的代码进行 ESLint 校验：
```bash
npm run lint
```

ESLint 会校验应用所有的 JavaScript 和 Vue 文件，除了在 `.gitignore` 中忽略了的之外。

有个最佳实践是在 `package.json` 中增加 `"precommit": "npm run lint"` ，这样可以实现每次提交代码之前自动进行代码检测校验。

---

## File: cn/guide/directory-structure.md

---
title: 目录结构
---

> Nuxt.js 的应用目录架构提供了良好的代码分层结构，适用于开发或大或小的应用。 当然，你也可以根据自己的偏好组织应用代码。

## 目录

### 资源目录

资源目录 `assets` 用于组织未编译的静态资源如 `LESS`、`SASS` 或 `JavaScript`。

[关于 assets 目录的更多信息](/guide/assets)

### 组件目录

组件目录 `components` 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 `asyncData` 方法的特性。

### 布局目录

布局目录 `layouts` 用于组织应用的布局组件。

_该目录名为Nuxt.js保留的，不可更改。_

[关于布局的更多信息](/guide/views#布局)

### 中间件目录

`middleware` 目录用于存放应用的中间件。

[关于中间件的更多信息](/guide/routing#中间件)

### 页面目录

页面目录 `pages` 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 `.vue` 文件并自动生成对应的路由配置。

_该目录名为Nuxt.js保留的，不可更改。_

[关于页面的更多信息](/guide/views)

### 插件目录

插件目录 `plugins` 用于组织那些需要在 `根vue.js应用` 实例化之前需要运行的 Javascript 插件。

[关于插件的更多信息](/guide/plugins)

### 静态文件目录

静态文件目录 `static` 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。
服务器启动的时候，该目录下的文件会映射至应用的根路径 `/` 下。

**举个例子:** /static/robots.txt 映射至 /robots.txt

_该目录名为Nuxt.js保留的，不可更改。_

[关于静态文件的更多信息](/guide/assets#静态文件)

### Store 目录

`store` 目录用于组织应用的 [Vuex 状态树](http://vuex.vuejs.org) 文件。
Nuxt.js 框架集成了 [Vuex 状态树](http://vuex.vuejs.org) 的相关功能配置，在 `store` 目录下创建一个 `index.js` 文件可激活这些配置。

_该目录名为Nuxt.js保留的，不可更改。_

[关于 store 的更多信息](/guide/vuex-store)

### nuxt.config.js 文件

`nuxt.config.js` 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

_该文件名为Nuxt.js保留的，不可更改。_

[关于 nuxt.config.js 的更多信息](/guide/configuration)

### package.json 文件

`package.json` 文件用于描述应用的依赖关系和对外暴露的脚本接口。

_该文件名为Nuxt.js保留的，不可更改。_

## 别名

| 别名 | 目录 |
|-----|------|
| ~ | / |
| ~assets | /assets |
| ~components | /components |
| ~pages | /pages |
| ~plugins | /plugins |
| ~static | /static |
| ~store | /store |

文件别名：

| 别名 | 使用方法 | 描述 |
|-------|------|--------------|
| ~store | `const store = require('~store')` | 导入 `vuex` 状态树实例。 |
| ~router | `const router = require('~router')`| 导入 `vue-router` 实例。 |

---

## File: cn/guide/index.md

---
title: 关于 Nuxt.js
---

> 2016 年 10 月 25 日，[zeit.co](https://zeit.co/) 背后的团队对外发布了 [Next.js](https://zeit.co/blog/next)，一个 React 的服务端渲染应用框架。几小时后，与 Next.js 异曲同工，一个基于 [Vue.js](https://vuejs.org) 的服务端渲染应用框架应运而生，我们称之为：**Nuxt.js**。

## Nuxt.js 是什么？

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 **UI渲染**。

我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

Nuxt.js 预设了利用Vue.js开发**服务端渲染**的应用所需要的各种配置。

除此之外，我们还提供了一种命令叫：*nuxt generate*，为基于 Vue.js 的应用提供生成对应的静态站点的功能。

我们相信这个命令所提供的功能，是向开发集成各种微服务（miscroservices）的 Web 应用迈开的新一步。

作为框架，Nuxt.js 为 `客户端/服务端` 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

## Nuxt.js 框架是如何运作的？



Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：
- [Vue 2](https://github.com/vuejs/vue)
- [Vue-Router](https://github.com/vuejs/vue-router)
- [Vuex](https://github.com/vuejs/vuex) (当配置了 [Vuex 状态树配置项](/guide/vuex-store) 时才会引入)
- [Vue-Meta](https://github.com/declandewet/vue-meta)

压缩并 gzip 后，总代码大小为：**28kb** （如果使用了 Vuex 特性的话为 31kb）。

另外，Nuxt.js 使用 [Webpack](https://github.com/webpack/webpack) 和 [vue-loader](https://github.com/vuejs/vue-loader) 、 [babel-loader](https://github.com/babel/babel-loader) 来处理代码的自动化构建工作（如打包、代码分层、压缩等等）。

## 特性

- 基于 Vue.js
- 自动代码分层
- 服务端渲染
- 强大的路由功能，支持异步数据
- 静态文件服务
- ES6/ES7 语法支持
- 打包和压缩 JS 和 CSS
- HTML头部标签管理
- 本地开发支持热加载
- 集成ESLint
- 支持各种样式预处理器： SASS、LESS、 Stylus等等

## 流程图

下图阐述了 Nuxt.js 应用一个完整的服务器请求到渲染（或用户通过 `<nuxt-link>` 切换路由渲染页面）的流程：



## 服务端渲染

你可以使用 Nuxt.js 作为你项目的UI渲染框架。

当运行 `nuxt` 命令时，会启动一个支持 `热加载` 和 `服务端渲染`（基于Vue.js的 `vue-server-renderer` 模块）的开发服务器。

可以查看 Nuxt.js 提供的各种 [命令](/guide/commands) 以了解更多的信息。

如果你的项目有自己的Web服务器（例如用 Express.js 启动的Web服务），你仍然可以将 Nuxt.js 当作是中间件来使用，负责UI渲染部分的功能。在开发通用的Web应用过程中，Nuxt.js 是可插拔的，没有太多的限制，可通过 [开发编码中使用Nuxt.js](/api/nuxt) 了解更多的信息。

## 静态化

支持 Vue.js 应用的静态化算是 Nuxt.js 的一个创新点，通过 `nuxt generate` 命令实现。

该命令依据应用的路由配置将每一个路由静态化成为对应的HTML文件。

例子：

```bash
-| pages/
----| about.vue
----| index.vue
```

静态化后变成：
```
-| dist/
----| about/
------| index.html
----| index.html
```

静态化可以让你在任何一个静态站点服务商托管你的Web应用。

Nuxt.js 的官网就是一个绝佳的例子, 它静态化后托管于GitHub Pages：
- [源码](https://github.com/nuxt/nuxtjs.org)
- [静态化后的文件](https://github.com/nuxt/nuxtjs.org/tree/gh-pages)

在每次更新[文档代码](https://github.com/nuxt/docs)的时候，为了避免手工执行 `nuxt generate` 命令生成静态文件，我们可以在每次提交代码的时候调用一个AWS Lambda函数来做以下的事情：
1. 拷贝 [nuxtjs.org 源码](https://github.com/nuxt/nuxtjs.org)
2. 使用 `npm install` 命令安装依赖
3. 运行 `nuxt generate`
4. 将生成的 `dist` 目录提交至 `gh-pages` 分支

我们现在就有了一个 **无服务端的自动静态化的Web应用** :)

我们还可以考虑下电商应用的场景，利用 `nuxt generate`，是不是可以将应用静态化后部署在CDN服务器，每当一个商品的库存发生变化时，就重新静态化下，更新下商品的库存。这样使得用户在应用中能访问到最新的商品信息而不需要做额外的接口调用。相对于传统的电商应用来说，这种静态化的方案节省了服务器的资源，甚至连缓存服务都不需要了。

> 译者注：上面这段不怎么好译，不知道是否表达清楚了作者的愿意。

---

## File: cn/guide/installation.md

---
title: 安装
---

> Nuxt.js 十分简单易用。一个简单的项目只需将 `nuxt` 添加为依赖组件即可。

## 新手模板

为了便于大家快速使用，Nuxt.js提供了一个 [starter 模板](https://github.com/nuxt/starter)。

[下载模板的压缩包](https://github.com/nuxt/starter/archive/source.zip) 或利用 `vue-cli` 安装使用：

```bash
$ vue init nuxt/starter 
```

> 如果 [vue-cli](https://github.com/vuejs/vue-cli) 没有安装, 需先通过 `npm install vue-cli` 来安装。

然后安装依赖包：

```bash
$ cd 
$ npm install
```

接着通过以下命令启动项目：
```bash
$ npm run dev
```
应用现在运行在 http://localhost:3000

注意：Nuxt.js 会监听 `pages` 目录中的文件变更并自动重启， 当添加新页面时没有必要手工重启应用。

了解模板项目的目录结构： [目录结构](/guide/directory-structure)。

## 从头开始新建项目

如果不使用 Nuxt.js 提供的 starter 模板，我们也可以从头开始新建一个 Nuxt.js 应用项目，过程非常简单，只需要 *1个文件和1个目录*。如下所示：

```bash
$ mkdir <项目名>
$ cd <项目名>
```

*提示: 将 项目名 替换成为你想创建的实际项目名*

### 新建 package.json 文件

`package.json` 文件用来设定如何运行 `nuxt`：
```json
{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}
```
上面的配置使得我们可以通过运行 `npm run dev` 来运行 `nuxt`。

### 安装 `nuxt`

一旦 `package.json` 创建好， 可以通过以下npm命令将 `nuxt` 安装至项目中：
```bash
npm install --save nuxt
```

### pages 目录

Nuxt.js 会依据 `pages` 目录中的所有 `*.vue` 文件生成应用的路由配置。

创建 `pages` 目录：
```bash
$ mkdir pages
```

创建我们的第一个页面 `pages/index.vue`：
```html
<template>
  <h1>Hello world!</h1>
</template>
```

然后启动项目：
```bash
$ npm run dev
```
Bingo！现在我们的应用运行在 http://localhost:3000

注意：Nuxt.js 会监听 `pages` 目录中的文件变更并自动重启， 当添加新页面时没有必要手工重启应用。

了解更多关于Nuxt.js应用的目录结构： [目录结构](/guide/directory-structure)。