Vue3经验
# 前言
杂七杂八的小技巧太特么多了,就一篇文章多多记录吧🐶
# Vue3+Vite
配置路径使用别名@
安装
@types/node
# 安装@types/node npm install @types/node --save-dev
1
2修改
vite.config.js
,也不知道咋描述,对着下面的抄吧,我是新手安心食用import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; // 👇这是新增的 import path from "path"; //这个path用到了上面安装的@types/node export default defineConfig({ plugins: [vue()], // 👇这是新增的 resolve: { alias: { '@': path.resolve('./src') // @代替src } } })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Vue3+Vite
全局使用axios
,解决axios
跨域问题
安装
axios
npm i axios --save
1在
main.js
中引入axios
import { createApp } from "vue"; import App from "./App.vue"; // 👆的不用管 // 引入axios import axios from "axios"; const app = createApp(App); app.config.globalProperties.$http = axios; app.mount("#app");
1
2
3
4
5
6
7
8
9
10【解决跨域】修改
vite.config.js
import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { proxy: { <!-- 此处的/api是取的别名,等同与下面的target路径,在实际中使用的使用/api/ --> "/api": { target: "http://127.0.0.1:8088/test/api", //实际请求地址 <!-- 这里算是处理跨域的核心 --> changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ""), }, }, }, });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18使用
<!-- 我服务端的实际路径为 http://127.0.0.1:8088/test/api/general/getUser --> import { getCurrentInstance } from "vue"; function getOrderList() { // 临时默认为1000004 proxy.$http.get("/api/general/getUser").then((response) => { console.log(response); }); }
1
2
3
4
5
6
7
8
# 使用<script setup>
时如何使用onMounted
<script setup>
import {onMounted} from "vue"
function GNews() {
console.log("1111")
}
onMounted(()=>{
GNews()
})
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# Vue
中href
的链接拼接
// 1. 使用:href而不是href
// 2. 外部的双引号只是语法格式
<a :href="'https://www.juliangip.com/news/'+obj.id+'.html'"></a>
1
2
3
2
3
# elementui
中el-radio
不执行@click
将@click
变更为@click.native
# elementui
中el-radio-group
内部的el-radio
值改变如何传值
@change="((label)=>{changeValue(label, item, index)})"
1
# Vue3
使用 iconify
yesicon
是基于iconify
做的可视化页面,所以yesicon
也参考这个来处理即可
先安装
@iconify/vue
,web
根目录下运行npm install --save-dev @iconify/vue
或yarn add --dev @iconify/vue
调用
<template> <Icon icon="mdi:home" style="font-size: 24px;" /> </template> <script setup> import {Icon} from "@iconify/vue"; ... </script>
1
2
3
4
5
6
7
# Vue3
中使用 v-model
和 v-model:value
的区别
v-model
的机制是:
- 绑定
value
为父组件传入的值 - 触发
update
事件将值回传给父组件
当你在使用类似 ...formValue
来获取整个 form
的值时,v-model
会将整个 form
的值传递给父组件,而 v-model:value
只会将当前 input
的值传递给父组件,所以在使用 v-model
时,需要注意这一点。
更新时间: 2024/1/13 18:26:34