前端开发常用又好用的几个软件

本文转载自: http://www.cnblogs.com/zhengshize/p/6836885.html 作者:zhengshize 转载请注明该声明。

目录:

查看目录

  1. sublime text3编辑器
  2. Beyond Compare 比较代码工具
  3. Photoshop CC 
  4. EditPlus 编辑器
  5. PxCook 像素大厨
  6. 分区助手
  7. png图片转ico图标软件:AveIcon
  8. 强力删除Adobe软件工具:AdobeCreativeCloudCleanerTool
  9. 识别文字工具
  10. 录制gif动图 GifCam
  11. 屏幕取色器 ColorPix
  12. 本地服务器 phpStudy
  13. vscode编辑器
  14. 火狐开发者版浏览器

1、sublime text3 编辑器

  快捷键 + zen coding 能让你如鱼得水。当然,下面这张截图我是用了 Material Theme + Monokai 的主题,还有很多效果没展示出来,等你们自己去探索。

  sublime text3 下载地址:http://www.downza.cn/soft/28235.html

  软件截图:

2、Beyond Compare 比较代码工具

  beyond也是个好软件,各种比较功能,屡试不爽。最下面的软件截图我就只展示最简单的文本比较,新加入的显示为蓝色,更改的为红色,一目了然。

  下载地址:http://www.scootersoftware.com/download.php

  (1) 文件夹比较 + 文件夹合并 + 文件夹同步 + 文本比较 + 文本合并

    

  (2) 表格比较 + 16进制比较 + MP3比较 + 图片比较 + 注册表比较 + 版本比较

  

  软件截图:

3、Photoshop CC 

  作为切图、P图的首选工具,目前你还有比它更好的选择吗?就算有,用习惯的东西可不是一朝一夕就能改变滴!

  Photoshop CC 网上下载地址:http://www.xdowns.com/soft/31/93/2013/Soft_107049.html

  

4、EditPlus 编辑器

  把EditPlus当记事本用,当然还可以用其它的,例如nodepad++,VIM等,用的习惯才是最好的

  EditPlus 百度云盘下载地址:链接:http://pan.baidu.com/s/1jHGZZhW 密码:pnb7

  

5、PxCook 像素大厨

  当你不知道白色背景图要设置宽高为多少好时,PxCook是个不错的选择,在你切图前徘徊于图片量尺寸的时候,PxCook可以很好的帮助你。

  PxCook 下载地址:http://www.fancynode.com.cn/pxcook

  

6、分区助手

   什么?你的C盘又满了??来吧!试试分区助手,不用998,也不用198,更不用98,今天我们就差倒贴钱给你介绍 分区助 手了。

  小小的软件,大大的作用。把其它盘的内存转为C盘的内存,从此以后下载各种小电影直接放桌面。

  分区助手 下载地址:http://www.downza.cn/soft/10803.html

  

7、png图片转ico图标软件:AveIcon

  有没有发现,想把png图片转成ico,用PS是转不了的,嗯...好像要装什么插件才可以,一看就懵懂,如果有一个软件,不用安装、不占太多内存、使用方便、还要是中文的那就好了。我还真找到了:

  软件链接:https://pan.baidu.com/s/1iyhKpzDTQt5HdB_2k-y3_g 密码:lwtp

  效果是这样的:

  

  把png拖入右边的框框,右下角就会显示转换中...

  

  转换完成后,直接把左边的ico图标拖出,想放哪里就拖到哪里

  嗯嗯,这样就完成了,拖进拖出就OK了,虽然很少用,不过存起来等需要用到的时候拖一下就好了。

2018-03-30-更新:

8、强力删除Adobe软件工具:AdobeCreativeCloudCleanerTool

  下载地址:https://pan.baidu.com/s/1brw5RwpPqB9j9nl9ccgrRg 密码:f0ry

       今晚在清理电脑软件的时候,Adobe InDesign CS6软件一直卸载不了,因为试用期过了,而且也没用了,所以想卸载掉,最后用了这个终于能卸载了,记录下。

  

  按照它的步骤来,不用安装,先选语言,当然是e了,可惜木有中文,不过不用全看懂,看懂关键词就好(提示:看不懂的选带all的选项,哈哈哈)。

2018-05-08-更新:

9. 识别文字工具

    链接:https://pan.baidu.com/s/1f-_wvjZJvo1pIlNLKkLMaA   提取码:gev6 

    有时候页面重构的时候,设计师发来一个psd图,然后好几百M,单打开PS都有点卡了,再加各种其它软件电脑哪里受得了。就算电脑受得了,自己也受不了等待,那就用jpg图来重构,图标什么的叫设计师切好。然鹅,问题出现了,设计稿上的文字我木有啊,难道每个字都自己打出来?好久没单身了,手速不行了。难道叫设计师整理过来?他不拿着冒蓝光的黄金加特林过来就不错了,还想整理,用不用工资也帮你拿了,哈哈,显然效率太低了,怎么办呢?

    用这个文字识别工具:

