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 © 允许规范转载