目录

第一部分：vue中的集成动画

第二部分：配置代理

第三部分：详细总结：

---

第一部分：vue中的集成动画

Animate.css 第三方集成动画有效的解决了程序员编写动画的时间，更轻松、快速的实现动画效果。

1，首先大家在npm中搜索Animate.css  变可以查看到第三方帮我们编写好的动画。若个位粉丝未搜到该网站页面，可以在后面加js就可以了。或者点击我给大家准备的npm官网链接。也可以进入

npm

 

在操作的过程中，可能会有卡顿，很正常，导致卡顿的有以下几点：

1，网络不佳，

2，系统运行过多

3，该页面本身就存在卡顿，所以时间比较长一下

打开后下方会有官方的讲解如何安装与操作

第二部分：配置代理

下面是写法（逻辑步骤）

关于配置前的开启的设置： 

 配置前需要在命令行中编写：npm i axios  进行安装

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

  lintOnSave: true, //关闭语法检查

  transpileDependencies: true,

  //开启代理服务器 (只能代理一个) (方式一)

 devServer: {

    proxy: 'http://localhost:5000'

  },

 //开启代理服务器(方式二)可以代理多个    每改变一个地方均需要启动一次脚手架否则会报错或者不执行

 devServer: {

  proxy: {

    '/api': {//请求前缀名称  作用:用于像中介的数据库请求数据 这里的api可以更改

      target: '',//这里就和上面的地址一样  这里的地址可以更改

                  //由于上面的更改了前缀的名称 所以在此处需要加重写路径

                  //pathRewrite:{'':''} 第一个''内部添加的是key值 第二个''添加的是value值

                  //第一个需要使用正则去写一个匹配条件例: ^/atguigu 那么上面的前缀名称只需要将api换成atguigu即可

                  //实现 用法：匹配所有已atguigu开头的路径  路径的写法：例：http://localhost:5000/atguigu/student

                  ///atguigu/student第一部分是前缀名称，若添加了重新编写路径的方法并使用正则匹配条件 那么就会

                  //过滤掉atguigu  便可以帮你请求获取student文件  否则报错且不能获取 若不修改前缀名可以不添加pathRewrite

                  //

      ws: true,   //用于支持websocket

      changeOrigin: true  // 用于获取数据  该部分为true那么就会称报被获取的服务器端口5000，若false那么就称报获取者端口为8080 好比

      //改为true就会撒谎说自己端口与对方的端口号相同    改为false就会说实话自己的端口是8080

      //changeOrigin: true 用于控制请求头中的host值

    },

 // 另外再增加的部分  该部分是简写

    '/foo': {

      target: ''

    }

  }

}

})

第三部分：详细总结：