Front-end developer tools catalog
I. Introduction
With the rapid development of the Internet, the Web2.0 era is rapidly evolving.
Users have increasingly higher requirements for web interfaces and so on. Good aesthetics, convenient interaction , etc. have become particularly important!
SomeEasy to useCompiler tools , UI framework tools , API debugging tools , etc. came into being~~
Next, I would like to recommend some very useful front-end developer tools to my friends! !
2. Front-end developer tools - compiler (including plug-ins)
The main function of the compiler is to provide developers with a good and convenient coding platform. Including but not limited to the following functions:
- syntax highlighting
- Automatic prompt completion
- Collection of code snippets
- Custom hotkey bindings
…
Here, I will give you two Amway compilers that are most used by front-end developers:
- VS Code (open source and free)
- WebStorm (charged after trial period)
1、VS Code
VS Code official website download link
Visual Studio Code is referred to as VS Code, and is written as VS Code below.
Features: Open source (free to use), many useful plug-ins, which can simplify development.【highly recommended】
After downloading and installing, open the compiler and create the first fileIndex.html。
Write the following code and run it to view:
Open the html file and click on the front-end grocery store . The pop-up box information is displayed as follows:
2. VS Code essential plug-ins
(1) Chinese VS Code: Simplified Chinese version [Download and installation method is as follows]
(2) Live Server: Quickly start local services and automatically monitor (no refresh required)
(3) Auto Close Tag: Automatically complete tags (no need to write all by hand)
(4) Add distinctive colors to paired symbols (such as left and right brackets, curly braces, etc.) in the code (to quickly find paired symbols)
(5) Beautify: Format code (Shift+Alt+F)
3、WebStorm
WebStorm official website download link
WebStorm is a JavaScript development tool owned by JetBrains.
Features: Full-featured, no need to install other plug-ins, but need to be purchased (not open source).
The basic usage is similar to VS Code, so I won’t go into too much detail here~~
3. Front-end developer tools—UI framework tools
The biggest role of the UI framework is to standardize the UI design and use it directly, which can greatly improve the efficiency of subsequent development.
Next, I recommend two commonly used UI framework tools:
- Element (a UI component library based on Vue encapsulation launched by the Ele.me front-end team)
- Vant (an open source mobile component library developed by Youzan’s front-end team)
- …
1、Element
Element official documentation
npm install
npm i element-ui -S
Global introduction (Not recommended): Imported through import in main.js and used globally through Vue.use(xxx).
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
Introduced on demand (recommend): Import the specified component through import in main.js , and use the component through Vue.use(xxx).
import {
Button} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Button)
After the installation and import are completed, you can directly write it in the component through the standard writing method of Element ui.
Example: The writing method and rendering of the button encapsulated by Element ui are as follows:
<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 official documentation (Vue3 version)
yarn installation
yarn add vant@3.0.0-beta.8 -S
Introduced on demand (recommend): Import the specified component through import in main.js , and use the component through Vue.use(xxx).
import {
createApp } from 'vue';
import {
Button } from 'vant';
const app = createApp();
app.use(Button);
After the installation and import are completed, just write it in the component directly through the standard writing method of Vant ui.
Example: The writing method and rendering of the button encapsulated by Vant ui are as follows:
<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>
4. Front-end developer tools—API debugging tools
The API debugging tool provides powerful Web API & HTTP request debugging functions.
Ability to send any type of HTTP request (GET, HEAD, POST, PUT) with any number of parameters + headers.
API debugging tools are essential tools for interface testing in projects with separate front-end and back-end ! !
1、ApiPost
ApiPost official website download link
Apipost - API debugging tool for the Chinese version of Postman.
Example: Tested API address [https://api.uixsj.cn/hitokoto/get?type=social]
Example: Use node.js to create routing and write logic, and test login requests (passing parameters)
5. Write at the end (summary)
It doesn’t matter whether you have a professional background or you are a career changer who has become a monk halfway through .
If you choose the path of front-end development, please don’t give up easily. If you travel a hundred miles , you may be just one step away from success!
This article,Compiler——>Extension plug-in——>UI component library——>API debugging tool
Good tools can help us get twice the result with half the effort. The functions of the above tools can basically meet 90% of the development needs of front-end developers.
If you know of any useful front-end developer tools, please leave a message in the comment area for discussion~~
