之前有朋友求助, 让我帮忙找篇比较容易的 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, 为什么要用这个呢??? 我们下面详谈
再次, 项目初始化
- 终端切换到项目目录
- 按照下图所示的方式创建项目
- 安装完成后, 执行那个传统的命令
npm run dev
执行完 npm run dev
以后, 打开浏览器并打开 localhost:8080 已经能够在浏览器中看到一个大大的 V 字.
理论上讲, 环境搭建环节已经完成. 然鹅...
这满屏飘飞的报错就像是女神的眼睛, 囧囧有神. 容不下一点沙子. 面对连篇的错误, 我们的编辑器, 尽然无动于衷, 视而不见. 简直不能忍.
接下来, 我们开始配置编辑器
eslint
, 给它配上一副眼镜, 让报错无处可逃...
最后, eslint 配置
eslint 配置在我之前的文章【手把手带你撸一个脚手架】第二步, 搭建开发环境中有详细说明, 这里不做重复. 通过这篇文章的配置, 我们能做到 js 文件的错误标识和自动修复. 感兴趣的同学可以打开项目目录下的 main.js 文件看看
处处红线已经把我们的不规范编码暴露无疑. 接下来
Command + s
咦, 报错没有了~
怀着小小的激动和兴奋, 我们再次
npm run dev
WTF, 居然还有报错....
emmmm....
仔细观察一下, 不难发现, 命令行中报错的内容都是 ***.vue
文件, 那就简单啦.
- 使用 vscode 打开项目目录
- 按下组合键
Command + .
进入偏好设置 - 输入框中输入
eslint.validate
回车,点击在setting.json 中编辑
接下来如图所示鼠标放到左侧, 点击小铅笔, 复制到设置. - 在左侧粘贴过来的陪配置中增加一行
{ "language": "vue", "autoFix": true }
记得保存 - 回到 App.vue 飘红已经能正常显示了, 再按下
Command + s
试试 ?
至此, 开发环境已经搭建完成. 有任何问题的小伙伴, 请评论区切磋喲.
下集预告: 搭建完成开发环境以后, 下一步, 基于 Element-UI绘制前端页面. 欢迎预习~