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

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

bootstrap5

bulma

https://bulma.io/documentation/overview/start/

npm install bulma

获取浏览器信息

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

npm i ua-parser-js

获取en值

// .env
app_name=orangbus

process.env.app_name

Vue数组操作

let data = [
    {id:1,name: 'orangbus1'},
    {id:2,name: 'orangbus2'},
    {id:3,name: 'orangbus'},
];
// 新增
data.push({id:4,name:'orangbus4'});
// 删除
data.splice(index,1); //index 数组的索引

父组件给子组件传值

父页面

// content: 可以自定义
<content :content="value"></content

子页面,接受父组件传过来的值

props: [
    type: Number,
    default:()=> 0 //这里接受父组件传过来的值，然后就可以直接在页面中直接渲染，不用再data中定义
],
// 使用
{{ content }}

数据没有及时渲染

<parent-item :id="id">
    
 id:0

假如说我们把父组件的id改为：10

// 子组件
props: {
    active_id: { //活动id
        type: Number,
            default: () => 0
    }
},

console.log(this.id) // 这里还是初始化的：0
this.$nextTick(function () {
   console.log(this.id) // 这里会变成改变后的：10
})

父组件删除子组件数据

<template>
    <div>
        <h1>子组件内容</h1>
        <h1 v-for="(item,index) in list" :key="index">
            {{item.name}}
            <button @click="delRemove(index)">删除</button>
        </h1>
    </div>
</template>
<script>
export default {
    name: "Demo",
    data(){
        return {
            list:[
                {id: 1,name:"orangbus1"},
                {id: 2,name:"orangbus2"},
                {id: 3,name:"orangbus3"},
                {id: 4,name:"orangbus4"},
                {id: 5,name:"orangbus5"},
            ],
        }
    },
    methods:{
        delRemove(id){
            let That = this;
            let data = {
              data: That.list,
              key: id
            };
            That.$parent.getChiren(data);
        }
    }
}
</script>

getChiren(arr){
    let {key,data} = arr;
    data.splice(key,1);
    this.list = [];
    this.list.push(...data);
}

Vue 使用axios分片上传

方式1

Vue的界面

 <input type="file"/>

上传方法

fileUpload: function () {
    var num = 1
    var file = document.querySelector('input[type=file]').files[0]
    // var file = $("#file")[0].files[0];
    // this.msg.split('').reverse().join()
    // 声明一个FormData对象
    var formData = new FormData()
    var time = new Date().getTime()
    // 每片文件大小为5M
    var blockSize = 5 * 1024 * 1024
    var blockNum = Math.ceil(file.size / blockSize)
    var nextSize = Math.min(num * blockSize, file.size)
    var fileData = file.slice((num - 1) * blockSize, nextSize)
    formData.append('file', fileData)
    // 文件名
    formData.append('name', file.name)
    // 总片数
    formData.append('chunks', blockNum)
    formData.append('md5', time)
    formData.append('uid', '13570')       
    let config = {
        headers: {
            'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
        }
    }       axios.post('http://xxx/fileUpload', formData, config)
        .then(response => (
        this.info = response
    ))
        .catch(function (error) { // 请求失败处理
        console.log(error)
    })
}

方式2

Vue变量引用值联动

let fields = JSON.parse(JSON.stringify(that.fields));

let newFields = fields; //引用的是同一个数组

that.fields = fields; //引用的是不同的数组

代理

"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缓存

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