安装

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

运行 create-nuxt-app

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

确保安装了npx(npx在NPM版本5.2.0默认安装了):

  1. $ npx create-nuxt-app <项目名>

或者用yarn :

  1. $ yarn create nuxt-app <项目名>

它会让你进行一些选择:

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

  1. $ cd <project-name>
  2. $ npm run dev

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

注意:Nuxt.js 会监听 pages 目录中的文件更改,因此在添加新页面时无需重新启动应用程序。

了解模板项目的目录结构: 目录结构

从头开始新建项目

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

  1. $ mkdir <项目名>
  2. $ cd <项目名>

提示:<项目名> 替换成为你想创建的实际项目名。

新建 package.json 文件

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

  1. {
  2. "name": "my-app",
  3. "scripts": {
  4. "dev": "nuxt"
  5. }
  6. }

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

安装 nuxt

一旦 package.json 创建好, 可以通过以下npm命令将 nuxt 安装至项目中:

  1. $ npm install --save nuxt

pages 目录

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

创建 pages 目录:

  1. $ mkdir pages

创建我们的第一个页面 pages/index.vue

  1. <template>
  2. <h1>Hello world!</h1>
  3. </template>

然后启动项目:

  1. $ npm run dev

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

注意:Nuxt.js 会监听 pages 目录中的文件更改,因此在添加新页面时无需重新启动应用程序。

了解更多关于Nuxt.js应用的目录结构: 目录结构