这是我参与「第五届青训营」伴学笔记创作活动的的第12天 (❤ ω ❤)
为什么使用nuxt.js?
vue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成html挂载于
id为app的DOM元素上，这样会存在两大问题。
- 由于资源请求量大，造成网站首屏加载缓慢，不利于用户体验。
- 由于页面内容通过js插入，对于内容性网站来说，搜索引擎无法抓取网站内容，不利于SEO。
Nuxt.js 是一个基于Vue.js的通用应用框架，预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。可以将html在服务端渲染，合成完整的html文件再输出到浏览器。
除此之外，nuxt与vue还有一些其他方面的区别。
- 路由
nuxt按照 pages 文件夹的目录结构自动生成路由
vue需在 src/router/index.js 手动配置路由 - 入口页面
nuxt页面入口为 layouts/default.vue
vue页面入口为 src/App.vue
- webpack配置
nuxt内置webpack，允许根据服务端需求，在 nuxt.config.js 中的build属性自定义构建webpack的配置，覆盖默认配置
vue关于webpack的配置存放在build文件夹下
组件与组件库
自动导入组件
我们把Vue组件放在components/目录，这些组件可以被用在页面和其他组件中，以往我们使用这些组件需要导入并注册它们，但Nuxt会自动导入components/目录中的任意组件。
组件名称约定
没有嵌套的组件会以文件名直接导入，但如果存在嵌套关系那么组件名称将会基于路径和文件名连起来比如base/foo/Button.vue的注册名称将会是BaseFooButton，将来用起来会像下面这样：
<BaseFooButton />
组件懒加载
如果在组件名前面加上Lazy前缀，则可以按需懒加载该组件，可用于优化打包尺寸。
<template>
<div>
<h1>Mountains</h1>
<LazyMountainsList v-if="show" />
<button v-if="!show" @click="show = true">显示列表</button>
</div>
</template>
<script setup>
import {ref} from 'vue'
const show = ref(false)
</script>
