nuxt2安装及创建项目

nuxt2安装及创建项目

---

---

一、安装Node.js

• nuxt运行依赖与Node环境

通过nvm来安装node.js 参考笔记

• win环境：https://blog.csdn.net/cygqtt/article/details/135762599
• MacOS环境：https://blog.csdn.net/cygqtt/article/details/135962379

二、创建项目

①：创建项目

• 为了快速入门，Nuxt.js 团队创建了脚手架工具 create-nuxt-app
• 确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）

npx create-nuxt-app <项目名>

• 或者用 yarn

yarn create nuxt-app <项目名>

②：服务框架选择

1.Project name 项目名

2.Programming language 程序设计语言

3.Package manager 包管理器

4.UI framework UI框架

5.Template engine 模板引擎

6. Nuxt.js modules nuxt 扩展模块

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Axios - Promise based HTTP client # 安全且简单的 axios 和 nuxt.js 集成，用于 Http 请求（HTTP/HTTPS请求的Web App）
 ( ) Progressive Web App (PWA) # 稳定的 PWA 解决方案用于增强 Nuxt 对 PWA 的支持（渐进式应用程序）
 ( ) Content - Git-based headless CMS # 允许在content / dictionary 中写入内容，并通过像 API 一样的来获取文件（无头式内容管理系统）

7. Linting tools 选择 lint 工具

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint # 代码检查工具
 ( ) Prettier # 代码格式化工具
 ( ) Lint staged files # 可以在代码提交前对待提交区代码进行一些自定义操作的工具，包括执行eslint检查等等
 ( ) StyleLint # css 代码检查工具
 ( ) Commitlint # commit 命令检查工具

8.Testing framework 选择单元测试需要的框架

• （若暂时不确定是否有这样的需求，可以先不选）

9.Rendering mode 渲染模式

? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG) # 服务端渲染，若使用想要对 SEO 有益，就选择此项（一般选择 Nuxt 都会希望进行服务端渲染）
  Single Page App # 单页面应用渲染模式

10. Server 部署目标

• 这里之所以可以选择部署目标是因为 nuxt 支持静态网页的生成，一般我们选服务端部署即可

11.Development tools 开发工具，按照指引（js 开发语言的推荐选择 jsconfig.json）

12. GitHub 名字 随便写

13. 版本控制工具

• 创建完成

③：运行测试

npm run dev

三、目录结构

详情查看官网：https://www.nuxtjs.cn/guide/directory-structure