项目创建 - 1556461835/note GitHub Wiki

安装

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

运行 create-nuxt-app

为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app。

确保安装了npx（npx在NPM版本5.2.0默认安装了）：

Project name TiBug.Nuxt //项目名称
Project description  //项目描述
Use a custom server framework //选择通用的服务端渲染模板框架：none，是默认服务 Nuxt default serve
Use a custom UI framework  //选择通用UI框架：Element
Choose rendering mode  //选择渲染模式：SSR或SPA
Use axios module   //是否使用 axios 进行http请求：yes
Use eslint  //是否使用代码格式纠错: no，会各种格式警告
Use prettier  //是否代码美化：yes
Author name  //作者名
Choose a package //选择一个包管理：npm

当运行完时，它将安装所有依赖项，因此下一步是启动项目:

$ cd <project-name>
$ npm run dev

应用现在运行在 http://localhost:3000 上运行。

从头创建项目

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

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

新建 package.json 文件

package.json 文件用来设定如何运行 nuxt：

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

上面的配置使得我们可以通过运行 npm run dev 来运行 nuxt。

安装 nuxt

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

pages 目录

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

创建 pages 目录： $ mkdir pages 创建我们的第一个页面 pages/index.vue：

<template>
  <h1>Hello world!</h1>
</template>

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

目录结构

├── assets                         // 资源文件。用于组织未编译的静态资源入LESS、SASS 或 JavaScript
│   └── logo.jpg                   // 默认logo图片
├── components                     // 组件。用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
│   └── AppLogo.vue                // 默认logo组件
├── layouts                        // 布局。页面都需要有一个布局，默认为 default。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的 <nuxt /> 标签中。
│   └── default.vue                // 默认模板页面，类似mvc中的layout
├── middleware                     // 中间件。存放中间件。可以在页面中调用： middleware: 'middlewareName' 。
├── pages                       　 // 页面。一个 vue 文件即为一个页面。
│   └── index.vue                  // 默认首页面
├── plugins                        // 用于存放JavaScript插件的地方
│   └── element-ui.js              // 上边我们安装的UI框架
├── static                         // 用于存放静态资源文件，比如图片，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
├── store                       　 // 用于组织应用的Vuex 状态管理。
├── .editorconfig                  // 开发工具格式配置
├── .eslintrc.js                   // ESLint的配置文件，用于检查代码格式
├── .gitignore                     // 配置git不上传的文件
├── nuxt.config.js                 // 用于组织Nuxt.js应用的个性化配置，比如网站title，已便覆盖默认配置
├── package.json                   // npm包管理配置文件
└── README.md                      // 说明文档
⚠️ **GitHub.com Fallback** ⚠️