使用Vue组件vue-typed-js实现Chat_Gpt流式字幕输出效果_vuetypedjs

先看效果

一、安装组件

npm install --save vue-typed-js

安装组件期间遇到的问题以及解决方案： 

以下是运行命令后的第一个报错信息：

PS G:\vx-pc\blog-friend> npm install --save vue-typed-js 

npm WARN using --force Recommended protections disabled.

npm WARN ERESOLVE overriding peer dependency

npm WARN While resolving: @vue/eslint-config-standard@6.1.0

npm WARN Found: eslint-plugin-vue@8.7.1

npm WARN node_modules/eslint-plugin-vue

npm WARN   dev eslint-plugin-vue@"^8.0.3" from the root project

npm WARN

npm WARN Could not resolve dependency:

npm WARN peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0

npm WARN node_modules/@vue/eslint-config-standard

npm WARN   dev @vue/eslint-config-standard@"^6.1.0" from the root project

npm WARN

npm WARN Conflicting peer dependency: eslint-plugin-vue@7.20.0

npm WARN node_modules/eslint-plugin-vue

npm WARN   peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0

npm WARN   node_modules/@vue/eslint-config-standard

npm WARN     dev @vue/eslint-config-standard@"^6.1.0" from the root project

npm ERR! code ENOENT

npm ERR! syscall spawn git

npm ERR! path git

npm ERR! errno -4058

npm ERR! enoent An unknown git error occurred

npm ERR! enoent This is related to npm not being able to find a file.

npm ERR! enoent

错误消息指示可能存在依赖项的冲突。

1. 打开项目中的package.json文件，在dependencies 或 devDependencies 部分查找eslint-plugin-vue版本是否为7.20.0版本。如果不是请在终端中运行以下命令来更新依赖项的版本。完成后重新运行该命令：npm install --save vue-typed-js

npm install eslint-plugin-vue@7.20.0

如果你遇到的是以下报错信息：

G:\vx-pc\blog-friend> npm install --save vue-typed-js
npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
npm ERR! errno -4058
npm ERR! enoent An unknown git error occurred
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

这个错误通常是由于npm无法找到git的路径而引起的。这可能是因为你的计算机上没有正确设置或安装git，或者git的执行路径没有正确配置。

如果您已经正确安装了git，但npm仍然无法找到它，请确保git的可执行文件路径已正确配置到系统的PATH环境变量中。尝试重启计算机以确保新的环境变量生效。

如果你没有安装git，你可以从git的官方网站（https://git-scm.com/downloads）下载并安装最新版本的git。

配置Git后依然报同样的错误信息请使用以下办法100%解决：

桌面右键菜单项选择git bash here打开窗口运行以下几条命令：

npm init -y
 
npm i
 
npm install vue-typed-js

二、main.js引入

import Vue from 'vue'
import VueTypedJs from 'vue-typed-js'
 
Vue.use(VueTypedJs)

三、使用

<template>
  <div>
        <vue-typed-js
          class="desc"
          :strings="typingTexts"
          :loop="true"
          :startDelay="300"
          :typeSpeed="100"
          :backSpeed="50"
          :showCursor="false"
        >
          <span class="typing"></span>
        </vue-typed-js>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      typingTexts: [
        "我可以成为任何人，但任何人不是我",
        "我只想做自己",
      ],
    };
  }
};
</script>

参数说明：

您可以收听以下事件：

最后附一下 vue-typed-js这个插件的地址：GitHub - Orlandster/vue-typed-js: Typed.js integration for vue.js. Create a typing animation.

总得来说，挺好用的。