1.介绍

今天来介绍一下Nuxt项目如何创建，使用Nuxt 构建您的下一个Vue 应用程序。极简的配置，快速学习，使用简单，让Web开发变得简单而强大，支持结构化，服务器渲染(SSR)，单页面引用(SPA)，静态站点生成 (SSG) ，SEO友好等。本文将带领你如何快速的创建一个Nuxt.js的应用项目。

2.安装步骤

2.1创建nuxt项目

使用npx命令，以create-nuxt-app工具，创建一个nuxt-demo的nuxt项目出来。如果你发现没有该命令，就是你的npm版本过低导致，请安装 npm v5.2+ 版本。

npx create-nuxt-app nuxt-demo

2.2 选择项目的初始化配置流程

根据自己的项目需求，进行按需选择配置，简要说明其中的一些设置。

首次安装的时候会安装create-nuxt-app工具
定义项目的名称，如不改名，确认即可
选择js语言，打包工具，及UI框架
一些默认选择即可。
渲染模式（ SSR/SSG 或SPA），服务器渲染还是单页渲染
安装成功效果

2.3 目录结构

.nuxt 是应用的运行和构建生成出来的。对应的Nuxt.js自动生成出来的文件。
components 项目组件存储目录。
pages 引用视图文件，Nuxt会根据这个目录的.vue自动生成路由。
static 静态文件存放目录。
store Vuex存储文件目录，如不需要，可删除。
nuxt.config.js 配置文件

目录结构图：

2.4 运行项目

npm run dev

项目预览效果：

在页面中，新增了About路由页面，Nuxt不需自定义路由，只需要在pages下面新增页面about.vue，路由将会自动生成，即可使用路由标签<NuxtLink to="/about">About</NuxtLink>跳转到对应的页面。如果你查看官方的nuxt构建目录说明，你将知道在.nuxt目录下，会看到route.js和route.json中，会看到自动添加的路由信息。

3. 总结

当你看到项目运行起来预览的那一刻，恭喜你已经成功的创建出你的第一个Nuxt项目。以上内容就这些，感谢大家的观看，谢谢~