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

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

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

首先, 安装 node

• 首先登陆 node 官网

  

  简洁的官方网站映入眼帘, 硕大的绿色按钮让人不由自主的想要点他一下, 不要抑制心里的想法, 点吧 ^_^.
• 完成后点击下载下来的 .pkg 若是出现下面的页面说明安装包是真的~.

  

• 以后的步骤就是点击 继续, 一路继续, 终点就是罗马.

  

• 最后一步就是验证 node 安装结果, 随便打开一个你喜欢的终端, 输入 node -v 回车便可

  

  若是终端显示这个, 恭喜你安装已经成功了. 若是安装失败的小伙伴也不要气馁, 能够百度一下

其次, 安装 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 返回结果以下图所示说明安装成功

  

而后, 安装编辑器

前端开发理论上是能够用各类各样的编辑器的, 可是为了效果一致, 这里推荐你们使用 Visual Studio Code, 为何要用这个呢??? 咱们下面详谈

再次, 项目初始化

• 终端切换到项目目录
• 按照下图所示的方式建立项目

  

  为了防止动图过大, 这里就不录制所有流程了. node 依赖包安装, 最重要的就是要有耐心...
• 安装完成后, 执行那个传统的命令 npm run dev

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

理论上讲, 环境搭建环节已经完成. 然鹅...

这满屏飘飞的报错就像是女神的眼睛, 囧囧有神. 容不下一点沙子. 面对连篇的错误, 咱们的编辑器, 尽然无动于衷, 视而不见. 简直不能忍.

接下来, 咱们开始配置编辑器 eslint, 给它配上一副眼镜, 让报错无处可逃...

最后, eslint 配置

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

到处红线已经把咱们的不规范编码暴露无疑. 接下来 Command + s 咦, 报错没有了~

怀着小小的激动和兴奋, 咱们再次 npm run dev

WTF, 竟然还有报错....

emmmm....

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

1. 使用 vscode 打开项目目录
2. 按下组合键 Command + . 进入偏好设置
3. 输入框中输入 eslint.validate 回车,点击 在setting.json 中编辑 接下来如图所示鼠标放到左侧, 点击小铅笔, 复制到设置.

   

4. 在左侧粘贴过来的陪配置中增长一行 { "language": "vue", "autoFix": true } 记得保存

   

5. 回到 App.vue 飘红已经能正常显示了, 再按下 Command + s 试试 😄

   

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

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