Vue(六):eslint&axios

目录

一、eslint

1.1 vscode进行eslint相关配置

1.2 断点调试（和eslint配置无关）

1.3 eslint配置

二、axios补充

2.1 axios基本用法存在的问题

2.2 main.js配置解决axios使用问题

2.3 axios请求根路径的配置

2.4 axios挂载到Vue上的优缺点

---

一、eslint

1.1 vscode进行eslint相关配置

（1）tabsize设置为2

（2）format设置

（3）新建eslint项目

 

 

 

 

1.2 断点调试（和eslint配置无关）

 加断点，直接在程序中加debugger，或者在控制台Source下点击这里加断点

1.3 eslint配置

 

规则1：不能有连续的空行

规则2：文件的末尾需要有一行空行

规则3：文件的每一行后面都不能有空行

规则4：属性和属性值之间需要1个空格

规则5：import必须在文件的顶部

如果要禁止一个规则，在eslint的官网可以看到。如下：（仅为示例，修改方法名后不加空格）

 安装Eslint和Prettier插件。并在settings.json中增加配置如下几行：（第一行的{后添加即可）

 "editor.codeActionsOnSave": {
        "source.fixAll": true,
    },

    "eslint.alwaysShowStatus": true,
    "prettier.trailingComma": "none",
    "prettier.semi": false,
    "prettier.printWidth": 300,
    "prettier.singleQuote": true,
    "prettier.arrowParens": "avoid",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.ignoreProjectWarning": true,
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": false
        },
        "prettyhtml": {
            "printWidth": 300,
            "singleQuote": true,
            "traillingComma": "none",
            "semi": false,
            "arrowParnets": "avoid"
        
        }
    },

在C盘用户目录下新建.prettierrc文件，文件内容如下：

{
    "semi": false,    // 使用分号, 默认true
    "singleQuote": true,   // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
    "bracketSpacing": true   // 对象中的空格 默认true
}

并将路径加入setting.json文件(vscode设置中)

"prettier.configPath":"C:\\Users\\HONG\\.prettierrc",

右键选中格式化文档，配置为eslint。js和vue文档都是。

 

 配置完成后，页面中多加几行空格，CTRL+S保存，自动格式化

二、axios补充

2.1 axios基本用法存在的问题

在axios的基本用法中，vue页面中要发请求首选要安装axios包，再在vue中引入axios，才可以使用，这样每个页面都需要写，很麻烦！！

 解决办法：main.js中进行相关配置，见2.2节。

2.2 main.js配置解决axios使用问题

main.js中配置如下，一般使用$http名称命名，不是固定写法。

 （2）使用：

2.3 axios请求根路径的配置

main.js中全局配置：

 使用：

2.4 axios挂载到Vue上的优缺点

优点：在每个vue组件中要发起请求，直接调用this.$http.xxx

缺点：不利于API接口的复用。（每个vue页面都要写发请求的方法）