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 默认安装了）
  

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

复制代码

• 或者用 yarn
  

1. 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 扩展模块

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

复制代码

   7. Linting tools 选择 lint 工具

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

复制代码

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

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

  

   9.Rendering mode 渲染模式

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

复制代码

   10. Server 部署目标
  

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

  

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

   12. GitHub 名字 随便写
  

   13. 版本控制工具
  

• 创建完成
  

③：运行测试

1. npm run dev

复制代码

三、目录布局

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。