nuxt.js框架记录

优点：服务端渲染（ssr）、有利于seo

nuxt官网链接：关于 Nuxt.js - NuxtJS | Nuxt.js 中文网

目录结构： 

页面组成：

1.布局文件（根组件）：保存在layouts目录中、所有的页面都是布局文件中的子组件

2.页面组件（页面）：保存在pages目录、一个文件就是一个路由页面

3.组件文件（组件）：保存在components中、在每个页面中使用的组件

 布局文件：

总结：布局页面包含页面组件，在布局页面使用<Nuxt/>内置组件占位，用于路由匹配到的页面组件

<template>
   <div class="container">
        <h1>layout Page</h1>
        <Nuxt />
   </div>
</template>

页面文件可以指定布局文件、需要在页面文件中配置指定布局文件名称

<template>
    <div class="home">
        <h3>Home Page</h3>
        <Goods />
    </div>
</template>
<script>
export default {
   layout:'blog'
}
</script>

自定义错误页面

在布局文件中定义一个名为error.vue的错误页面、当访问路由不存在时、就会显示这个页面

error.vue被认为是页面组件

路由：

1.nuxt内置router、创建页面路由只需要创建页面组件就自动生成相应路由、路由url与文件夹名称有关

2.相关内置组件:<nuxt>放在布局组件用户展示当前路由的页面组件、

<nuxt-link to='url'>放在需要进行指定路由跳转处、

<nuxtChild>放在页面路由嵌套二级路由处

3.路由切换激活类名：

目标：当前路由选中后<nuxt-link>组件会自带激活类名

nuxt-link-active 模糊匹配

nuxt-link-exact-active 精确匹配

路由参数：

1.查询参数：

路径	对应文件	页面中接受
/goods?id=100	pages/goods.vue	$route.query.id
/goods/?id=12&sort=apple	pages/goods.vue	$route.query.id/$route.query.sort

2.路径参数：以_参数名固定形式创建文件及文件夹

路径	对应文件	页面中接受
/goods/100	/goods/_id.vue	$route.params.id
/goods/100	/goods/_i.vue	$route.params.i
/goods/100/200	/goods/_cid/_gid	$route.params.cid/$route.params.gid

asyncData:

使能够在设置组件的数据之前异步获取或处理数据

asyncData什么时候用及能在什么地方用：

1.只能在页面组件中使用

2.在获取页面初始化异步数据时使用

使用asyncData优势：

在这里获取的数据会显示在页面源代码中、有利于seo

特点：

默认具备很多参数：如query、params、route

刷新时机：服务端刷新----页面刷新时、页面刚启动

客户端刷新----路由跳转时

<template>
     <div class="home">
         <h1>{{ msg }}</h1>
     </div>
</template>

<script>
export default {
    asyncData () {
        return {
            msg:'hello nuxt.js'
        }
    }
}
</script>

内置组件运行说明：

功能	执行的位置
中间件	服务器 或者路由更新
asyncData	服务器或者路由更新
fetch	服务器或者路由更新
beforeCreated, created	服务器或者路由更新
nuxtServerInt	服务器端

中间件：

就是目录中middleware文件夹下的js文件、返回处理函数、用于处理路由跳转前需要执行的操作

应用场景：路由守卫、权限判断等

使用中间件注意事项：

中间件会在前端后端都执行、所以写代码时要判断环境---process.server判断是否为服务端渲染

只有前端能操作浏览器

中间件执行流程顺序：1.nuxt.config.js;2.匹配布局；3.匹配页面

全局中间件：nuxt.config.js配置

  router:{
    middleware:'auth1'
  },

局部中间件：

<template>
   <div>
       <h1>布局文件</h1>
       <Nuxt/>
   </div>
</template>

<script>
export default {
  middleware:'auth2'
}
</script>

总结：

中间件：在访问一个组件之前自动执行的函数

中间件执行范围有三种：

1.全局执行：在加载所有的组件之前都会被自动调用----》配置文件中配置

2.布局文件执行：在某些组件加载之前会被自动执行---->布局文件中指定

