猿创征文｜一文带你了解前端开发者工具

---

一、前言

随着互联网的高速发展Web2.0 时代的快速演变。

用户对于网页界面等的要求越来越高。良好的审美便捷的交互 等变得尤为重要

一些 好用 的 编译器工具UI 框架工具API 调试工具 等便应运而生~~

接下来给小伙伴们推荐几款非常好用的前端开发者工具

二、前端开发者工具——编译器含插件

编译器的主要作用是给开发者提供一个良好便捷的编码平台。包括并不止以下功能

1. 语法高亮
2. 自动提示补全
3. 代码片段收集
4. 自定义热键绑定
   …

在这里给大家安利两款前端开发人员用的最多的编译器

• VS Code开源免费
• WebStorm试用期后收费

1、VS Code

VS Code 官网下载链接

Visual Studio Code 简称 VS Code下文均写为 VS Code。

特点开源免费使用很多好用的插件可以简化开发。【强烈推荐】

下载安装后打开编译器创建第一个文件 Index.html。

编写如下代码运行查看

---

---

打开 html 文件点击 前端杂货铺弹出框信息展示如下

---

2、VS Code 必备插件

1汉化 VS Code简体中文版【下载安装方式如下】

2Live Server快速启动本地服务自动监听不需要刷新

3Auto Close Tag自动补全标签不需要全部手写

4给代码中配对的符号(例如左右括号、花括号等)添加鲜明的颜色可快速找到成对的符号

5Beautify格式化代码Shift+Alt+F

3、WebStorm

WebStorm 官网下载链接

WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。

特点功能很全不需要安装其他插件但需要购买不开源。

基本的使用和 VS Code 差不多在这里就不做过多的赘述了~~

三、前端开发者工具——UI 框架工具

UI 框架最大的作用在于可以使 UI 设计变得 标准化直接拿来用可以 大大提高 后续的 开发效率。

接下来给大家推荐两款常用的 UI 框架工具

• Element饿了么前端团队推出的基于 Vue 封装的 UI 组件库
• Vant有赞前端团队开源的移动端组件库
• …

1、Element

Element 官方文档

npm 安装

npm i element-ui -S

全局引入不推荐在 main.js 中通过 import 导入通过 Vue.use(xxx) 全局使用。

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

按需引入推荐在 main.js 中通过 import 导入 指定组件通过 Vue.use(xxx) 使用该组件。

import {Button} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Button)

安装导入完毕之后直接通过 Element ui 的标准写法在组件中进行编写即可。

示例Element ui 封装的按钮的写法以及效果图如下

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

2、Vant

Vant 官方文档Vue3版

yarn 安装

yarn add vant@3.0.0-beta.8 -S

按需引入推荐在 main.js 中通过 import 导入 指定组件通过 Vue.use(xxx) 使用该组件。

import { createApp } from 'vue';
import { Button } from 'vant';

const app = createApp();
app.use(Button);

安装导入完毕之后直接通过 Vant ui 的标准写法在组件中进行编写即可。

示例Vant ui 封装的按钮的写法以及效果图如下

<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

四、前端开发者工具——API 调试工具

API 调试工具提供强大的 Web API & HTTP 请求调试功能。

能够 发送 任何类型的 HTTP 请求 (GETHEADPOSTPUT附带任何数量的参数+ headers。

API 调试工具是在前后端分离的项目中用于 接口测试 的必备工具

1、ApiPost

ApiPost 官网下载链接

Apipost——汉化版 Postman 的 API 调试工具。

示例测试的 API 地址【https://api.uixsj.cn/hitokoto/get?type=social】

---

示例使用 node.js 创建路由及书写逻辑测试登录请求传参

---

五、写在最后总结

不管你是 科班出身亦或是“半路出家”的 转行人员。

如果你选择了前端开发这条路请不要轻易放弃行百里者半九十你离成功可能就差那一步

本篇文章编译器——>扩展插件——>UI组件库——>API调试工具

好的工具能让我们事半功倍以上工具的功能基本上能满足前端开发人员 90% 的开发需求。

如果你还知道什么好用的前端开发者工具欢迎在评论区留言讨论~~

---

---