第二章 搭建 Nuxt 环境和创建项目
开发环境
- 安装 node.js & npm
https://nodejs.org/zh-cn/ - 安装 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 模块(下面不需要全局安装)
- 直接初始化项目
npx create-nuxt-app nuxt-app
image.png
- 当运行完时，它将安装所有依赖项，然后启动项目:
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 文件用于描述应用的依赖关系和对外暴露的脚本接口。
