记录一些 关于vue2 -> vue3 杂七杂八的坑
最大的两个问题 :
① element-ui 换了,vue3 用的是 element-plus
②devtools 换了,vue3要安装另一版本的插件 chrome商店 、 github
左边 vue3项目用 右边 vue2 项目用
其他 很多变化 需要看官网
v-lazy 资源包 换成 vue3-lazy
.sync 语法换成 v-model 参考官方
slot 只能加到template标签里,语法 v-slot:xxx 或 #xxx
.native 语法已去除
vscode 报错 ‘v-model’ directives require no argument.
官方解决方案
在VScode中,打开 “文件>首选项>设置” 找到右侧用户设置
搜索vetur.validation,找到下面这句
"vetur.validation.template": false
我解决方案
.eslintrc文件 配置添加
'vue/valid-v-model': 'off',
我的eslint
/*
* @Author: chengsl
* @Date: 2022-01-06 09:29:40
* @LastEditors: chengsl
* @LastEditTime: 2022-10-31 09:59:16
* @Description: Eslint 配置, 本配置针仅对个人编码喜好, 支持的技术栈为: vue3 + element-plus + vue/cli + js + scss
* @40@remarks: vue3框架, 装几个eslint的资源时注意版本, 低版本不兼容;
* 我装的相关的 eslint 插件以及其版本如下:
"eslint": "^8.14.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.7.1",
"@vue/cli-plugin-eslint": "^5.0.8",
*/
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/vue3-recommended', 'plugin:vue/recommended', 'prettier'],
parserOptions: {
ecmaVersion: 2020,
ecmaFeatures: {
jsx: true
}
},
globals: {
axios: true,
Vue: true
},
rules: {
// "no-var": "error", // 要求使用 let 或 const 而不是 var
"no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行
"no-use-before-define": "off", // 禁止在 函数/类/变量 定义之前使用它们
'vue/multi-word-component-names': "off",
'no-console': 'off',
"vue/no-v-model-argument": "off",
'no-unused-vars': 'error',
'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用,此规则仅在启用该no-unused-vars规则时有效。
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/v-model-argument': 'off',
'no-useless-escape': 0,
'vue/valid-v-model': 'off',
'vue/no-v-html':'off' // 允许 v-html 指令,项目中有需要
}
}
// @see: http://eslint.cn
关于 this 和 Vue.prototype 的使用
// vue配置到 Vue.prototype
app.config.globalProperties.$getNowDateTime = function () {
return new Date()
}
// 1.选项式API 取值方式同vue2
console.log(this.$getNowDateTime())
// 2.组合式API
const { $getNowDateTime} = getCurrentInstance().appContext.config.globalProperties
console.log($getNowDateTime())
// 3.单文件组件
import { getCurrentInstance } from 'vue'
const that = getCurrentInstance(); // 获取内部组件实例 ≈ vue2的 this
console.log('that---', that.proxy.$getNowDateTime())
单文件组件的相关语法
import { ref, onMounted, watchEffect, nextTick, getCurrentInstance } from 'vue'
// 定义父组件传递过来的参数
const props = defineProps({
visible: Boolean, // 显示弹窗
customerInfo: {
type: Object, // 顾客信息记录
default: ()=>{}
}
})
// 定义emits
const emit = defineEmits(['update:visible', 'updateCustomerInfo'])
// <el-button @click="$emit('update:visible', false)">取消</el-button>
emit('update:visible', false) // 发消息给父组件 修改visible的值
emit('updateCustomerInfo', {}) // 发消息要父组件执行updateCustomerInfo方法 并传参{}
// 定义组件内的数据
const dialogVisible = ref(false) // 显示弹窗
// 挂载后
onMounted(async()=>{
// 在挂载后生命周期阶段要做的事
await nextTick()
// 重新渲染后 要做的事
const that = getCurrentInstance(); // 获取内部组件实例 ≈ vue2的 this
console.log('that---', that.proxy.$getNowDateTime()) // 参考上方要点1
})
// 监听器
watchEffect(async()=>{
dialogVisible.value = props.visible
if(props.visible) {
await nextTick()
getDialogHeight('.edit-customer-dialog', 200)
}
})
wait ……