3.单个文件执行：在某一个组件加载之前会被执行--->直接写在这个文件中即可

中间件执行时机：

1.在服务端、客户端都会执行

less、sass预处理语言使用

实现思路：

1. yarn/npm 安装less依赖包：yarn add less less-loader@7.3.0

2. 安装@nuxtjs/style-resources： yarn add -D @nuxtjs/style-resources

3. 配置nuxt.config.js

css: ['~/assets/less/base.less'],  
 buildModules: [
    '@nuxtjs/style-resources'
  ],
  // global style resources 配置全局less变量
  styleResources:{
     less:[ '~/assets/less/variables.less']
  },

插件（plugins）：

插件就是目录中plugins文件夹中的js文件、在每次刷新页面时都会在服务器和客户端执行一遍。

用途：

当我们需要使用第三方的库时（element ui,vant、axios等），通过插件来集成到vue中

插件分类:

1.默认插件、客户端和服务器端都会自动执行

        注入插件：插件注入后、可以在整个应用程序中都可以使用、典型应用场景是axios的封装

        vue插件：插件注入后、可以结合vue进行辅助开发、典型应用场景是vant、elementui使用

2.客户单插件：只在客户端自动执行的插件

3.服务端插件：只在服务端自动执行的插件

默认插件：

nuxt.config.js配置

 plugins: [
    '~/plugins/test'
  ],

客户端插件：

  plugins: [
      {src:'~/plugins/test', mode:'client'}  // 如果只在服务器端渲染只需要把mode：'server'  如果客户端和服务端都执行，设置mode：’both‘
  ],

vue插件：

plugins/tooptips.js

import Vue from 'vue'

import tooltip from 'v-tooltip';

Vue.use(tooltip);

nuxt.config.js

 plugins: [
    '~/plugins/tooltip'
  ],

总结：

插件就是一个写在plugins目录下的js文件

需要在nuxt.config.js中配置两端运行还是指定某一端运行

每次刷新页面插件都会预先执行

用途：项目中集成第三方库或插件

设置页面头信息：

由于在浏览器渲染页面成html结构、想要实现更好的seo、设置meta是必不可少的方式

设置方式：

全局设置（为所有页面设置同样的head信息）

页面设置：在页面中使用head（）设置每个页面的头信息

        在设置头信息时添加hid可以覆盖全局的同名标签

除了设置每个页面的头信息之外、还可以用来加载js、css等外部文件

全局设置页面头信息：

nuxt.config.js中配置

 页面设置头信息：

<script>
export default {
  name: 'documentToolsIndex',
  head() {
    return {
      title: `首航智慧中心-文档与工具`,
      meta: [
        {
          hid: 'description',  //标识编号
          name: 'description',
          content: '丰富的产品文档、教程与工具'
        }
      ]
    }
  },
}
</script>

项目部署：

方式一：动态部署

使用内置的node服务器（动态网站）

yarn build /npm run build ------>上线前打包

yarn start /npm run start ------->启动服务器

特点：启动了一个内置node服务器

每次访问时、都要运行node服务器的代码、然后调用接口重新渲染页面（实时渲染/动态页面）

缺点：性能慢、每次访问数据都需要连接数据库、调用接口重新渲染页面

优点：页面中数据是实时更新的

方式二：静态部署

yarn generate ------>生成静态页dist

特点：生成静态页（预先执行代码、把渲染好的页面保存成静态页）

以后每次访问、直接返回静态页（静态页面）

缺点：数据是生成时的数据、所以如果数据库中的数据发生变化、他不会变化。

        解决方法：

                频繁数据变化的页面使用动态页

                数据更新频率不高，就定期更新一次、比如（凌晨2点更新）

优点：性能高、高并发

性能比较：动态网站<静态网站

发布上线：

nginx部署：

生成静态页之后、将dist上传到服务器、通过nginx部署；

nginx：目前最流行的http服务器、支持高并发

部署流程：安装nginx

修改配置文件---->nginx -t（检查文件是否正确）

启动服务器nginx nginx安装目录地址 -c nginx配置文件地址

停止nginx：    nginx -s stop

重启nginx： nginx -s reload