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 <项目名>
https://i-blog.csdnimg.cn/direct/95174eeeb05e489a9eb9bb7d6b2b3914.png
②：服务框架选择
1.Project name 项目名
https://i-blog.csdnimg.cn/direct/aa3e24e92d3b4604b2cbf3bf1687c0f2.png
2.Programming language 程序设计语言
https://i-blog.csdnimg.cn/direct/32b863fc7e1647f6933ceebcebff8d52.png
3.Package manager 包管理器
https://i-blog.csdnimg.cn/direct/9a3fa5c574c145b0ab179fa742e66a3a.png
4.UI framework UI框架
https://i-blog.csdnimg.cn/direct/3cbb73eab3b94ec2868e6a2886b58a87.png
5.Template engine 模板引擎
https://i-blog.csdnimg.cn/direct/02ba1292f7b14233bc1476735c304273.png
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 一样的来获取文件（无头式内容管理系统）
https://i-blog.csdnimg.cn/direct/3cfe238de9054d19bd2d6d0c1314759d.png
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 命令检查工具
https://i-blog.csdnimg.cn/direct/d072348ded824949a461785edabd3e8d.png
8.Testing framework 选择单元测试须要的框架
[*]（若临时不确定是否有这样的需求，可以先不选）
https://i-blog.csdnimg.cn/direct/9c35d008b877416181e15449f348b17f.png
9.Rendering mode 渲染模式
? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG) # 服务端渲染，若使用想要对 SEO 有益，就选择此项（一般选择 Nuxt 都会希望进行服务端渲染）
Single Page App # 单页面应用渲染模式
https://i-blog.csdnimg.cn/direct/037533bf745b447c934dc2ca9800f260.png
10. Server 部署目标
[*]这里之所以可以选择部署目标是因为 nuxt 支持静态网页的生成，一般我们选服务端部署即可
https://i-blog.csdnimg.cn/direct/2a7437998fd24716b95a03fb5f92e54e.png
11.Development tools 开发工具，按照指引（js 开发语言的保举选择 jsconfig.json）
https://i-blog.csdnimg.cn/direct/3a2cc0613daa42c7b4ee2091cbe5f99f.png
12. GitHub 名字 随便写
https://i-blog.csdnimg.cn/direct/bca60db2a83f4c50a8007537e2166c7b.png
13. 版本控制工具
https://i-blog.csdnimg.cn/direct/3a884074270c4a37af5fe9ebbee0edd3.png
[*]创建完成
https://i-blog.csdnimg.cn/direct/b9f881c30c2c435ea58021f6a1d3b0b2.png
③：运行测试
npm run dev
https://i-blog.csdnimg.cn/direct/79b51c2afd8641ecbc556ffded8ac688.png
https://i-blog.csdnimg.cn/direct/dd44b979c8fa4ba99bd16dfb25b9ee10.png
三、目录布局
详情查看官网：https://www.nuxtjs.cn/guide/directory-structure
https://i-blog.csdnimg.cn/direct/c15a8ca831bf46c68fdc9d2ad188b76f.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]