位置: IT常识 - 正文

猿创征文|一文带你了解前端开发者工具(猿创设计科技有限公司)

编辑:rootadmin
猿创征文|一文带你了解前端开发者工具 前端开发者工具目录一、前言二、前端开发者工具——编译器(含插件)1、VS Code2、VS Code 必备插件3、WebStorm三、前端开发者工具——UI 框架工具1、Element2、Vant四、前端开发者工具——API 调试工具1、ApiPost五、写在最后(总结)一、前言

推荐整理分享猿创征文|一文带你了解前端开发者工具(猿创设计科技有限公司),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:北京猿创源科技有限公司,西安猿创部落科技有限公司怎么样,猿创科技,猿创联盟,猿创科技,猿创设计科技有限公司,猿类作文,猿创设计科技有限公司,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

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

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

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

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

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

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

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% 的开发需求。

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

本文链接地址:https://www.jiuchutong.com/zhishi/298292.html 转载请保留说明!

上一篇:MySQL基本查询(mysqljoin查询)

下一篇:数学建模——熵权法步骤及程序详解(数学建模赋权)

  • 微信转错账怎么追回(微信转错账怎么联系对方)

    微信转错账怎么追回(微信转错账怎么联系对方)

  • 抖音上能私聊吗(抖音上能私聊吗?)

    抖音上能私聊吗(抖音上能私聊吗?)

  • 荣耀20pro能开空调吗(荣耀20手机可以开空调吗无设置?)

    荣耀20pro能开空调吗(荣耀20手机可以开空调吗无设置?)

  • 微信如何自己建群(微信如何自己建表情包)

    微信如何自己建群(微信如何自己建表情包)

  • 抖音成听筒模式怎么换扬声器

    抖音成听筒模式怎么换扬声器

  • public static void main什么意思(public static void main方法的参数)

    public static void main什么意思(public static void main方法的参数)

  • tittl00是什么手机(titcl00)

    tittl00是什么手机(titcl00)

  • 京豆回收是什么意思(京东京豆收回)

    京豆回收是什么意思(京东京豆收回)

  • 高频率和低频率的区别(高频率和低频率和波长的关系)

    高频率和低频率的区别(高频率和低频率和波长的关系)

  • 抖音的表情包怎么保存到手机(抖音的表情包怎么保存到微信)

    抖音的表情包怎么保存到手机(抖音的表情包怎么保存到微信)

  • QQ屏幕共享能看到脸吗(qq屏幕共享能看到支付密码吗)

    QQ屏幕共享能看到脸吗(qq屏幕共享能看到支付密码吗)

  • 笔记本电脑c盘多大合适(笔记本电脑c盘满了变成红色了怎么清理)

    笔记本电脑c盘多大合适(笔记本电脑c盘满了变成红色了怎么清理)

  • 双绞线分为哪两种(双绞线分为哪两大类)

    双绞线分为哪两种(双绞线分为哪两大类)

  • 探探不充钱能配对吗(探探不充钱能约到人吗)

    探探不充钱能配对吗(探探不充钱能约到人吗)

  • 手机上可以交电费吗(手机上可以交电视费吗)

    手机上可以交电费吗(手机上可以交电视费吗)

  • 华为手机出现talkback(华为手机开不了机)

    华为手机出现talkback(华为手机开不了机)

  • ios13怎么开来电闪光灯(苹果13怎么设置来电音乐)

    ios13怎么开来电闪光灯(苹果13怎么设置来电音乐)

  • 淘宝能不能调夜间模式(淘宝能不能调夜晚模式)

    淘宝能不能调夜间模式(淘宝能不能调夜晚模式)

  • 苹果6能升级ios13吗(苹果6能升级ios13.6吗)

    苹果6能升级ios13吗(苹果6能升级ios13.6吗)

  • 华为nova4怎么拍星空(华为nova4怎么拍出高清照片)

    华为nova4怎么拍星空(华为nova4怎么拍出高清照片)

  • 苹果手机浏览网页会中毒吗(苹果手机浏览网页怎么缩小)

    苹果手机浏览网页会中毒吗(苹果手机浏览网页怎么缩小)

  • Windows 10如何清理DNS缓存(windows10如何清理磁盘碎片)

    Windows 10如何清理DNS缓存(windows10如何清理磁盘碎片)

  • 【C#+JavaScript+SQL Server】实现Web端在线考试系统 五:考试模块设计(附源码和资源)

    【C#+JavaScript+SQL Server】实现Web端在线考试系统 五:考试模块设计(附源码和资源)

  • 我的十年编程路 2020年篇(我的十年怎么写)

    我的十年编程路 2020年篇(我的十年怎么写)

  • Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)(vue路由怎么实现)

    Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)(vue路由怎么实现)

  • 个人所得税一般多久能退下来
  • 个人所得税的税目分多少种
  • 增值税是价内税,消费者是税款的最终负担者( ) A对 B错
  • 发票专票抵扣
  • 发票开具与小票的关系是怎样的
  • 购买办公用品为什么不能用现金
  • 小规模暂估入库的账务处理
  • 增值税专用发票使用规定 最新
  • 商贸企业印花税税率
  • 会计准则哪些科目变化最大
  • 房屋租赁合同印花税的税率
  • 跨区域经营企业
  • 取暖补贴国家标准
  • 给供应商付款怎么做分录
  • 出纳如何登账
  • 土地增值税哪些可以加计扣除
  • 出口货物免抵退税额城市维护建设税
  • 企业为什么要缴纳增值税
  • 什么叫变动费用
  • 贷款利息可以抵扣吗
  • 四项服务加计扣除政策2023
  • 暂估冲红的分录怎么写
  • 注册会计师考试科目有哪些
  • 发出委托加工物资
  • windows10预览版
  • iphone中的照片如何找回
  • Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
  • php如何编程
  • 前端实现拖拽拉动图片
  • onekey.exe是什么
  • 应付账款周转天数越大说明什么
  • 盈利 利润
  • 写入缓存策略无法更改
  • form表单使用
  • 筹建期间借款费用
  • vue2.0安装
  • 服装制造行业成本占比
  • vue3.0 main.js
  • 发票整理归类汇总流程
  • 现金和现金等价物包括哪些
  • 受托支付转给个人账户需要交税吗为什么
  • mongodb入门教程
  • 记 vue-cli-plugin-dll 使用,优化vue-cli项目构建打包速度
  • 登记会计账簿的实训总结
  • 累计折旧在资产负债表中填在哪里
  • java的基本类型的区别
  • 用负数表示的例子
  • 增值税发票抵扣联丢失怎么办
  • 小规模纳税人是季度报税吗
  • 预付账款怎么记账
  • 预交一年的房租怎么做账
  • 付款金额与增值金额区别
  • 房地产公司销售土地使用权
  • 非广告公司可以开广告费发票吗?
  • 投资性房地产租金税率是多少
  • 电子银行承兑汇票怎么签收
  • 公司抽奖的成本怎么算
  • 建账有哪些步骤,每个步骤有哪些注意事项
  • sql嵌套执行顺序
  • sql server默认实例
  • linux上mysql安装详细教程
  • win7系统桌面图标变大了怎样恢复
  • windows恶意软件删除工具怎么安装
  • yosemite 10.10.3 beta4 下载地址 os x10.10.3beta4官方下载
  • 磁盘修复完成以后怎么办
  • linux查看系统配置内存大小
  • win7怎么cmd
  • android observer
  • shell脚本获取进程pid
  • 笔记本电脑没有鼠标怎么多选文件
  • Unity WWW网络动态加载和储存在本地
  • python语句查询
  • 自己搭配电脑
  • javascript:download()
  • python按位与操作
  • 诊所备案申请表在哪下载
  • 北京市房产查询官网
  • 怎样在网上税务局个人发票能开10万以上?
  • 北京市税务局热搜
  • 许昌祥和小区二手房出售
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设