二、Nuxt初始化项目

一、快速生成新项目

　　为了方便大家快速使用，Nuxt提供了一个starter模板，可以直接下载模板的压缩包，或者利用vue-cli来安装

　　2、利用vue-cli来安装的话

　　　　（1）需要先使用 npm install -g vue-cli 安装vue-cli

　　　　（2）然后使用 vue init nuxt-community/starter-template <project-name> 来初始化一个新项目

　　以上两种方式都可以，初始化新项目以后，安装依赖包，通过 cd <project-name> 进入项目根目录，然后通过 npm install 来安装依赖包，安装完以后，通过 npm run dev 命令来启动项目

　　启动以后，项目默认运行在http://localhost:3000，可以直接通过这个地址访问

二、从头开始新建项目

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

　　1、在需要新建项目的文件中，通过 mkdir <项目名> 来新建一个项目的文件夹，然后通过cd <项目名> 进入项目中，

　　2、新建package.json文件

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

package.json文件

{

  "name": "my-app",

  "scripts": {

    "dev": "nuxt"

  }

}

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

　　3、安装nuxt

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

　　4、pages目录

　　　　通过 mkdir pages 来创建pages文件夹，然后进入文件夹中，在里面创建第一个页面pages/index.vue

index.vue

<template>

  <h1>Hello world!</h1>

</template>

注：nuxt.js会根据pages目录中的所有 *.vue 文件生成应用的路由配置

　　5、通过 npm run dev 启动项目，启动成功后还是通过http://localhost:3000来访问

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

参考：nuxt官网文档https://zh.nuxtjs.org/

巴特西