nuxt中文官网:安装 - NuxtJS | Nuxt.js 中文网
create-nuxt-app v3.x 安装选项与 v2.x 不同,变化:(我用的版本2)
- 原来的server framework选项消失了
- 新增了deployment target选项和development tools 选项
- 版本v.3好像没有server文件夹【解决办法:针对【create-nuxt-app新版本v3.2.0】构建项目时没有server配置以及运行后弹出收集匿名数据选项等问题的解决方法_jokerjiaojiao的博客-CSDN博客】
为了快速入门,Nuxt.js 团队创建了脚手架工具 create-nuxt-app。
确保安装了 npx(npx 在 NPM 版本 5.2.0 默认安装了):
$ npx create-nuxt-app@2.9.2 <项目名>
或者用 yarn :【我的前端项目名称叫做front】
$ yarn create nuxt-app@2.9.2 <项目名>
它会让你进行一些选择:
1.在集成的服务器端框架之间进行选择: //让你选择一个nodejs的框架
2. 选择您喜欢的 UI 框架: //我用的elementUI
3. 选择您喜欢的测试框架: //选择一个自动化测试的框架
4. 选择你想要的 Nuxt 模式 (Universal
or SPA
) //肯定用Universal(ssr)【因为SPA直接用vue-cli就行了,本次项目需要做一下服务端渲染】
5. 添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。
6. 添加 EsLint 以在保存时代码规范和错误检查您的代码。
7. 添加 Prettier 以在保存时格式化/美化您的代码。
当运行完时,它将安装所有依赖项,因此下一步是启动项目:
$ cd <project-name>
$ npm run dev
应用现在运行在 http://localhost:3000 上运行。
注意:Nuxt.js 会监听 pages
目录中的文件更改,因此在添加新页面时无需重新启动应用程序。
完成之后
nuxt // Nuxt自动生成,临时的用于编辑的文件,build,打包时可以用generate,打包包含静态文件 【项目运行起来就出现了】
assets // 静态文件 以供import
components // 用于自己编写的Vue组件,比如波动组件、日历组件、分页组件
layouts // 布局目录,用于组织应用的布局组件
pages // 用于存放写的页面,里面的文件不需要手动配置路由
plugins // 存放JavaScript插件server//做服务端渲染的
static //放一些静态资源 如: logo.png
store // Vuex 状态管理
test //测试代码 用来自动化测试
eslintrc.js // ESLint的配置文件、
gitignore // 配置git不上传的文件
nuxt.config.json // Nuxt.js应用的个性化配置,已覆盖默认配置
还有一种不使用脚手架,从头开始新建项目的方法,请参考官网,在如下图所示的地方