阅读 861

【手把手带你撸一个接口测试工具】第一步, 搭建顺手的开发环境

之前有朋友求助, 让我帮忙找篇比较容易的 vue 入门文章. 我是逛遍了掘金仍然未果. 正好儿借着对接口测试的兴趣. 用 vue 搞一个前端接口测试工具(类似浏览器端的 postMan). 第一步我们搭建一个顺手的开发环境. 主要包括安装 node, 安装 vue-cli, 安装编辑器, 项目初始化, eslint 配置.

2018-11-27-20-52-28

ps: 本文中环境的搭建是基于 mac 的, 如果有用 win 且需要帮助的小伙伴. 请评论区留言, 待我去网吧的时候把 win 环境下的部分也补上

2018-11-27-14-57-18

首先, 安装 node

  • 首先登录 node 官网
    2018-11-27-15-06-00
    简洁的官方网站映入眼帘, 硕大的绿色按钮让人情不自禁的想要点他一下, 不要抑制内心的想法, 点吧 ^_^.
  • 完成后点击下载下来的 .pkg 如果出现下面的页面说明安装包是真的~.
    2018-11-27-15-25-54
  • 之后的步骤就是点击 继续, 一路继续, 终点就是罗马.
    2018-11-27-15-35-32
  • 最后一步就是验证 node 安装结果, 随便打开一个你喜欢的终端, 输入 node -v 回车即可
    2018-11-27-17-19-11
    如果终端显示这个, 恭喜你安装已经成功了. 如果安装失败的小伙伴也不要气馁, 可以百度一下

其次, 安装 vue-cli

  • 执行命令 npm i -g vue-cli, 如果下载 npm 包过慢, 建议采用以下命令, 切换淘宝镜像
# 设置 npm 镜像为淘宝镜像
npm config set registry https://registry.npm.taobao.org
# 还原 npm 镜像为官方镜像
npm config set registry https://registry.npmjs.org
复制代码
  • 待下载命令执行完成后命令行执行 vue 返回结果如下图所示说明安装成功
    2018-11-27-18-02-04

然后, 安装编辑器

前端开发理论上是可以用各种各样的编辑器的, 但是为了效果一致, 这里推荐大家使用 Visual Studio Code, 为什么要用这个呢??? 我们下面详谈

再次, 项目初始化

  • 终端切换到项目目录
  • 按照下图所示的方式创建项目
    vue-init2134567895
    为了防止动图过大, 这里就不录制全部流程了. node 依赖包安装, 最重要的就是要有耐心...
  • 安装完成后, 执行那个传统的命令 npm run dev

执行完 npm run dev 以后, 打开浏览器并打开 localhost:8080 已经能够在浏览器中看到一个大大的 V 字.

2018-11-27-19-46-04
理论上讲, 环境搭建环节已经完成. 然鹅...
2018-11-27-20-06-22
这满屏飘飞的报错就像是女神的眼睛, 囧囧有神. 容不下一点沙子. 面对连篇的错误, 我们的编辑器, 尽然无动于衷, 视而不见. 简直不能忍.
2018-11-27-20-17-35
接下来, 我们开始配置编辑器 eslint, 给它配上一副眼镜, 让报错无处可逃...

最后, eslint 配置

eslint 配置在我之前的文章【手把手带你撸一个脚手架】第二步, 搭建开发环境中有详细说明, 这里不做重复. 通过这篇文章的配置, 我们能做到 js 文件的错误标识和自动修复. 感兴趣的同学可以打开项目目录下的 main.js 文件看看

2018-11-27-20-25-00
处处红线已经把我们的不规范编码暴露无疑. 接下来 Command + s 咦, 报错没有了~
2018-11-27-20-28-26
怀着小小的激动和兴奋, 我们再次 npm run dev
2018-11-27-20-34-02
WTF, 居然还有报错....
2018-11-27-20-34-49
emmmm....

仔细观察一下, 不难发现, 命令行中报错的内容都是 ***.vue 文件, 那就简单啦.

  1. 使用 vscode 打开项目目录
  2. 按下组合键 Command + . 进入偏好设置
  3. 输入框中输入 eslint.validate 回车,点击 在setting.json 中编辑 接下来如图所示鼠标放到左侧, 点击小铅笔, 复制到设置.
    2018-11-27-20-40-48
  4. 在左侧粘贴过来的陪配置中增加一行 { "language": "vue", "autoFix": true } 记得保存
    2018-11-27-20-43-04
  5. 回到 App.vue 飘红已经能正常显示了, 再按下 Command + s 试试 😄
    2018-11-27-20-44-58

至此, 开发环境已经搭建完成. 有任何问题的小伙伴, 请评论区切磋喲.

2018-11-27-20-48-06

下集预告: 搭建完成开发环境以后, 下一步, 基于 Element-UI绘制前端页面. 欢迎预习~

9150e4e5gy1fx4e3jz1htg201a01bt8v