vue日常笔记
大约 1 分钟
npm 镜像
npm config set registry https://registry.npmmirror.com
# 取消
npm config rm registry
vite 创建项目
yarn create vite app-name --templet=vue
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', '')
}