10. 录制gif动图 GifCam

    链接:https://pan.baidu.com/s/1TEXkyOH5UxuIIldJdcelGw 密码:cd3o

    不用安装,直接打开

    

    打开的时候界面是这样的:

    

    然后一般会把鼠标也录入进来:录制(右边箭头)-录制鼠标(打钩)

    

    最后点击 录制 就可以录gif图了,录好了就点 保存 就好了,如下图效果,你要跟别人讲这里有2个人,就可以用鼠标指出来。

    

 2018-09-21-更新:

 11. 屏幕取色器 ColorPix

      下载地址: https://colorpix.en.softonic.com/

       这个也是免安装绿色版,直接打开就可以到处吸

       有时候在自己电脑上看到一些logo的颜色还不错,但是不好取到它的色值,虽然也可以取到,就是比较麻烦:

  (1)把屏幕印下来存成图片,再在PS上用吸管工具吸颜色。

  (2)如果是在网页上的颜色,可以用审查元素,然后在样式那里找到对应的色值

       (3)审查元素找到styles, 在element.style里面写color:#000;就会有个黑色的色块,点击它,再点像吸管工具的图标,就可以在网页上取任何色值

  但是现在用这个就可以直接吸了,方便了许多。注意的是,想固定颜色要按一下空格键,色值就固定了。

   

12. 本地服务器 phpStudy

  下载地址:http://phpstudy.php.cn/

  phpStudy是个好软件,在你的项目build好后,可以在本地自己先测一下看看有没有什么问题。例如用vue开发的项目,build后直接把dist文件夹里面的文件拷到phpStudy的WWW文件夹下,打开本地地址就可以测试了。

  

   想要把代码放到自己喜欢的地方也可以,在“其他选项菜单”->“站点域名管理”里面新增一个站点。

  我在C盘的web文件夹这里,新增了一个站点,端口号设为88,所以以后可以把vue编译后的dist文件放到这里,打开本地的88端口就可以测试了:

  http://localhost:88/#/

  

 

 2018-12-10-更新:

 13. Visual Studio Code

    下载地址: https://code.visualstudio.com/download

    Visual Studio Code是一个轻量级但功能强大的源代码编辑器,可以在桌面上运行,适用于Windows、macOS和Linux。它内置了对JavaScript、TypeScript和Node的支持。它拥有丰富的生态系统,可以扩展到其他语言(如c++、c#、Java、Python、PHP、Go)和运行时(如. net和Unity)。

    

    点击左侧的“搜索”按钮,即可全局搜索,可实现快速查找某些代码的所有位置

    

    点击左边的“拓展”按钮可以安装相应的插件,提高开发效率

    

    "ctrl+shift+Y"打开控制台,切换到终端,即可运行npm命令

    

 14. 火狐开发者版浏览器

    下载地址:https://www.mozilla.org/zh-CN/firefox/developer/

     

    点击右上角菜单图标,找到里面的“Add-ons”选项,来打开拓展,下载浏览器插件

    

    例如我安装的插件如下:

    1). AdBlock 是去网页广告插件

    2). Country Flags & IP Whois 是显示IP地址和所在国家的国旗

    3). Url to QrCode 是显示网页的二维码

    4). Vue.js devtools 是可以看vue组件的状态和属组等

    5). Bing网页翻译 当然就是翻译网页啦

    

    然后就是一些用了就知道的强大功能:

    

 

 

 

 

  结尾:

    今天就放这几个软件啦,以后还会有很多好东西滴!

    

1. MVC模式(Model-View-Controller) MVC模式是一种将应用程序分成三个核心部分的设计模式,分别是模型(Model)、视图(View)和控制器(Controller)。模型负责处理数据和业务逻辑,视图负责界面展示,控制器协调模型和视图之间的交互。 2. MVVM模式(Model-View-ViewModel) MVVM模式是一种基于MVC模式的设计模式,它将视图和模型之间的通信通过一个名为ViewModel的中间件实现。ViewModel负责处理视图和模型之间的数据绑定和事件处理,实现了视图和模型的解耦。 3. 单例模式(Singleton) 单例模式是一种创建型模式,它保证一个类只有一个实例,并提供全局访问点。这种模式在需要全局共享资源的情况下非常有用,比如数据库连接池、线程池等。 4. 观察者模式(Observer) 观察者模式是一种行为模式,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象,当主题对象状态发生改变时,它的所有观察者都会收到通知并更新自己的状态。 5. 策略模式(Strategy) 策略模式是一种行为模式,它定义了一系列算法,将每个算法都封装起来,使它们可以相互替换。这样,客户端可以在不改变代码的情况下选择不同的算法,从而实现不同的行为。 6. 工厂模式(Factory) 工厂模式是一种创建型模式,它定义了一个用于创建对象的接口,但是由子类决定要实例化的类是哪一个。这样,工厂方法让类的实例化推迟到了子类中进行,从而实现了解耦和灵活性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值