vue日常笔记

npm 镜像

npm config set registry https://registry.npmmirror.com

# 取消
 npm config rm registry

vite 创建项目

yarn create vite app-name --templet=vue

https://cn.vitejs.dev/

vue-router

https://router.vuejs.org/zh/installation.html

yarn add vue-router@4

// route/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Index from '@/views/index/index'

const routes = [
  {
    path: '/',
    name: 'index',
    component: Index
  }
]

const router = createRouter({
  routes,
  history: createWebHistory(),
  scrollBehavior() {
    return { top: 0 }
  }
})

export default router

// main.js
import router from './route/index.js'

createApp(App)
        .use(router)
        .mount('#app')

// app.vue

<template>
  <router-view />
</template>

pinia

https://pinia.vuejs.org/zh/getting-started.html

yarn add pinia

axios

https://axios-http.com/zh/docs/intro

yarn add axios

拦截器

图标

yarn add @mdi/font

package推荐

vue三剑客

npm i axios vue-router vuex

mdui

npm - mdui --save

获取浏览器信息

https://www.npmjs.com/package/ua-parser-js

npm i ua-parser-js

获取env值

// .env
app_name=orangbus

process.env.app_name

代理

"devServer" : {
    "port" : 80,
    "disableHostCheck" : true,
    "proxy" : {
        "/m1" : {
            "target" : "http://api.000zy.com/provide/vod",
            "changeOrigin" : true,
            "secure" : false
        },
        "/m2" : {
            "target" : "https://caiji.naichaapi.com/inc/apijson_vod.php",
            "changeOrigin" : true,
            "secure" : false
        },
        "/m3" : {
            "target" : "https://m3u8.bdxzyapi.com/api.php/provide/vod",
            "changeOrigin" : true,
            "secure" : false
        },
        "/m4" : {
            "target" : "http://www.kuaibozy.com/api.php/provide/vod",
            "changeOrigin" : true,
            "secure" : false
        }
    }
}

vue+vite 配置代理

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  
  server:{
    proxy:{
      "/ai": {
        target: "http://localhost:11434",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/ai/, "/api/"),
      },
    }
  }
})

vue3缓存

前进请求数据，返回定位到之前的页面

文件上传

如何接收steam输出

func sseHandler(c *gin.Context) {
    c.Header("Content-Type", "text/event-stream")
    c.Header("Cache-Control", "no-cache")
    c.Header("Connection", "keep-alive")
 
    for i := 0; ; i++ {
        // 发送事件数据
        data := fmt.Sprintf("data: %d - %s\n\n", i, time.Now().Format(time.RFC1123))
        _, err := c.Writer.WriteString(data)
        if err != nil {
            c.Error(err)
            return
        }
 
        // 刷新缓冲区，将数据发送到客户端
        c.Writer.Flush()
 
        // 每秒发送一次数据
        time.Sleep(1 * time.Second)
}

const response = await fetch('http://127.0.0.1:7345/api/gpt/get', {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      message: message.value,
      role: role.value,
    }),
  });

  if (!response.body) return;
  const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
  while (true) {
    var { value, done } = await reader.read();
    if (done) break;
    value = value?.replace('undefined', '')
    console.log("received data -", value)
    output.value += value?.replace('undefined', '')
  }