nuxt.js
Nuxt.js 是基于 vue 的服务器端渲染框架。
全局安装 create-nuxt-app 工具
命令：
npm install -g create-nuxt-app
//类似于vie-cli中的（npm i @vue/cli -g）,全局安装vue-cli
使用 create-nuxt-app 创建 项目文件夹
create-nuxt-app (自定义项目名)
执行一些选择：
- Project name 项目名 //项目名称
- Project description My astounding Nuxt.js project //项目描述
- Author name 姓名 //作者姓名
- Choose programming language JavaScript //选择开发的语言 javascript or typescript
- Choose the package manager Npm //选择包管理的工具 npm or yarn
- Choose UI framework Element //选择一个UI框架
- Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection) //添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。
- Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection) //检查代码是否规范
- Choose test framework None //选择一个测试框架
- Choose rendering mode Universal (SSR) //选择一种渲染模式 SSR or SPA
- Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
项目文件夹创建成功后，会输出下面的信息:
项目文件夹创建成功.png
注：
第十步，会问我们选择哪种渲染方式，这里一定要选择 Universal（通用的、普遍的）。spa 是单页面应用，这种模式下，文件不会 ssr 渲染，所以 nuxt 就没有意义了。
// 如果想更改渲染方式，可以修改 nuxt.config.js 中的 mode 属性。
mode: 'Universal' // Universal 可以ssr；spa 不会ssr，是客户端渲染
目录结构
|-- .nuxt // Nuxt自动生成，临时的用于编辑的文件，build
|-- assets // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript
|-- components // 用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
|-- layouts // 布局目录，用于组织应用的布局组件，页面的模板文件，不可更改。(相当于vue-cli中的public文件夹)
|-- middleware // 用于存放中间件
|-- pages // 用于存放写的视图页面，主要的工作区域，相当于vue-cli中的views文件夹
|-- plugins // 用于存放JavaScript插件的地方
|-- static // 用于存放静态资源文件，比如图片，可通过根目录直接访问，不需要经过webpack编译
|-- store // 用于组织应用的Vuex 状态管理。
|-- .editorconfig // 开发工具格式配置
|-- .eslintrc.js // ESLint的配置文件，用于检查代码格式
|-- .gitignore // 配置git不上传的文件
|-- nuxt.config.json // 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置
|-- package-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package.json // npm包管理配置文件
