nuxt的使用（二）——创建前端项目

nuxt中文官网：安装 - NuxtJS | Nuxt.js 中文网

create-nuxt-app v3.x 安装选项与 v2.x 不同，变化:（我用的版本2）

1. 原来的server framework选项消失了
2. 新增了deployment target选项和development tools 选项
3. 版本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的框架

• None (Nuxt 默认服务器)
• Express
• Koa   //用了Koa  
• Hapi
• Feathers
• Micro
• Fastify
• Adonis (WIP)

2. 选择您喜欢的 UI 框架: //我用的elementUI

• None (无)
• Bootstrap
• Vuetify
• Bulma
• Tailwind
• Element UI
• Ant Design Vue
• Buefy
• iView
• Tachyons

3. 选择您喜欢的测试框架:  //选择一个自动化测试的框架

• None (随意添加一个)

• Jest   //比较系统的一个项目，所以用了Jest，

• AVA

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应用的个性化配置，已覆盖默认配置

还有一种不使用脚手架，从头开始新建项目的方法，请参考官网，在如下图所示的地方