背景
因为公司的信息安全要求,不得不将我们使用的特别熟练的vue2.0升级到vue3.0,所以只能去踩坑了啊
踩坑点
1.vite配置按需引入element-plus,无需再手动引入了
2.自动导入的element-plus的icon的使用图标组件为
<i-ep-edit />
3.父组件调用子组件方法,需要在子组件defineExpose注册以后,父组件才能调用成功
4.css样式中的写法 /deep/ ==> :deep()
5.computed 使用的时候要用.value获取值
6.图片获取的两种方式
第一种 import img from '@/assets/img.png'
第二种 new URL('../../assets/img.png',import.meta.url).href (路径只能为相对路径)
7.vue3.0废弃了this.$set,想要将值变为响应式,可以直接给值包裹ref或者reactive (选项式写法同样适用)
8.国际化的两种写法
import {useI18n} from 'vue-i18n'
const {locale,t} = useI18n()
第一种 直接在template中使用t,将国际化内容当做k传入t函数中,可实现响应式
<template>
{{t('submit')}}
</<template>
<script setup>
</script>
第二种 script中使用t,想要在template中获取响应式,需要computed包裹一层
computed(() => t('submit'))
9.全局组件的第二种创建方式
https://zhuanlan.zhihu.com/p/621292846?utm_id=0