vue3实现chatgpt效果

转载

mob64ca1406d617 2024-09-14 11:26:59

文章标签 vue3实现chatgpt效果 vue3.x搭建项目 vue3.x+vite+ts App css 文章分类 深度学习人工智能

一、创建项目、安装组件库

1、创建vue3.x项目

npm init vue@latest

vue3实现chatgpt效果_vue3.x搭建项目

2、项目中安装 element-plus

# NPM
npm install element-plus --save

# Yarn
yarn add element-plus

# pnpm
pnpm install element-plus

3 、在mian.ts中引入并配置element-plus（完整引入）element-plus连接

import { createApp } from "vue";
import { createPinia } from "pinia";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
import router from "./router";

import "./assets/main.css";

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.use(ElementPlus);

app.mount("#app");

5、在组件中直接使用 element组件即可

<template>
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button>中文</el-button>
  </el-row>
</template>
<script lang="ts" setup>
</script>

二、安装自动导入插件

vue3中使用ref、reactive、生命周期函数等需要手动导入才可以使用，安装插件去做自动导入

import { nextTick, onMounted, reactive, ref } from "vue";
let bool = ref(false)

1、安装插件unplugin-auto-import

npm i -D unplugin-auto-import

2、在vite.config.ts中配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from '@vitejs/plugin-vue-jsx';
// 引入自动导入插件
import AutoImport from 'unplugin-auto-import/vite'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    //配置jsx
    vueJsx(),
    // 配置自动导入，dts配置需要重新运行才可以在src中生成auto-import.d.ts文件
    AutoImport({
      imports: ['vue'],
      dts: 'src/auto-import.d.ts'
    })
  ],
  server: {
    host: "0.0.0.0",
    port: 8088,
  },
});

注意：配置dts后需要重新运行 npm run dev 才可以生成auto-import.d.ts 文件

三、安装状态管理pinia，如何创建项目时候选择安装pinia的话可以忽略此步骤

1、安装pinia

npm install pinia

2、main.ts中引用

import { createApp } from "vue";
import { createPinia } from "pinia";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
import router from "./router";

import "./assets/main.css";

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.use(ElementPlus);

app.mount("#app");

3、项目src下创建文件stores/counter.ts

import { defineStore } from 'pinia'

//counter  为id
export const useCounterStore = defineStore('counter', {
  state: () => ({
    counter: 0
  }),
  getters: {
    doubleCount: (state) => state.counter * 2
  },
  actions: {
    increment() {
      this.counter++
    }
  }
})

或者这样写 name 名称也是id，是必要的 Pania 使用它来将商店连接到 devtools。将返回的函数命名为use...是可组合项之间的约定，以使其使用习惯。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    counter: 0
  }),
  getters: {
    doubleCount: (state) => state.counter * 2
  },
  actions: {
    increment() {
      this.counter++
    }
  }
})

4、在组件中使用

<template>
  <h1 @click="cahnge">{{ useCounter.counter }}</h1>
</template>
<script lang="ts" setup>
import { useCounterStore } from "../stores/counter"
const useCounter = useCounterStore()
const cahnge = () => {
  useCounter.increment()
}
useCounter.$subscribe((args, state) => {
  console.log("store", args, state)
})
</script>

5、状态管理做持久化处理，简单的可以直接用locaStorage存储，或者写个插件可以查看之前的一篇文章

四、安装全局事件发布订阅mitt

在vue2 中我们可以创建一个新的 const eventbus = new Vue() 实例去做事件广播，但是在vue3.x中不允许我们这样做，我们可以使用插件mitt实现

1、安装mitt

npm install mitt -S

2、在 main.ts 中全局引用

import { createApp } from 'vue'
import App from './App.vue'
import './assets/css/reset.css'
import mitt from 'mitt'
const Mit = mitt()
const Vue = createApp(App)
// 全局声明 获取mitt所有的类型
declare module 'vue' {
  export interface ComponentCustomProperties {
    $Bus: typeof Mit
  }
}
//全局挂载
Vue.config.globalProperties.$Bus = Mit
Vue.mount('#app')

3、组件中使用

A.vue 发布事件

<template>
  <div class="header">
    <button @click="sendEmit">派发事件</button>
  </div>
</template>
 
<script setup lang="ts">
import { getCurrentInstance } from 'vue';
 
let instance = getCurrentInstance()
 
let sendEmit = () => {
  instance?.proxy?.$Bus.emit('on-paifa', 'mitt 全局广播事件')
 
}
</script>
 
<style lang="less" scoped>
 
</style>

B.vue 订阅事件

<template>
  <div class="b-div">
    <h1>我是BBBBB组件</h1>
    <h5 style="color: #fff;">{{ name }}</h5>
  
  </div>
</template>
 
<script setup lang="ts">
import { getCurrentInstance, inject, Ref, ref } from "vue";
 
let instace = getCurrentInstance()
instace?.proxy?.$Bus.on("on-a", (res: any) => {
  name.value = res
  console.log("res", res)
})
</script>
 
<style scoped>
 
</style>

派发多个事件

import { getCurrentInstance } from 'vue';
 
 
let instance = getCurrentInstance()
 
let sendEmit = () => {
  instance?.proxy?.$Bus.emit('on-paifa', 'mitt 全局广播事件')
  instance?.proxy?.$Bus.emit('on-a', 'mitt 全局广播事件AAAA')
 
  instance?.proxy?.$Bus.emit('on-b', 'mitt 全局广播事件BBBB')
 
}

订阅多个

import { getCurrentInstance } from 'vue';
 
 
let instance = getCurrentInstance()
 
//type 事件名称  res传参
 instance?.proxy?.$Bus.on('*', (type: any, res: any): void => {
  console.log("mitt派发======", type, res)
})

卸载监听 $Bus.off('事件名称', fun())

let fun = (res: any) => {
  console.log("mitt派发======", res)
  tname.value = res
 
}
 
instace?.proxy?.$Bus.on('on-paifa', fun)
 
setTimeout(() => {
  // 卸载监听
 instace?.proxy?.$Bus.off('on-paifa', fun)
}, 2000)

卸载全部监听

// 卸载全部监听
instace?.proxy?.$Bus.all.clear()

全局挂载方法

Vue.config.globalProperties.$Bus = Mit

获取全局方法（多种）

<script setup lang="ts">
import { getCurrentInstance, inject, Ref, ref } from "vue";
 
//第一种
let instace = getCurrentInstance()
instace?.proxy?.$Bus.on()
 
//第二种
let { appContext: { config: { globalProperties: $global } } } = getCurrentInstance() as any
 
$global.$Bus.on()
console.log("aaaa", $global)
 
//第三种
let { proxy } = getCurrentInstance() as any
proxy.$Bus.on()
 
</script>

具体可以参考这篇博客