前端开发都在用脚手架——nuxt

nuxt的学习

基本使用

先决条件

• 节点-我们建议您安装最新的 LTS 版本。
• 文本编辑器，我们推荐带有Vetur扩展或WebStorm的VS Code。
• 终端，我们推荐使用 VS Code 的集成终端或WebStorm 终端。

构建、启动项目

确保安装了yarn、npx、npm

yarn
yarn create nuxt-app <project-name>
npx
npx create-nuxt-app <project-name>
npm
npx create-nuxt-app <project-name>

yarn 安装后示例

它会问你一些问题（名称、Nuxt 选项、UI 框架、TypeScript、linter、测试框架等）。要了解有关所有选项的更多信息，请参阅官网

回答完所有问题后，它将安装所有依赖项。下一步是导航到项目文件夹并启动它(俩种启动方式，根据自己需要)

cd <project-name>
yarn dev

cd <project-name>
npm run dev

和vue-cli对比

1. 路由配置不同 nuxt按照 pages 文件夹的目录结构自动生成路由，vue-cli需在 src/router/index.js 手动配置路由
2. 入口页面不同 nuxt页面入口为 layouts/default.vue vue页面入口为 src/App.vue
3. nuxt 类似 router-view , nuxt-link 类似 router-link
4. webpack配置差别 nuxt内置webpack，允许根据服务端需求，在 nuxt.config.js 中的build属性自定义构建webpack的配置，覆盖默认配置 vue关于webpack的配置存放在build文件夹下，需要自己配置。
5. asyncData 里面发送ajax 这个东西跟生命周期这些都是平级的

要理解asyncData方法执行时，就是理解数据在服务端已经渲染好了，是在服务端完成的。