第二章 搭建 Nuxt 环境和创建项目

开发环境

1. 安装 node.js & npm
   https://nodejs.org/zh-cn/
2. 安装 Vscode
   https://code.visualstudio.com/

安装脚手架工具与创建项目

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

NPX 方式

确保安装了npx（npx在NPM版本5.2.0默认安装了），npx 是 npm 的高级版本，npx 具有更强大的功能。
作用是避免全局安装模块：npx 临时安装一个 create-nuxt-app 模块，来初始化项目，使用过后会自动删除
create-nuxt-app 模块(下面不需要全局安装)

1. 直接初始化项目

npx create-nuxt-app nuxt-app

image.png

2. 当运行完时，它将安装所有依赖项，然后启动项目:

 cd nuxt-app
 yarn dev

image.png image.png
打开浏览器访问 http://localhost:3000 效果如下：
image.png

更改端口号与主机

如果默认 3000 端口号被占用，可在 nuxt.config.js 中更改端口号：

server: {
    port: 8000,
    ip: '0.0.0.0',
},

更改后重启项目，然后访问 http://localhost:8000/

详解项目目录结构

目录结构

• .nuxt ：执行 npm run dev 命令后编译的目录文件。
• assets ：用于组织未编译的静态资源如 LESS 、SASS 或 JavaScript 。
• components ：用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会
  像页面组件那样有 asyncData 方法的特性。
• layouts ：用于组织应用的布局组件。
• middleware ：用于存放应用的中间件。
• node_modules ：用于存放项目的依赖包
• pages ：用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
• plugins ：用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件
• static ：静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构
  建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
• store ：用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store
  目录下创建一个 index.js 文件可激活这些配置。
• .editorconfig : 指定编辑器的编写项目的代码风格
• .gitignore 文件用于指定哪些文件不被提交到Git仓库中。
• nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。
• package-lock.json 文件用于描述应用具体的依赖版本
• package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。