直升vue3.0版本采坑点

160 阅读1分钟

背景

因为公司的信息安全要求,不得不将我们使用的特别熟练的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

10.国际化报错的原因

blog.csdn.net/xiaoxia188/…

11.vite 4.3版本打包iconfont.css文件后 content内容乱码

www.zhihu.com/question/60…

待补充,也欢迎各位大佬帮忙补充