vue2项目常见错误

445 阅读1分钟

创建脚手架时关闭eslint语法检测

在vue.config.js配置文件中添加配置lintOnSave:false

解决Vue项目关于‘TypeScript intellisense is disabled on template. To enable, configure `"jsx": ’错误

  • 找到根目录下jsconfig.json文件。
  • 添加上 "jsx":"preserve"

安装完vue-router报一堆错误

根据错误提示,在命令行中加入–legacy-peer-deps,由于vue与vue-router版本兼容的问题,需要在安装语句后加入需要下载vue-router版本,不然会下载最新的vue-router版本。

npm install --legacy-peer-deps vue-router@4.0.13

显示:在APP组件中

Vue 引入路径正确的,但一直报错: Already included file name ‘××ב differs from file name ‘××ב only in casing.

解决方法:去掉.vue后缀

get请求后端接口

      const {data} = await axios.get("http://join.marchsoft.cn/api/adminUser/adminLogin", {
        params: {
          info: this.loginNumber,
          password: this.password
        }
      })
    }

是否跳转:判断message与statue的值是不是分别为 SUCCESS 和 0

跳转路由时$router无需注册 跳转:

this.$router.push({
          //目的路由组件
          path:'/home'
        })

替换:

this.$router.replace({
           //目的路由组件
          path:'/home'
        })

路由的重定向

var router = new VueRouter({
  routes:[
    // {path:'/', redirect:'跳转到的路由地址'}
    {path:'/', redirect:'/home'},
    {path:'/home', component:Home}
  ]
})

后端给我返回的格式如下,我要根据他提供的数据,将其转变为文字:

我们可以在需要处理行里,加入:formatter方法,具体代码如下:

<el-table-column prop="protocolType" label="协议类型" :formatter="formatProtocolType" > </el-table-column>

//table 表格

<el-table>
    <el-table-column prop="type" label="案件类型" :formatter="sfktFormate"></el-table-column>
</el-table>

添加formatter属性对应的sfktFormate是一个方法

//table表格格式化
    sfktFormate(row,index){
      if (row.type == 1) {
        return "男";
      } else if(row.type == 0){
        return "女";
      }
    }

块级元素居中

.lcontainer{
    text-align: center;
    width: 100%;
}
.juzhong {
    width: 60%;
}

TypeError: Cannot read properties of undefined (reading ‘post‘) 无法读取未定义的属性(读取“post”)

在main.js中:全局axios改为:

import axios from 'axios'

Vue.prototype.$axios = axios

Error in v-on handler (Promise/async): “TypeError: Cannot read property ‘status‘ of 问题详解

解决方法: 导出的方法为按需导出 但是在另外组件中导入该方法时没有进行按需导入 只需要在组建中对该方法添加{ }进行按需导入