nuxtjs 学习笔记

一、服务端渲染and客户端渲染

服务端渲染。

1. 是什么？

   • 在服务端渲染生成html 返回浏览器 生成dom元素。

2. 优缺点

   • 优点： 利于seo，通过href的url将splider直接引到服务端
   • 缺点：开发效率低， 改需求需要修改两端代码。

客户端渲染

1. 是什么？

   • 客户端 通过js程序生成dom元素。

2. 优缺点

   • 优点： 用户体验好。服务端只提供数据，不关心用户界面。提高开发效率。
   • 缺点：不利于seo， 不利于spider抓取网页。

二、Nuxt.js工作原理

1. nuxt会提供一个node.js服务器。 浏览器请求后，先去请求nodejs服务，node服务再去请求服务器，服务返回数据后，返回给node，node生成html再返回给客户端。
2. 基于vuejs

三、基本使用

• 项目创建 npx create-nuxt-app <项目名> 或 npm install --save nuxt

  1. npm 自带的有 npx

• 目录结构

  - assets   // 静态资源- css /image /js等.
  - components  // 组件存放
  - layouts  // 页面主布局 相当于APP.vue
  - middleware // 中间件存放
  - pages    // 主页面 此文件夹文件会自动生成相对路由(按文件名生成)
  - plugins  // 用于存放引入插件的js
  - static   // 静态资源-不需要经过处理的
  - store    // vuex
  
  nuxt.config.js  // nuxt 相关配置.
  

• nuxt.config.js 相关配置

  head: { 
        title: '', 
      meta: [],  
      link: []
  },
  loading: { color: '#3B8070' },  // 加载时的顶部进程颜色
  css: [],     // 引入css
  plugins:[],  // 引入插件 js
  router: {},  // 配置router相关内容.
  build: {}    // 配置webpack相关内容.

四、使用中遇到的问题

• windows / document 未定义. 这个错误的原因是因为 调用windows和document对象的时间不对. 需要在mounted中进行调用(有待商定..查找资料的答案都是一些插件中遇到的,且使用的解决方案是官方提供的特殊值的判断, 而这次碰到的只是在页面中使用,同时放入mounted中调用就可以.)

  // 官方示例
  if (process.client) { 
      // 调用一些插件, windows对象等
  }

• 插件的配置使用.

  1. ​ 需要在plugins文件夹下的js文件中进行配置,之后需要在nuxt.config中进行载入.载入时可选是否服务端渲染. {src: '@plugins/elemetn.js', ssr: true}

• 文件路径

  1. 在文件中使用~代表绝对路径, 也可以使用相对路径../来引入.

• 路由问题.

  1. 表现: 打包后, 切换到about路由后 刷新页面会出现路由名称变化,以及在判断路由名决定路由active样式时 刷新后会active会显示是 index路由.

     1. 解决方案: 使用vuex 存放activePath 进入页面先更新activePath.

  2. 为什么出现这个问题?

     1. 打包方式问题.

• 打包问题.(静态发布, nuxt generate就可以满足需求.)之后添加动态新闻模块就需要通过nuxt build 来打包发布.

  1. nuxt build 需要配合 nuxt start 使用.

     1. nuxt build: 利用webpack编译应用，压缩JS和CSS资源（发布用）
     2. nuxt start: 以生产模式启动一个Web服务器 (需要先执行nuxt build)。
  2. nuxt generate 生成静态文件. 依据路由配置生成对应的HTML文件 (用于静态站点的部署)
  3. 二者打包的区别: generate 命令是产生静态文件,之后通过调取后台接口来的数据就不能是服务端渲染.以及页面不会同步更新.也是不能够监听到动态路由的变化.(需要在配置文件中进行配置)

     build 和 start 则是真正的启动服务端渲染模式.

五、与vue的不同点

1. 项目结构不同(nuxt详情见基本使用)

2. 使用插件配置不同

   1. nuxt需要单独配置,并在配置文件中引用.
   2. vue只需要在main.js中引用挂载即可.

3. 样式引入不同

   1. 同样需要在配置文件中引用.
   2. vue只需要在main.js中引入即可.
4. 渲染模式不同(服务器渲染/客户端渲染)