位置: 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查询)

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

  • 铁路12306退票扣钱吗(铁路12306退票扣钱吗学生)

    铁路12306退票扣钱吗(铁路12306退票扣钱吗学生)

  • 网易云歌词大小怎么调节(网易云歌词大小手势)

    网易云歌词大小怎么调节(网易云歌词大小手势)

  • 饿了么骑手怎么加入的呢(饿了么骑手怎么样)

    饿了么骑手怎么加入的呢(饿了么骑手怎么样)

  • 笔记本电脑硬盘多大容量合适(笔记本电脑硬盘安装教程视频)

    笔记本电脑硬盘多大容量合适(笔记本电脑硬盘安装教程视频)

  • 显卡一个风扇转一个不转正常吗(显卡一个风扇转另一个风扇不转)

    显卡一个风扇转一个不转正常吗(显卡一个风扇转另一个风扇不转)

  • 荣耀30系列有耳机孔吗(荣耀30手机有耳机孔吗)

    荣耀30系列有耳机孔吗(荣耀30手机有耳机孔吗)

  • 微信的违规交易指的是什么(微信违规交易被限制领取红包)

    微信的违规交易指的是什么(微信违规交易被限制领取红包)

  • redmi8和8a的区别(redmi8和redmi8a的区别是什么)

    redmi8和8a的区别(redmi8和redmi8a的区别是什么)

  • 因特网的拓扑结构是什么(因特网的拓扑结构是一种什么结构)

    因特网的拓扑结构是什么(因特网的拓扑结构是一种什么结构)

  • 转转保证金是什么意思(转转交保证金)

    转转保证金是什么意思(转转交保证金)

  • opporeno无法关机怎么办(opporeno5无法关机)

    opporeno无法关机怎么办(opporeno5无法关机)

  • dram存储器的中文含义是(dram存储器的中文含义是动态随机存储器)

    dram存储器的中文含义是(dram存储器的中文含义是动态随机存储器)

  • vivo手机双卡双待设置(vivo手机双卡双待怎么设置)

    vivo手机双卡双待设置(vivo手机双卡双待怎么设置)

  • 如何设置试卷的密封线(如何设置试卷的装订线及姓名那栏)

    如何设置试卷的密封线(如何设置试卷的装订线及姓名那栏)

  • 微信京东怎么退款流程(微信京东怎么退货退款京东申请退款流程)

    微信京东怎么退款流程(微信京东怎么退货退款京东申请退款流程)

  • 手机掉了微信怎么挂失(手机掉了微信怎么办才能找回)

    手机掉了微信怎么挂失(手机掉了微信怎么办才能找回)

  • 手机的ip地址是固定的吗(手机的ip地址是手机还是手机卡)

    手机的ip地址是固定的吗(手机的ip地址是手机还是手机卡)

  • 苹果小圆圈怎么设置(苹果小圆圈怎么搞出来)

    苹果小圆圈怎么设置(苹果小圆圈怎么搞出来)

  • 微信数字证书是干嘛的(微信数字证书是自动开启的吗)

    微信数字证书是干嘛的(微信数字证书是自动开启的吗)

  • 苹果7plus还在生产吗(苹果7plus现在还生产吗)

    苹果7plus还在生产吗(苹果7plus现在还生产吗)

  • 苹果手机无线充电设置在哪里(苹果手机无线充电功能)

    苹果手机无线充电设置在哪里(苹果手机无线充电功能)

  • 新氧ai侧脸在那(新氧app测脸型安全吗)

    新氧ai侧脸在那(新氧app测脸型安全吗)

  • Seurat | 强烈建议收藏的单细胞分析标准流程(基础质控与过滤)(一)(强烈的建议)

    Seurat | 强烈建议收藏的单细胞分析标准流程(基础质控与过滤)(一)(强烈的建议)

  • 个人接私活需要开票,可以让别的公司帮忙开票吗?
  • 装卸费发票怎么备注
  • 活动策划费属于业务宣传费吗
  • 适用5%征收率的范围
  • 有限合伙企业要交增值税吗
  • 企业所得税成本费用大于发票金额的原因
  • 一般纳税人利润100万要交多少税
  • 分公司注销后账户不注销可以吗
  • 境外增值税代扣代缴
  • 个人提供劳务给个人,不开票要缴税吗
  • 土建工程管理费取费基数
  • 运输业务增值税
  • 转让不动产增值税计算
  • 开票交税当月不确认收入如何做账?
  • 企业外购固定资产的成本包括购买价款和相关税费
  • 社保逾期滞纳金可以免除吗?
  • 小型微利企业享受企业所得税减免优惠时主要留存备查
  • 周转材料低值易耗品怎么摊销
  • 增值税普通发票税率
  • 年末一般纳税人应交增值税借贷调平什么意思
  • 微税平台抄税的步骤是怎样的?
  • 水电费的税收分类有哪些
  • 研发和技术服务在开票软件中怎么找
  • 金融服务收入怎么算
  • 小规模税局代增值税专用发票怎么交税
  • 个税上月没有申报当月可以补报么
  • 机器用润滑油怎么使用
  • linux |bc
  • 企业存款利息收入要交哪些税
  • 党团活动经费如何节约
  • PHP+Mysql+jQuery查询和列表框选择操作实例讲解
  • 退休返聘人员报销差旅费
  • 结转完工产品成本计算公式
  • debian更换国内源教程
  • 模态框无法弹出
  • 违反发票管理的处罚
  • php操作mysql数据库
  • 纽约公共图书馆开放时间
  • php制作简单的表单代码
  • 车船税不计提怎么做分录
  • php+mysql+jquery实现日历签到功能
  • 机械干租和湿租的税率
  • 支付员工交通费怎么入账
  • Python 人脸识别系统
  • 单位购买电水壶会计入账
  • 织梦系统网站搭建教程
  • 筹资费用可以算成本吗
  • 软件使用权计入什么科目
  • 新增四大行业营收排名
  • 增值税进项税额转出的情况有哪些
  • 工程物资到货管理
  • 营业执照是什么字体
  • 行政单位汽车加油无明细怎么办
  • 企业的营业税金怎么计算
  • 如何开具房屋租赁登记备案证明
  • 建筑公司工程按什么收费
  • 给分公司开发票由总公司付款怎么办?
  • 应收帐款表
  • 生活垃圾处理费标准
  • 外经证是在工程所在地办理吗
  • sql查询包含特殊
  • 使用筷子就餐会不会传染乙肝病毒
  • mysql 模型
  • centos 安装程序
  • 比较常见的成语有哪些
  • win8电脑如何进入安全模式启动
  • mac打印预览快捷键是什么
  • linux交换空间的作用
  • 无法安装windows xp
  • 制作linux的u盘安装盘
  • winxp虚拟内存怎么改
  • win7系统如何
  • jquery prototype
  • Android自定义对话框
  • python生成密钥
  • 基于springboot的毕设
  • unity屏幕坐标 ui坐标
  • 甘肃职称申报评审入口官网
  • 财政部国家税务总局
  • 土地增值税计税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设