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

朱雀 2023-09-23 13:02 141阅读 0赞

#### 前端开发者工具目录 ####

*   *  一、前言
     *  二、前端开发者工具——编译器（含插件）
     *   *  1、VS Code
         *  2、VS Code 必备插件
         *  3、WebStorm
     *  三、前端开发者工具——UI 框架工具
     *   *  1、Element
         *  2、Vant
     *  四、前端开发者工具——API 调试工具
     *   *  1、ApiPost
     *  五、写在最后（总结）

--------------------

### 一、前言 ###

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

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

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

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

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

> 编译器的主要作用是给开发者提供一个良好便捷的编码平台。包括并不止以下功能：
> 
> 1.  语法高亮
> 2.  自动提示补全
> 3.  代码片段收集
> 4.  自定义热键绑定  
>     …

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

*  VS Code（开源免费）
 *  WebStorm（试用期后收费）

#### 1、VS Code ####

[VS Code 官网下载链接][VS Code]

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

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

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

![在这里插入图片描述][14d66eae75d240f6ac6e9c1c5bc9e927.png]  
**编写如下代码，运行查看：**

![在这里插入图片描述][ca1ea270641e452db2af15b5b704fbcf.png]

--------------------

![在这里插入图片描述][fb84276bc59a4ac296d02f16cb0283e0.png]

--------------------

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

![在这里插入图片描述][2322484e8b0542d898cd7a1c12bd8018.png]

--------------------

#### 2、VS Code 必备插件 ####

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

![在这里插入图片描述][9429122907a9455c8fd04b44e70b1b36.png]

**（2）Live Server：快速启动本地服务，自动监听（不需要刷新）**

![在这里插入图片描述][a2cea5130db748a98e4555f84dc70b21.png]

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

![在这里插入图片描述][910ea5fe02cc41098798b1060b82f251.png]

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

![在这里插入图片描述][d5610beba2ce45c28f4c9b2cd39e0833.png]

**（5）Beautify：格式化代码（Shift+Alt+F）**

![在这里插入图片描述][b14d6667c8e54b33b55af6e5a98ca839.png]

#### 3、WebStorm ####

[WebStorm 官网下载链接][WebStorm]

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

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

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

![在这里插入图片描述][fe9fbf337a2b47eaa0ecf2295e9d0346.png]

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

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

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

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

#### 1、Element ####

[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>

![在这里插入图片描述][3f300f9a916d46aca57a4af24d5dc26e.png]

#### 2、Vant ####

[Vant 官方文档（Vue3版）][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>

![在这里插入图片描述][85324edfface455d9a10c977aaf3001a.png]

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

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

能够 **发送** 任何类型的 **HTTP 请求 (GET，HEAD，POST，PUT）**，附带任何数量的参数+ headers。

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

#### 1、ApiPost ####

[ApiPost 官网下载链接][ApiPost]

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

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

![在这里插入图片描述][434cd356590944059372ec39a3e9cad1.png]

--------------------

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

![在这里插入图片描述][42a88a88eee94a309143f2f40881a345.png]

--------------------

### 五、写在最后（总结） ###

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

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

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

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

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

--------------------

![在这里插入图片描述][45fc82a82c6542bdb2ff4986377d8db3.png]

--------------------

[VS Code]: https://code.visualstudio.com/
[14d66eae75d240f6ac6e9c1c5bc9e927.png]: https://img-blog.csdnimg.cn/14d66eae75d240f6ac6e9c1c5bc9e927.png
[ca1ea270641e452db2af15b5b704fbcf.png]: https://img-blog.csdnimg.cn/ca1ea270641e452db2af15b5b704fbcf.png
[fb84276bc59a4ac296d02f16cb0283e0.png]: https://img-blog.csdnimg.cn/fb84276bc59a4ac296d02f16cb0283e0.png
[2322484e8b0542d898cd7a1c12bd8018.png]: https://img-blog.csdnimg.cn/2322484e8b0542d898cd7a1c12bd8018.png
[9429122907a9455c8fd04b44e70b1b36.png]: https://img-blog.csdnimg.cn/9429122907a9455c8fd04b44e70b1b36.png
[a2cea5130db748a98e4555f84dc70b21.png]: https://img-blog.csdnimg.cn/a2cea5130db748a98e4555f84dc70b21.png
[910ea5fe02cc41098798b1060b82f251.png]: https://img-blog.csdnimg.cn/910ea5fe02cc41098798b1060b82f251.png
[d5610beba2ce45c28f4c9b2cd39e0833.png]: https://img-blog.csdnimg.cn/d5610beba2ce45c28f4c9b2cd39e0833.png
[b14d6667c8e54b33b55af6e5a98ca839.png]: https://img-blog.csdnimg.cn/b14d6667c8e54b33b55af6e5a98ca839.png
[WebStorm]: https://www.jetbrains.com.cn/webstorm/promo/?bd_vid=8343866630474083194
[fe9fbf337a2b47eaa0ecf2295e9d0346.png]: https://img-blog.csdnimg.cn/fe9fbf337a2b47eaa0ecf2295e9d0346.png
[Element]: https://element.faas.ele.me/#/zh-CN/component/installation
[3f300f9a916d46aca57a4af24d5dc26e.png]: https://img-blog.csdnimg.cn/3f300f9a916d46aca57a4af24d5dc26e.png
[Vant _Vue3]: https://vant-contrib.gitee.io/vant/#/zh-CN
[85324edfface455d9a10c977aaf3001a.png]: https://img-blog.csdnimg.cn/85324edfface455d9a10c977aaf3001a.png
[ApiPost]: https://www.apipost.cn/?utm_source=10120
[434cd356590944059372ec39a3e9cad1.png]: https://img-blog.csdnimg.cn/434cd356590944059372ec39a3e9cad1.png
[42a88a88eee94a309143f2f40881a345.png]: https://img-blog.csdnimg.cn/42a88a88eee94a309143f2f40881a345.png
[45fc82a82c6542bdb2ff4986377d8db3.png]: https://img-blog.csdnimg.cn/45fc82a82c6542bdb2ff4986377d8db3.png