一、v-bind：title="title"绑定之后，鼠标放上去没有反应
问题如下
v-bind：title="title"绑定之后，鼠标放上去没有反应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性绑定和双向数据绑定</title>
<script src="./vue.js"></script>
</head>
<body>
<div id ="root"></div>
<div v-bind:title="title">hello world</div>
<script>
new Vue({
el:"#root",
data:{
title:"this is a apple"
}
})
</script>
</body>
</html>解决办法，应该把
<div v-bind:title="title">hello world</div>
放在id为root的div中
二、Vue.config.productionTip = false为什么不起作用？如何解决？
原来我们刷新页面时，页面从上到下加载，先加载了vue.js文件里面的config.productionTip，而我们是后面改的所以先弹出了警告，其实我们是有改到Vue.config.productionTip的。
那我们该如何修改呢？
我目前的解决办法就是在Vue.js里面直接修改，把他从根源上改成false，然后刷新页面就不会出现警告啦。
三、遍历数组中数值
let person = { 'name': '张三', sex: '男' }
for (let key in person) {
console.log(person[key])
}
三、vue基本使用，黑马教程文本及例子。
四、有时因nodejs版本问题(常见)，不能npm run serve，此时修改根目录package.json中serve内容为
"scripts": {
"serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "vue-cli-service build"
},
即可正常运行。
五、出现vue路由跳转错误：Error: Redirected when going from "/login" to "/home" via a navigation guard. 则每次跳转时加上.catch(() => { })，如：
this.$router.push("/xxx").catch(() => { })
this.$router.replace({ path: "/" }).catch(() => { })六、vue3中代码解决VSCode的Vetur插件has no default export问题，在VSCode的设置里加上(核心是script那个)：
"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,七、vue3项目中报错：Unexpected mutation of "xxx" prop
vue3 中element 弹窗绑定需要通过v-model，这个时候父级会传个dialogVisible（boolean值）过来，结果会报eslint的错。
Unexpected mutation of "dialogVisible" prop，大概就是说不允许在子级修改父级的数据。
问题描述：
<el-dialog :title="title" width="800px" v-model="dialogVisible" destroy-on-close @close="closeCallback">
解决办法；
const dialogShow = computed({
get: () => props.dialogVisible,
set: val => context.emit('update:dialogVisible', val)
})
<el-dialog :title="title" width="800px" v-model="dialogShow" destroy-on-close @close="closeCallback">类似办法也可【coumputed两种用法】：
import type { PropType } from 'vue'
import { computed } from 'vue'
const props = defineProps({
content: {
type: Object as PropType<OptionsType['content']>,
default: () => ({})
}
})
const content_enabled = computed(() => props.content.enabled)八、vue3与tp6前后端分离，调试小结：
1、如果前端vue3调试，可以通过打印console.log()来进行。还有其他办法可参照此教程。
2、如果后端tp6调试，则注意应该是通过tp6运行来进行，而不是仅仅通过vue3调用它的接口进行，否则无法打印中间变量。
九、vue3有关问题。链接地址与关键词：
1、vue3.x中路由跳转不能使用 this.$router 。引入 ctx，使用ctx.$router.push()的话，打包后会出现各种各样的报错问题。要这样来...
2、Vue3使用 this（即ctx）
3、vue3中使用全局变量(vue2x中的Vue.prototype)
4、vue3文件里使用 Vuex（useStore）
十、ElementPlus手动上传文件和JSON对象，前后端代码。部分关键词：axios的data传入formData axios会默认修改请求头为multipart/form-data。
十一、类型“ComponentInternalInstance”上不存在属性“ctx”。
问题：vue3中要使用$el获取元素，但是一直报错
原因：ts类型检测报错
解决：const { ctx } = getCurrentInstance() as any;
十二、vue3+ts+vite+element plus+axios+pinia框架搭建教程地址
十三、前端Uncaught (in promise) 的解决方法：最简单的就是在方法后面加上.catch((e) => {})
十四、在vscode中编写时，vue3+ts使用v-for出现【unknown问题】或【“item”的类型为“未知”】，经反复搜索修改配置，发现仍然不行，可是偶然使用webstorm打开却一切正常，于是思考是不是vscode中插件的问题，逐个插件禁用并重启vscode后，发现Vue Language Features (Volar) v1.6.3这个插件禁用就不显示上述错误了，世界清净啦！
下面是一种具体问题及解决流程(好像不太好用，权当上述问题描述了)：
<template>
<el-table :data="tableData" style="width: 1200px">
<el-table-column
v-for="tableItem in tableHeader"
:fixed="tableItem.fixed"
:prop="tableItem.prop"
:label="tableItem.label"
:width="tableItem.width"
:key="tableItem.prop"
/>
<el-table-column fixed="right" label="Operations" width="180">
<template #default="add">
<el-button type="text" size="small">添加</el-button>
<el-button type="text" size="small">编辑</el-button>
<el-button type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script setup>
import { reactive, readonly, ref } from "vue";
interface TableHeaderItem {
prop: string;
label: string;
width: string;
fixed?: boolean;
}
interface TableDataItem {
id: number;
date: string;
name: string;
state: string;
city: string;
address: string;
zip?: string;
tag?: string;
}
const tableHeader = ref<TableHeaderItem[]>([
{
prop: "id",
label: "Id",
width: "120",
fixed: true,
},
{
prop: "date",
label: "Date",
width: "150",
},
{
prop: "name",
label: "Name",
width: "120",
},
{
prop: "state",
label: "State",
width: "120",
},
{
prop: "city",
label: "City",
width: "120",
},
{
prop: "address",
label: "Address",
width: "600",
},
{
prop: "zip",
label: "Zip",
width: "120",
},
{
prop: "tag",
label: "Tag",
width: "120",
},
]);
const tableData = ref<TableDataItem[]>([
{
id: 1,
date: "2016-05-03",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
tag: "Home",
},
{
id: 2,
date: "2016-05-02",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
tag: "Office",
},
{
id: 3,
date: "2016-05-04",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
tag: "Home",
},
{
id: 4,
date: "2016-05-01",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
tag: "Office",
},
]);
</script>这里的tableHeader我们已经定于好了类型，但是呢，tableItem却识别不出类型来，直接显示unknown类型。经过一番检查发现是tsconfig.json文件配置问题。
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"types": [
"element-plus/global"
],
"isolatedModules": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
由于target: "es5",这个typeScript内置的JS API版本太低，改成 ES2015就行
{
"compilerOptions": {
"target": "es5",
"lib": ["es2017","DOM"],
"module": "commonjs",
"types": [
"element-plus/global"
],
"isolatedModules": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
或者修改新增一下 "lib": ["es2017","DOM"], 也是可以的，如下
{
"compilerOptions": {
"target": "es5",
"lib": ["es2017","DOM"],
"module": "commonjs",
"types": [
"element-plus/global"
],
"isolatedModules": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}说明：有时修改tsconfig.node.json才可以。附：其他相关教程。再次说明，还是发现Vue Language Features (Volar) v1.6.3这个插件禁用有效！
十五、vue3 子组件上绑定(v-model=“dialogFormVisible”) 父组件传过来的值后报错。
1、报错的内容
v-model cannot be used on a prop, because local prop bindings are not writable.
Use a v-bind binding combined with a v-on listener that emits update:x event instead.
2、解决办法
使用watch监听props变化，并用自定义变量接收此属性的值。如下是子组件：
<template>
<el-dialog
v-model="dialogFormVisible"
:before-close="handleClose"
>
<div>...其他代码略</div>
</el-dialog>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits, watch } from "vue";
const dialogFormVisible = ref(false);
const props = defineProps({
show: {
type: Boolean,
}
});
const emits = defineEmits(["closeModal", "handleUpdateProfiles"]);
const handleClose = () => {
emits("closeModal");
};
watch([() => props.show], () => {
dialogFormVisible.value = props.show;
});
</script>以下是父组件调用部分：
<my-dialog
:show="show"
@closeModal="show = false"
/>
<el-button text @click="show = true">
打开对话框
</el-button>
<script lang="ts" setup>
const show = ref<boolean>(false);
</script>
十六、在vscode中提示【找不到模块vue】或【其相应的类型声明】，分析原因是采用typescript不识别vue相关文件，可在src根目录下新建一个vite-env.d.ts文件（可以是其他名字，取决于tsconfig.json文件指定的includes匹配列表，并且注意路径也取决于此配置），输入如下代码即可：
declare module "*.vue" {
import type { DefineComponent } from "vue";
const vueComponent: DefineComponent<{}, {}, any>;
export default vueComponent;
}
十七、用vue-cli3打包时出现：Unexpected console statement (no-console)，解决办法，在根目录下有个.eslintrc.js文件，打开在"rules":{}中最后增加“no-console”或修改其为“no-console”:“off”即可。
十八、警告[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive。解决办法：使用npm/pnpm管理器下载default-passive-events依赖包
npm i default-passive-events -S
入口文件main.js/main.ts引入 即可
import 'default-passive-events'