在Vue2项目中遇到的问题汇总

1 问题1： Proxy error: Could not proxy request /students from localhost:8080 to http://localhost:5000/.See ht

Proxy error: Could not proxy request /students from localhost:8080 to http://localhost:5000/.See ht

终端报错：


浏览器报错

这个里面给的文件没有打开，打开之后就正常了



最后显示：

2 vue-[Vue warn]: data functions should return an object

问题描述
在创建相应的vue页面组件时，引入组件后运行测试即出现现象中的报错问题。如下问题时vue页面开发中常见的一个问题
现象

当前问题是指向headcard.vue组件
解决方案
在headcard.vue中添加return{}返回值
在使用组件化的时候对应的组件中如果没有任何参数，也必须将retur{} 返回值加上。如果不加上则当前组件的数据会变成全局可视，则造成变量污染。加上return则组件数据只能当前组件可视，不会影响到其他组件

3 问题3 Component name “Home“ should always be multi-word vue/multi-word-component-names

报错！
原因：命名问题
方法：在vue.config.js中添加lintOnSave:false；

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})
//  在vue.config.js中添加lintOnSave:false；

4 问题4：Can’t resolve ‘vue-router’ in （Vue3搭建项目中遇到的问题）

使用Vue-cli搭建好默认项目后，想要用路由功能，但是报错

Can’t resolve ‘vue-router’ in xxxx(某路径)

这是因为缺少包的原因
在命令行中运行一下命令重启项目即可解决

npm install vue-router

但是有在 安装插件的时候出现了错误
这里遇到的错误是：npm vue-router报错

下面在package.json文件的dependencies中添加"vue-router": "^3.5.3"如下图

然后再输入npm install vue-router@next --save进行安装就可以安装成功了

5 已声明“ ”，但从未读取其值。ts(6133) 原因及解决方法

在写 js 代码中，创建新的元素标签可能会遇到下面一种情况，告诉我们这个标签元素已声明，但从未读取其值，我们点击下面的快速修复，它又会把这行代码删除。

2、这其实不是代码出现错误问题了，只不过是我们没有调用这个标签元素，只需要在后面的代码中使用这个元素标签，它就会恢复正常。

6 Vue 报错: Property or method “handleOpen“ is not defined on the instance but referenced ...

Property or method “xxx” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
属性或方法“xxx”不是在实例上定义的，而是在呈现期间引用的。通过初始化该属性，确保该属性是反应性的，无论是在data选项中，还是在基于类的组件中。

根据关键词全局搜索发现：
某属性或者某方法没有定义，查看data或者methods或者prop

解决：

export default {
 data(){
  return{
    xxx:""
  },
 methods:{
    xxx(){}
 }
 },
}

7 解决报错：Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)

解决办法：
出现该情况的原因是vue-router安装的版本太高，一般vue2的项目对应的版本是vue-router@3版本
①在控制台输入： cnpm install --save vue-router@3.5.3 重新安装vue-router即可解决
如果没有安装cnpm命令的，可以先安装：cnpm install
②如果安装了cnpm 命令，则在控制台输入： cnpm install --save vue-router@3.5.3 重新安装vue-router即可解决
③没有cnpm命令 也可 则在控制台输入： npm install --save vue-router@3.5.3 重新安装vue-router即可解决