- 创建项目使用
npm init vue@latest,然后根据提示进行操作 - ～@报错提示
Can't find stylesheet to import.
解决方案：
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'~@': fileURLToPath(new URL('./src', import.meta.url)) // 这句是新增的
},
},
- 文件名.vue后缀不加找不到文件。解决方案：添加.vue后缀
- static 目录移动到public文件夹下，编译的时候static目录才会被编译到dist目录下
- 移除Vue.config.productionTip
- 移除了Vue.extend，全局组件不能使用Vue.extend，详细内容见文章：vue3 全局弹窗组件编写
- Unhandled error during execution of mounted hook,组件中用到具名插槽，要做对应修改
vue2中写法：
<div slot="header">
我是header
</div>
vue3中写法：
<template v-slot:content>
<div>我是header</div>
</template>
ref 定义响应式变量，reactive定义对象类型变量
router-link的tag移除
// router-link没有移除tag的写法
<router-link class="u-normal" tag="button" :to="`/admin/editinfo?id=${item.id}`">编辑</router-link>
// router-link移除tag后的写法
<router-link :to="`/admin/editinfo?id=${item.id}`" v-slot="{navigate}">
<button class="u-normal" @click="navigate"> 编辑 </button>
</router-link>
- vue2.x中
this.$route,this.$router在vue3.x中的用法
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
function test () {
let name = route.name
console.log(name)
router.push('/')
}
- keep-alive的使用
transition和keep-alive现在必须通过v-slotAPI 在RouterView内部使用：
<router-view v-slot="{ Component }">
<transition>
<keep-alive >
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
- vuedraggable vue3
Extraneous non-props attributes (data-draggable) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
解决方案： draggable下，template内的元素用一个标签包裹起来
<vuedraggable v-model="fileList"
@start="drag = true"
item-key="index"
:component-data="{name:'fade', tag:'section'}"
@end="drag = false">
<template #item="{element, index}">
<!-- template内的元素用一个标签包裹起来 -->
<div>
<div class="item1-list g-row-flex" title="拖动排序">
<div class="item1-list-bg g-row-flex-center">{{element.fileType}}</div>
<div class="item1-txt-wrap">
<input class="txt" type="text" v-model="element.fileName" maxlength="20"/>
<div class="bar" v-if="element.progress!==0"><div :style="'width:'+ element.progress+'%;'"></div></div>
<div class="bar1" v-else></div>
<div class="img-wrap g-row-flex-center" @click="fileDel(index, 1)" v-if="element.progress === 0 || element.state === -1 || element.state === -2 || element.state === 3">
<img src="~@/assets/images/delete.png" />
</div>
<div class="img-wrap g-row-flex-center" v-if="element.state === 1">
<img src="~@/assets/images/success.png" />
</div>
</div>
</div>
</div>
</template>
</vuedraggable>
vue2 mixins在vue3中改用组合式函数，见文章： vue3代码复用——组合式函数
computed的用法
<script setup>
let isAbled = computed(() => {
let {num} = countOpenNum()
return operateTitle.value && num
})
</script>
- props与emit
<script setup>
const props = defineProps({
editData: {
default: () => {
return {}
},
type: Object
}
})
const emit = defineEmits(['cancel', 'ensure'])
...
</script>
- watch
watch只能监听响应式数据，ref定义的属性，reacttive定义的对象，其它数据要使用函数转换
<script setup>
// ...
let cityName = ref('')
const props = defineProps({
page: {type: Number, default: 10}
})
// 监听ref定义的属性
watch(cityName, (val) => {
// 自己的逻辑
})
// 监听父组件传递过来的值
watch(() => props.page, () => {
// 自己的逻辑
})
</script>
