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

时间:2022-10-30 22:53:18


一、前言

随着互联网的高速发展,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:简体中文版【下载安装方式如下】

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

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

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

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

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

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

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

(5)Beautify:格式化代码(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 请求 (GET,HEAD,POST,PUT),附带任何数量的参数+ headers。

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

1、ApiPost

ApiPost 官网下载链接

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

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

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


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

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


五、写在最后(总结)

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

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

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

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

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


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