Loading... ## 前言: 最近看完了vue3，心血来潮想写一个博客的前端，于是去看了看nuxt 众所周知，vue是一个SPA框架，因此vue写的网页都是通过客户端渲染，这样会导致几个问题: - 不利于seo - 首屏加载很慢，因为用户首次加载需要先下载bundlejs，下载完成后在由浏览器渲染页面 - 如果js过大，会造成页面阻塞，用户体验非常不好 而服务端渲染的优势在于: - 更利于SEO - 更利于首屏渲染(特别是对于运行缓慢的设备或网速慢的用户，内容能更快到达) 官方文档:https://nuxtjs.org/docs/get-started/installation 中文文档:https://www.nuxtjs.cn/guide/installation ## 准备: ### 安装nuxt ```shell # 使用yarn yarn create nuxt-app 项目名 # 使用npm npm create-nuxt-app 项目名 ``` ### 启动nuxt项目 ```shell # yarn yarn run dev # npm npm run dev ``` ## nuxt目录结构  | 目录名称 | 描述 | | ---------------- | --------------------------------------------------------------------------------------------------------------------- | | assets | 资源目录，用于存放需要编译的静态资源。例如：Less，Sass等<br />默认情况下，Nuxt使用webpack若干加载器处理目录中的文件 | | components | vue组件目录，Nuxtjs不会增强该目录，及不支持SSR | | layouts | 布局组件目录 | | pages | 页面目录，所有的路由视图，nuxt根据目录结构生成对应的路由 | | plugins | 插件目录 | | static | 静态文件目录，不需要编译的文件 | | store | vuex目录 | | nuxt.config.js | Next个性化配置文件,内容将覆盖默认 | | packge.json | 项目配置文件 | ## 页面组成 Nuxt中每个页面都是由三个层级的文件组成 1. 布局文件(根组件):保存在layouts目录中，所有的页面都是布局文件中的字组件 2. 页面组件(页面):保存在pages目录，一个文件就是一个路由页面 3. 组件文件(组件): 保存在components中，在每个页面中使用的组件  ### 必要条件 所有页面都是由布局文件 + 页面文件组成,页面文件中还可以有多个组件文件 ## 路由 - nuxt中已经内置了vue-router组件，所以我们直接使用即可，而且不需要写任何代码 - 在nuxt中不需要自己配置路由，nuxt会根据pages中的文件结构自动生成路由配置 待续... 最后修改：2021 年 10 月 04 日 08 : 31 PM © 允许规范转载