vue中问题-错误总结

1:template标签-报下面的错误

 

TypeScript intellisense is disabled on template. To enable,
 configure `"jsx": "preserve"` in the `"compilerOptions"` 
property of tsconfig or jsconfig. To disable this prompt
 instead, configure `"experimentalDisableTemplateSupport": true` in `"
vueCompilerOptions"` property.
 

原因：Vue Language Features插件问题，

解决办法：添加："jsx": "preserve",    //在这里添加"jsx": "preserve",

解决办法，找到文件 jsconfig.json

将这段代码复制进去：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "jsx": "preserve",    //在这里添加"jsx": "preserve",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}
 

2：遇到 运行项目卡起不运行？

原因：在使用vue中，还是个html风格？标签原因哦，在main.js中是否有

Vue.config.productionTip = false //关闭提示

解决方法：

<!--在响应的vue中使劲查看标签是否成对！！！-->
<!-- 错误写法-->
<template>
<template>
</template>
<template>
</template>
</template>

<!-- 正确写法-->
<template>
<div>
<template>
</template>
<template>
</template>
</div>
</template>

3:在使用axios中.出现报500 ，CROC等错误

原因：没有跨域，或者服务端（php）错误

解决方法

// 前端：在mian.js中 或者在你axios的其他地方

//Axios
import http from 'axios'
import './Api/config'
http.defaults.baseURL="https://xxx.com/index.php/"//跨域


//保险起见！前端使用QS 对其封装，请求数据
import Qs from "qs"; //用npm 或cnpm 安装QS
 
var configs={headers:{"Content-Type":"application/x-www-form-urlencoded;charset=UTF-8"}}
this.$http.post('xxx.com/xxx.php',Qs.stringify({action:'ChenpinmoData',},configs))



//后端：申明格式 如果使用的tp框架在public>index.php中

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST,GET');
header('Access-Control-Allow-Credentials:true');
header("Access-Control-Allow-Headers:Accept,Referer,User-Agent,X-Requested-With,Content-Type,token");


//举个例子，后端获取数据,
$action=request()->post('action');
$action=request()->get('action');
//或者
$action=$_POST['action'];

4:在vue js中报错 Delete `␍`eslint 

原因：整个vue js都是红色的？原因插件问题！

解决方法：

执行命令：
yarn run lint --fix   


处理方法2
如果存在.prettierrc文件添加如下配置
"endOfLine": "auto"
如果不存在该文件 打开vscode编辑器的setting.json文件添加如下配置
"prettier.endOfLine": "auto", // 结尾是 auto

5：打开vue 中出现 Component name "XXXXX" should always be multi-word

原因：还是插件问题！

解决方法：

vue.config.js文件中写入lintOnSave:false,修改完毕后重启项目即可

6问题总结下：

许多问题都是eslint校验 在搞鬼！那么怎么才能 避免？

报错一：
ESLint: Missing return type on function.(@typescript-eslint/explicit-module-boundary-types)

解决方法：在.eslintrc.js 里面 加上

 "rules": {
     "@typescript-eslint/explicit-module-boundary-types": "off"  
  },
1
2
3
报错二：
ESLint: Type string trivially inferred from a string literal, remove type annotation.(@typescript-eslint/no-inferrable-types)

解决方法：在.eslintrc.js 里面 加上

 "rules": {
     "@typescript-eslint/no-inferrable-types": "off"   
  },
1
2
3
报错三：
ESLint: Require statement not part of import statement. eslint@typescript-eslint/no-var-requires

解决方法：在.eslintrc.js 里面 加上

 "rules": {
    '@typescript-eslint/no-var-requires': 0 
  },
1
2
3
报错四：
ESLint: Forbidden non-null assertion.(@typescript-eslint/no-non-null-assertion)

解决方法：在.eslintrc.js 里面 加上

 "rules": {
    '@typescript-eslint/no-non-null-assertion': 'off'
  },
1
2
3
报错五：
ESLint: ‘xxx’ is not defined.(no-undef) //说明全局变量未定义

解决方法：在.eslintrc.js 里面 添加代码块

 "rules": {
    ...
  },
    "globals":{
    "xxx": true//xxx 为你的全局变量
  }