蜜桃av色欲a片精品一区,麻豆aⅴ精品无码一区二区,亚洲人成网站在线播放影院在线,亚洲 素人 字幕 在线 最新

  一文帶你了解前端開(kāi)發(fā)者工具

發(fā)布日期：2022/11/25 11:27:00      瀏覽量：

一、前言
隨著互聯(lián)網(wǎng)的高速發(fā)展，Web2.0 時(shí)代的快速演變。

用戶對(duì)于網(wǎng)頁(yè)界面等的要求越來(lái)越高。良好的審美，便捷的交互 等變得尤為重要！

一些 好用 的 編譯器工具，UI 框架工具，API 調(diào)試工具 等便應(yīng)運(yùn)而生~~

接下來(lái)，給小伙伴們推薦幾款非常好用的前端開(kāi)發(fā)者工具??！

二、前端開(kāi)發(fā)者工具——編譯器（含插件）
編譯器的主要作用是給開(kāi)發(fā)者提供一個(gè)良好便捷的編碼平臺(tái)。包括并不止以下功能：

語(yǔ)法高亮
自動(dòng)提示補(bǔ)全
代碼片段收集
自定義熱鍵綁定
…
在這里，給大家安利兩款前端開(kāi)發(fā)人員用的最多的編譯器：

VS Code（開(kāi)源免費(fèi)）
WebStorm（試用期后收費(fèi)）
1、VS Code
VS Code 官網(wǎng)下載鏈接

Visual Studio Code 簡(jiǎn)稱 VS Code，下文均寫為 VS Code。

特點(diǎn)：開(kāi)源（免費(fèi)使用），很多好用的插件，可以簡(jiǎn)化開(kāi)發(fā)?！緩?qiáng)烈推薦】

下載安裝后，打開(kāi)編譯器，創(chuàng)建第一個(gè)文件 Index.html。


編寫如下代碼，運(yùn)行查看：





打開(kāi) html 文件，點(diǎn)擊 前端雜貨鋪，彈出框信息展示如下：



2、VS Code 必備插件
（1）漢化 VS Code：簡(jiǎn)體中文版【下載安裝方式如下】



（2）Live Server：快速啟動(dòng)本地服務(wù)，自動(dòng)監(jiān)聽(tīng)（不需要刷新）



（3）Auto Close Tag：自動(dòng)補(bǔ)全標(biāo)簽（不需要全部手寫）



（4）給代碼中配對(duì)的符號(hào)(例如左右括號(hào)、花括號(hào)等)添加鮮明的顏色（可快速找到成對(duì)的符號(hào)）



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



3、WebStorm
WebStorm 官網(wǎng)下載鏈接

WebStorm 是JetBrains公司旗下一款JavaScript 開(kāi)發(fā)工具。

特點(diǎn)：功能很全，不需要安裝其他插件，但需要購(gòu)買（不開(kāi)源）。

基本的使用和 VS Code 差不多，在這里就不做過(guò)多的贅述了~~



三、前端開(kāi)發(fā)者工具——UI 框架工具
UI 框架最大的作用在于可以使 UI 設(shè)計(jì)變得 標(biāo)準(zhǔn)化，直接拿來(lái)用，可以 大大提高 后續(xù)的 開(kāi)發(fā)效率。

接下來(lái)，給大家推薦兩款常用的 UI 框架工具：

Element（餓了么前端團(tuán)隊(duì)推出的基于 Vue 封裝的 UI 組件庫(kù)）
Vant（有贊前端團(tuán)隊(duì)開(kāi)源的移動(dòng)端組件庫(kù)）
…
1、Element
Element 官方文檔

npm 安裝

npm i element-ui -S
1
全局引入（不推薦）：在 main.js 中通過(guò) import 導(dǎo)入，通過(guò) Vue.use(xxx) 全局使用。

import ElementUI from ’element-ui’;
import ’element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI)
1
2
3
按需引入（推薦）：在 main.js 中通過(guò) import 導(dǎo)入 指定組件，通過(guò) Vue.use(xxx) 使用該組件。

import {Button} from ’element-ui’;
import ’element-ui/lib/theme-chalk/index.css’;
Vue.use(Button)
1
2
3
安裝導(dǎo)入完畢之后，直接通過(guò) Element ui 的標(biāo)準(zhǔn)寫法，在組件中進(jìn)行編寫即可。

示例：Element ui 封裝的按鈕的寫法以及效果圖如下：

<el-row>
  <el-button>默認(rèn)按鈕</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">危險(xiǎn)按鈕</el-button>
</el-row>
1
2
3
4
5
6
7
8


2、Vant
Vant 官方文檔（Vue3版）

yarn 安裝

yarn add [email protected] -S
1
按需引入（推薦）：在 main.js 中通過(guò) import 導(dǎo)入 指定組件，通過(guò) Vue.use(xxx) 使用該組件。

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

const app = createApp();
app.use(Button);
1
2
3
4
5
安裝導(dǎo)入完畢之后，直接通過(guò) Vant ui 的標(biāo)準(zhǔn)寫法，在組件中進(jìn)行編寫即可。

示例：Vant ui 封裝的按鈕的寫法以及效果圖如下：

<van-button type="primary">主要按鈕</van-button>
<van-button type="success">成功按鈕</van-button>
<van-button type="default">默認(rèn)按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險(xiǎn)按鈕</van-button>
1
2
3
4
5


四、前端開(kāi)發(fā)者工具——API 調(diào)試工具
API 調(diào)試工具提供強(qiáng)大的 Web API & HTTP 請(qǐng)求調(diào)試功能。

能夠 發(fā)送 任何類型的 HTTP 請(qǐng)求 (GET，HEAD，POST，PUT），附帶任何數(shù)量的參數(shù)+ headers。

API 調(diào)試工具是在前后端分離的項(xiàng)目中用于 接口測(cè)試 的必備工具！！

1、ApiPost
ApiPost 官網(wǎng)下載鏈接

Apipost——漢化版 Postman 的 API 調(diào)試工具。

示例：測(cè)試的 API 地址【https://api.uixsj.cn/hitokoto/get?type=social】



示例：使用 node.js 創(chuàng)建路由及書寫邏輯，測(cè)試登錄請(qǐng)求（傳參）



五、寫在最后（總結(jié)）
不管你是 科班出身，亦或是“半路出家”的 轉(zhuǎn)行人員。

如果你選擇了前端開(kāi)發(fā)這條路，請(qǐng)不要輕易放棄，行百里者半九十，你離成功可能就差那一步！

本篇文章，編譯器——>擴(kuò)展插件——>UI組件庫(kù)——>API調(diào)試工具
————————————————
版權(quán)聲明：本文為CSDN博主「前端雜貨鋪」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_45902692/article/details/127599375