前端代码生成器,代码中怎么看出使用了vue框架
前端代码生成器,代码中怎么看出使用了vue框架详细介绍
本文目录一览： 有哪些生成前端代码的神器呢？
在前端开发的过程中，很多相同的代码会写很多遍。如：开始新项目的时候，要写和旧项目类似脚手架代码；新建一个组件的时候，要按约定写组件结构。如果这些重复代码能用工具来生成，能提升前端的开发效率。
生成代码的工具分为两类：基于命令的和基于图像界面的。
基于命令的工具的优点是，可配置高，效率快。缺点是，可发现性差。适合配置项目很多，配置可以组合的情况。
基于图像界面的优点是，可发现性强，操作简单。缺点是如果配置项很多，容易变得很难用。
罗嗦了一堆，下面开始介绍正题。
项目脚手架代码生成工具
项目脚手架主要做的项目的构建流程，环境的配置等。做到开箱即用。
基于命令的
yo 曾经流行过的一个脚手架生成工具。支持定义脚手架内容。基于 yo 的第三方脚手架也很多。
vue-cli 。 Vue 项目脚手架。支持自定义脚手架内容，感兴趣的可以读读 从vue-cli源码学习如何写模板。
create react app React 脚手架。比较轻量级，只是整合 webpack 和 react-router。
react boilerplate React 脚手架。比较重量级，整合了webpack 和 react router, redux, redux suga, reselect 等。
基于图形界面的
定制 Bootstrap 3
组件代码生成工具
基于命令的
react boilerplate 的 nam run generate 可生成组件的脚手架代码。
页面代码生成工具
基于命令的
代码编辑器的代码片段(Code Snippent)功能。主流的代码编辑器(Sublime,Atom,VS Code，Web Strom等) 都支持代码片段。也有写好的代码片段的编辑器插件。主流的框架基本都有对应的代码片段工具。
Emmet 提供 HTML，CSS，JS 的自动补全功能。
Bootstrap 3 Snippets
Vuejs Snippets
基于图形界面的
H5营销页面生成工具。有一大堆。
Maka
初夜
兔展
GrapesJS 强大的网页生成器。开源。
LayoutIt 托拽 Bootstrap 组件，生成页面。
前端什么样的代码开发工具好用
每个前端开发人员都有自己喜欢的开发工具，用这些工具能让编码更容易并且“令人愉快”。分享一些我认为真的很棒的很棒的Web开发工具！
1.Glitch
glitch
好的，这不仅仅是一个工具，还是一个非常棒的编码平台以及一个很棒的技术社区。我可以在内置代码编辑器的帮助下托管我的项目。支持多种语言，但最适合NodeJS。
2.Shadows
brumm.af/shadows
这个网站提供生成平滑阴影的CSS代码，可以创建平滑的边框阴影。它看起来真的很流畅，令人满意。
3.Coolors
coolors.co
这是一款非常好的在线工具，可以为项目生成匹配的颜色方案。如果不喜欢当前的方案，按下空格键，它会重新生成一个配色方案，直到你满意~
4.Blobmaker
blobmaker.app
Blobmaker可帮助你随机生成各种尺寸，不同颜色和形状的SVGBlob。你可以用作背景或创建看起来很酷的动画。
5.Getwavs
getwaves.io
与Blobmaker相似，GetWaves能够随机生成不同颜色和不同数量的波浪。用作网页的页脚或页眉看起来不错。
6.Undraw.co
undraw.co
开放源代码项目的SVG插图集，可用来做登录页面，404页面等，当然普通页面也能用!上面的插图可以不带归属地版权的使用，无需支付任何费用。
7.Marcdown
liyasthomas.github.io/marcdown
由LiyasThomas提供的在线实时的Markdown网页编辑器，它可预览Markdown代码，将其发布到GitHub上。它提供一个非常漂亮的暗黑模式。还可脱机工作，这使得它显得更出色。
8.postwoman
postwoman.io
这是LiyasThomas构建的另一个工具。Postwoman是一个API请求构建工作。开发者可以不使用代理来测试API。这是一个渐进式Web应用程序，可以保存到桌面来用。它是轻量级的产品，基本上可以是Postman的在线替代品。
9.Screely
screely
它可以帮助你创建超级漂亮的网站截图模型。如果你不是MacBook用户，但需要更好的网站图片作为自述文件，它非常适合我们。
10.CSS网格生成器
cssgrid-generator.netlify/
这是SarahDrasner的创建的优秀网站，它使用CSS创建动态网格布局。
以上是10款web前端开发工具分享，希望对你有帮助。
有什么增删改查代码生成器可以推荐？
你好，推荐你尝试 listcode.cn 增删改查代码生成器， 在线的，只要有db脚本就可以生成。对外键关系支持的很好。
提供java，python，php，nodejs等常见语言和框架的 CRUD代码生成服务（即 常见的增删改查），后台代码、前端界面、js等，一站解决。
相比于传统的增删改查代码生成器，ListCode 做了很多完善， 不论从功能的丰富程度，还是支持的语言、技术框架种类上都有了很大进步，可以很大的提高开发效率，减少人工介入修改的工作量。
功能特点：
前后端代码、js、UI一站生成
翻页，多条件联合查询
外键关联编辑、展示
输入验证，错误提示
常见类型个性化编辑、展示
完整REST API接口
具体支持的语言和技术框架：
java，springmvc jpa mybatis
php：laravel，thinkPhp5
python：flask，tonardo
js：vue，nodejs
体验demo入口望采纳
web前端开发常用工具有哪些_web前端开发用什么工具
常用的web前端开发工具web前端开发工具有哪些：
1、Bootstrap
Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。
2、Foundation
Foundation是一个易用、强大而且灵活的框架，用于构建基于任何设备上的Web应用。提供多种Web上的UI组件，如表单、按钮、Tabs等。
3、Cloud9IDE
Cloud9IDE是一个基于Node.JS构建的JavaScript程序开发WebIDE。它拥有一个非常快的文本编辑器，支持为JS，HTML，CSS和这几种的混合代码进行着色显示。Cloud9IDE还为node.js和GoogleChrome集成调试器，可以在IDE中启动、暂停和停止。
4、Notepad
Notepad是一款非常有特色的编辑器，是开源软件，可以免费使用。我们开发人员都是必备的。支持的语言:C,C,Java,C#,XML,HTML,PHP,Javascript!
5、VisualStudioCode
VisualStudioCode是一个运行于OSX，Windows和Linux之上的，针对于编写现代web和云应用的跨平台编辑器。
6、GIMP
GIMP是GNU图像处理程序(GNUImageProgram)的缩写。包括几乎所有图象处理所需的功能，号称Linux下的PhotoShop。GIMP在Linux系统推出时就风靡了绘图爱好者圈。
7、
是Twitter送给Web开发者的一份大礼，作为一款Web安全开发工具，能够自动实施安全相关的header规则，包括内容安全政策(CSP)，防止XSS、HSTS等攻击，防止火绵羊(Firesheep)攻击以及XFO点击劫持等。
8、Fontello
Fontello是个图标字体生成器。这个工具允许用户把这些图标web字体放到自己的项目中。主要特性如下：缩小字形集合，减小字体大小;合并一些字体标记到单个文件中;访问大量专业级的开源图标。
JeeCGBoot低代码开发平台，强大的代码生成器前后端一起生成
今日推荐：JeeCGBoot低代码开发平台
推荐理由：
1、前后端实现分离架构，通过API调用，实现架构解耦
2、项目集成SpringBoot、SpringCloud的Spring全家桶
3、在线实现开发，表单开发设计、报表配置、在线图表设计、在线设计流程、流程自动化、插件能力等
4、系统集成了工作流，实现扩展任务接口。
5、解决java项目的70%的重复工作
6、最重要的是技术售后的完善，有完善的开发文档，常见问题，交流群
适用场景
1、内部办公系统OA
2、企业资源计划系统ERP
3、客户关系管理系统CRM
4、企业信息管理系统
5、电商SAAS系统
功能特色：
1、支持微服务SpringCloudAlibab全家桶
2、前后端高效代码生成器，单表，一对多模型，CRUD等功能一键生成
3、低代码图表功能，在线设计图表无需编码，实现曲线图，柱状图，数据报表等自定义排版布局
4、封装各种工具类，如定时任务，短信接口邮件发送，excel导入，文件上传下载等
5、支持查询过滤器，动态拼装SQL追加查询条件
6、实现数据权限，控制到行级，列表级，表单字段级，实现不同人看不同数据
7、支持SAAS服务模式，提供多租户的架构方案
8、数据库兼容主流Mysql、PostgreSql、Oracle、SQLServer、MariaDB等主流数据库，一套代码兼容主流
9、集成了Activiti工作流
10、支持单点登录CAS集成方案
11、接口统一采用restful接口方式，集成了Swagger-ui在线接口文档
技术架构：
后台环境：
Java8+Maven+Mysql+Redis
后台开发技术
springBoot2+SpringCloudAlibaba+MybatisPlus+Jimurport+ApacheShir
前端：
Vue2.6+Axios
微服务架构图：
后台操作图：
支持手机端
代码中怎么看出使用了vue框架
前端代码生成器，简单的说：
第一步，通过接口文档获取接口的入参＼出参，并将这入参\出参格式化成特定JSON
第二步，根据自己的项目，结合表格、表单组件，抽离出代码模板
第三步，通过第一二步的JSON、代码模板，生成vue、JS以及路由文件
简介
本项目采用puppeteer对接口文档网页读取，获得接口链接、入参、出参等，并记录半生成特定格式的json．
因本项目是为了配合公司的接口文档，生成公司的后台管理网站，定制化较高，所以此项目对于其他朋友来说，可做参考．如其他交流，可以联系我．
技术方案
获接口文档中接口的入参＼出参，我采用爬虫框架puppeteer来获取，根据获得的入参\出参，结合代码模板，生成实际放入工程的增删改查文件，做到增删改查基本不用再码代码．同时支持审核等表格操作。
通过fs.writeFile来生成文件
说明
目前项目中只给了根据接口生成vue2+element的代码．因为代码是根据特定组件生成的．
表格、表单组件见项目中组件目录，这个需要全局引入．见components目录
另有生成vue3+typescript+ant的代码，暂未公布．
配置说明
scale的配置
```js
// 适用于scale的配置
export const config = {
href: 'http://xxx.cn/',
serverName: 'AdminStoreContractService',
pages: [{
filePath: 'promotionNew', // 列表＼新＼修页面所在路径
chunkName: 'base', // chunkName 用于路由中 require.ensure 打包参数
list: { // 列表
fileName: 'pn-list', // 列表文件名字
name: '列表', // 菜单名
apiName: 'listStoreContract', // 列表接口名
exportFile: { // 导出 [非必填]
apiUrl: '',
downFileName: ''
}
},
基本上是脏检查或数据劫持.那么本文就以Vue框架出发,探索作者运用Object.defineProperty来实现数据劫持的奥秘(本文所选取的相关代码源自于Vue v... '
前端src下有以vue为后缀的页面，就说明前端页面使用了vue框架；3.4.2.代码中有下面这个注解，就说明java后台用了springBoot框架；@SpringBootApplication
写前端用哪个软件好？
1、Bootstrap
Bootstrap是快速开发Web应用程序的bai前端工具包。它是一个CSS和HTML的集合，它使用了新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。
2、蓝湖
蓝湖用于查看标注和切图下载非常方便
3、Cloud9IDE
Cloud9IDE是一个基于Node.JS构建的JavaScript程序开发WebIDE。它拥有一个非常快的文本编辑器，支持为JS，HTML，CSS和这几种的混合代码进行着色显示。Cloud9IDE还为node.js和GoogleChrome集成调试器，可以在IDE中启动、暂停和停止。
4、Notepad++
Notepad++是一款非常有特色的编辑器，是开源软件，可以免费使用。我们开发人员都是必备的。支持的语言:C,C++,Java,C#,XML,HTML,PHP,Javascript!
5、VisualStudioCode
VisualStudioCode是一个运行于OSX，Windows和Linux之上的，针对于编写现代web和云应用的跨平台编辑器。
6、GIMP
GIMP是GNU图像处理程序(GNUImageManipulationProgram)的缩写。包括几乎所有图象处理所需的功能，号称Linux下的PhotoShop。GIMP在Linux系统推出时就风靡了绘图爱好者圈。
7、SecureHeaders
SecureHeaders是Twitter送给Web开发者的一份大礼，作为一款Web安全开发工具，Secureheaders能够自动实施安全相关的header规则，包括内容安全政策(CSP)，防止XSS、HSTS等攻击，防止火绵羊(Firesheep)攻击以及XFO点击劫持等。
8、Fontello
Fontello是个图标字体生成器。这个工具允许用户把这些图标web字体放到自己的项目中。主要特性如下：缩小字形集合，减小字体大小;合并一些字体标记到单个文件中；访问大量专业级的开源图标。
前端常用的工具有哪些？
1、jQuery
jQuery由于其无限的教程，没有跨平台/浏览器问题，优秀的用户界面，大量的插件以及它的轻量，快速和快速学习等特点而脱颖而出。超过70％的受访者选择jQuery作为他们的前端库，它是一个快速，轻量级和简洁的JavaScript库，主要用于HTML文档遍历、事件处理、动画和用于快速Web开发的Ajax交互。从本质上讲，jQuery最适合需要快速开发的应用程序。
2、Bootstrap
超过65％的开发者选择Bootstrap作为他们最喜欢的框架来使用，它是一个用HTML、CSS和JS开发的开源工具包。Bootstrap的广泛流行主要是因为它的简单使用、优秀的社区以及大量的文章和教程、第三方插件和扩展、主题构建器等。
3、Angular
如果你打算构建一个动态且强大的单页应用程序，Angular就是你需要的框架。Angular是高度模块化的，因此非常适合与团队分开大型工作，并且使测试和调试变得轻松。功能优先的方法使Angular更加专注于功能，使开发人员的工作更轻松。此外，它还有来自Google社区的出色工具和支持。
4、NPM
NPM是Node的包管理器。借助NPM，开发人员可以安装各种模块进行Web开发，共享和借用软件包，并管理私有开发。它由网站、命令行界面（CLI）和注册表三个不同的组件组成。
5、Webpack
Webpack是现代JavaScript应用程序的模块打包程序，它将前端开发所需的所有资源（如JavaScript、字体和图像）集中到一个地方。如果你正在开发复杂的前端，这特别有用。你可以去通过部署具有的WebPack Web应用程序，以获取有关的WebPack起来和运行。
除了以上分享的工具，还有Sass、React等。根据企业所用工具的不同，你需要掌握的工具也不一样。
vscode 有很多插件用起来很方便
1、Adobe Dreamweaver CS6
Dreamweaver CS6是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。由于Dreamweaver支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员，你可以无需编写任何代码就能快速创建Web页面。其成熟的代码编辑工具更适用于Web开发高级人员的创作！
2、Adobe Edge
Adobe Edge是一个用HTML5、CSS、Java开发动态互动内容的设计工具。它的一个重要功能是web工具包界面，用于方便确保在不同浏览器中架构的一致性，此外，Adobe Edge还将整合TypeKit这样的字体服务。通过Edge设计的内容可以兼容iOS和Android设备，也可以运行在火狐、Chrome、Safari和IE9等主流浏览器上。
3、DevExtreme
DevExtreme Complete Subion是性能最优的HTML5,CSS和Java移动开发框架，可以直接在Visual Studio集成开发环境，构建iOS，Android，Tizen和Windows Phone 8应用程序。DevExtreme包含 PhoneJS 和 ChartJS 两个原生UI组件，并且提供源代码。目前，DevExtreme支持VS2010/2012/2013集成开发环境，兼容Android 4+、iOS5+、Windows 8、Window Phone 8、Tizen五大移动平台，是Visual Studio开发人员开发跨平台移动产品的首选工具。
4、JetBrains WebStorm
WebStorm 是jetbrains公司旗下一款JS开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaS IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
5、Sencha Architect
在开发移动和桌面应用的工具中，Sencha的定位是HTML5可视化应用开发。开发团队可以在一个单一集成的环境中完成应用的设计、开发和部署。开发者还可以开发Sencha Touch2和Ext JS4 Java应用，并实时预览。
6、Initializr
Initializr 是制作 HTML5 网站最好的入门辅助开发工具，你可以使用提供的特色模板快速生成网站，也可以自定义，Initializr 会为你生成代码简洁的可定制的网页模板。
7、HTML5demos
想知道你的浏览器是否支持 HTML5 Canvas 吗？想知道 Safari 是否可以运行简单的 HTML5 聊天客户端吗？HTML5demos 会告诉你每一个HTML5特性在哪些浏览器中支持。
8、HTML5 Tracker
想了解 HTML5的最新动向吗? 使用 HTML5 Tracker 吧，它可以跟踪 HTML5 最新修订信息。
9、HTML5 visual cheat sheet
想要快速超找一个标签或者属性吗？看看这个非常酷的速查手册吧，每个Web开发人员的必备。
10、Switch To HTML5
Switch To HTML5 是一个基础而实用的模板生成工具。如果你开始一个新项目，可以到这里获取免费的 HTML5 网站模板。
11、HTML5 Test
你浏览器准备好迎接 HTML5 革命了吗？HTML5 Test 将告诉你。这个网站会为你当前使用的浏览器生成一份对video、audio、canvas等等特性的支持情况的完整报告。
12、Lime JS
LimeJS 是一个 HTML5 游戏开发框架，用于快速构建运行于触屏设备和桌面浏览器的游戏。非常棒的HTML5开发工具，一定要用用试试。
以上就是向大家推荐12款优秀的HTML5开发工具。希望能帮到大家。
主流的web前端开发写代码的软件有这些Webstorm、Vscode、Sublime Text、HBuilder、Dreamweaver、notepad++、editplus等
编写代码的软件有不少：WebStorm、Sublime、HBuilderX、Editplus和Dreamweaver等。
每个软件各有优缺点。
我自己主要用Dreamweaver这个软件，用习惯了；有时用一下 HBuilderX
无代码低代码平台是不是就是代码生成器？
无代码和低代码平台是用于构建应用程序和软件的工具，它们通过提供可视化界面和自动化工具，使非专业程序员和开发人员能够创建应用程序，而不需要编写大量的代码。
尽管这些平台都可以生成代码，但它们不同于传统的代码生成器。传统的代码生成器通常是根据特定的模板和规则自动生成代码，这些代码通常是固定的，不可修改的，并且只能执行特定的任务。无代码和低代码平台则更加灵活，允许用户通过拖放和配置组件、定义工作流、设置规则等方式，来创建更加复杂的应用程序，而不需要编写大量的代码。这使得开发人员可以更快速、更轻松地构建应用程序，从而节省时间和精力。
JNPF低代码开发平台是国内领先的低代码/无代码开发商，采用主流的两大技术Java/.Net开发，专注低代码开发，支持多端协同操作，100%提供源码，支持多种云环境部署、本地部署。
迄今为止，JNPF服务的客户已成功覆盖华北，华东、华南、西南地区市场，广泛分布于互联网、地产、金融、医药、教育，汽车、物流、新零售等行业，沉淀了海量客户经验的通用解决方案模板，能够更便捷解决场景痛点，企业项目节省80%时间成本，让开发者将重心放在业务逻辑，不必烦恼底层架构设计，可短时间开发出如ERP、OA、CRM、HR、MIS以及电信、银行、政府、企业等各行业的企业应用系统。
我们也在一直关注低代码技术的发展，好像大部分低代码平台都是采用代码生成的模式，给乙方厂商开发人员提高开发效率，甲方客户一般还是挺难使用，我觉得低代码平台最好能给甲方客户业务人员或乙方的现场运维人员使用，这样效率最高，现场维护人员了解客户需求后就能自己搞，这样的话，减少沟通成本
无代码低代码平台并不完全是代码生成器，虽然它们都可以让用户在不需要直接编写代码的情况下创建应用程序。但是，无代码低代码平台具有更多的功能和特点，可以帮助用户在更高的抽象层次上实现应用程序的构建，包括界面设计、数据库设计、API集成、自动化测试等功能。
无代码低代码平台通常提供了可视化界面和工具，可以让用户进行配置、拖拽和组合组件来创建应用程序，这些组件可能包括表单、UI元素、模板、逻辑规则等。通过这些可视化方式，用户可以快速构建并编辑应用程序，而不需要深入研究编程语言和框架。
同时，无代码低代码平台通常也支持一些基于代码的自定义功能，用户可以在需要的时候添加代码来进一步扩展应用程序的功能。因此可以说，无代码低代码平台不仅能够帮助用户快速创建应用程序而且能够满足一定复杂度的定制需求。
就像JNFP，深度集成Java+.Net6双技术引擎，具备易维护、便部署、高集成、高效率等多方面特性，面向企业项目提供开发服务，提供开发构建、开放连接、部署运维、在线运营的全生命周期能力。
成功运用在上千个数字化项目上，帮助软件公司完成多个百万级软件解决方案交付，项?交付周期缩短到1-2月，100%源码交付，JNPF让越来越多的企业和组织找到了高效、低成本的数字化创新路径。同时，支持多种云环境部署、本地部署给予最大的安全保障，可以帮助企业快速搭建适合自身应用场景的产品。
前端工程师都有用哪些比较靠谱的小工具
做前端攻城狮几年了，在这里推荐一些前端开发中可以是你提高开发效率的小工具，既小巧又方便；
一、看图软件，ACDSee和PicaView
-----------------------------------------------
主要用途：图片及图片属性浏览
ACDSee是非常流行的看图工具之一。它提供了良好的操作界面，简单人性化的操作方式，优质的快速图形解码方式，支持丰富的图形格式，强大的图形文件管理功能等等。
PicaView对单个图片查看特别适合，菜单上会出现这个图形文件的略图、格式、尺寸，还可以直接打印、转换该图片！PicaView支持常见的图像文件格式，另外可挂接各种格式插件和功能插件。
二、开发调试工具，火狐、Firebug插件。
-----------------------------------------------
前端要看网页，浏览器是必备的，但为什么要选择火狐浏览器而不是谷歌、IE、opera、360？首先，IE就不要谈了，360那些国产的也不要提 了，opera 国内使用率并不高。使用谷歌浏览器也是一个好的选择，但是我本人倾向于使用火狐。因为在之前的使用过程中，感觉 chrome 是拿来上网用的，而 Firefox 才是拿来开发用的，特别是下面介绍的一些功能插件都是基于火狐浏览器的。当然谷歌浏览器上面也有一套不错的开发工具。查看选中部分源代码如下图：
这个插件具有非常强大的功能，它把网页的 HTML 结构进行了整理，查看和修改 CSS 也非常方便。这只是基础的功能，还有控制台等可以调试 JavaScript 等，是前端不可缺少的工具。具体使用方法不再赘述。
三、开发工具，EditPlus
-----------------------------------------------
非常小巧好用的文本编辑器。用来快速高效的搜索修改代码。如果你想修改一点小代码的时候，却要忍受几秒的编辑软件启动时间，那么就用这个吧。无论是 写代码还是修改代码，个人觉得都比那些功能齐全的编辑软件好很多。当然文本编辑器也有很多，但是用了一遍我个人觉得这是最好的。
node.js + npm， 这个是前端工具的一个平台，没有他们就没有以下的工具，建立开发环境，下载开发工具，运行开发工具的利器
2. bower, 库依赖管理器，类似于npm，但针对浏览器JavaScript的依赖管理，减少寻找库，下载库和升级库的烦恼
3.grunt，流程自动化管理工具，将你非编程的开发步骤减到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5无尽地狱，发布和开发各种无压力。以下大部分开发工具，都有grunt的相对应的插件，也就是说他们都能利用grunt进行自动化运行
4.liveReload, 本来是一套解决方案，自从grunt watch出现后，我们只要安装他的chrome或者firefox插件就行了。它的目的很简单，只要发现目标文件中有任何一个文件有改动，立刻通知浏览器刷新页面，这样就免除了手动按F5。如果和grunt watch合用，就是只要发现任何文件有改动，立刻运行自动化流程中的所有任务，然后通知浏览器刷新。
5. 本人用less比较多，因为基本无缝兼容历史遗留系统中的css，（而Sass语法比较特殊，还没有专门用过，应该开发新系统的css比较好），一套css预编译语言，可以把less语法转成css语法，lessc是less语言编译器，配合grunt less，编写大型css文档毫无压力。
6.Phantomjs，没有界面的浏览器，用js脚本控制其操作网页。测试，抓图，网页流程自动化利器。配合casperjs的语法简化功能真强库后，控制Phantomjs就更加容易了
7. grunt PhotoBox, 利用phantomjs抓图功能和ImageMagick图片比较功能，在利用live-reload即时刷新功能，可以让你开发css的时候，快速对n多个页面进行观察，看其前后变化。不过缺点也比较明显，就是速度慢。但比起手动对比来看，还是非常快的。值得css开发时拥有
8. phantomCSS，这个和grunt photobox类似，都用于css开发的，差别是photobox是全局观察差别，而这个是单元组件观察差别，它方便你就抓页面中某一块元素然后进行前后比较，更加注重细节上的差异，这个比较合适组件开发时候使用。
9. jshint，帮助你快速定位JavaScript的语法错误和潜在的跨浏览器兼容性问题。在部署你JS前，用jshint检查一下是没错的 。
10.UglifyJS，压缩JavaScript代码，使你的JS代码可以更加快速的加载。有grunt的插件
11. browserify允许你在浏览器里面使用CMD标准模块，但本人认为它的另外一个优势是合并代码，开发时候可以把代码模块化，分成很多很多小文件，然后有调理的放到相对应文件夹下，然后最后合成单一文件。本人曾经利用browserify开发greasemonkey代码，大大简化了greasemonkey的开发难度和增强了greasemonkey代码的质量。browserify有grunt插件，这样又减少的开发步骤。
12. Karma， google开发的一个单元测试运行器，这个自己本身不是一个单元测试框架，而是配合测试单元框架的一个工具。由于前端浏览器众多，就算你有live-reload这样自动化工具，但是还是要手动打开各种浏览器，手动把你的单元测试在各个浏览器都运行一遍。这个工具目的是目的就是让电脑能自动化打开各种浏览器，然后把单元测试在个个浏览器中自动运行一遍，让这个步骤也能自动化了。
13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin实际上背后使用的是clean-css工具，这个工具就是用来压缩精简css的，让css文件大小更小。
还有些有名气的工具，应该不错，但是自己没有用过，所以也就没有提，但可以参考一下
yeoman 项目初始化工具
buddy.js 魔术数字检查器
Image minifier.压缩图片工具
html-minifier html压缩
jade html预编译语言
jsdox JS代码注释文档生成器
jscs JS代码风格检查器
1、TakeColor 取色器
对于前端开发来说，和颜色、图片打交道是难免的，有的时候想要在ps外面获取颜色.
2、CoolFormat 源代码格式化工具
CoolFormat，不仅仅适用于前端，因为它支持很多语言源代码的格式化，可以在上面的开始菜单中选择你要格式化的语言种类，这里我选择的是js，然后将一串很乱的js代码粘贴到下面的文本框里面，点击快速格式化.
3、做笔记的小帮手——有道云笔记
其实这有道云笔记不算是小工具了，在这之前，我一直都是用txt记事本记东西的
作为曾经的web前端工程师，来答一发。
jsonView Chrome插件
这是一个Chrome浏览器的json视图的插件。这个插件非常强大的，不仅可以把你在浏览器输出的json数据格式化，也可以将浏览器的xml格式的文件格式化，非常非常的方便，尤其是前端同学在查看api数据的时候，无需再去各种json格式化网站逐个匹配了~~~~强烈推荐！！
WebStorm IDE开发工具
这是款前端开发的ide。基本上前端开发中你能想到的，他都可以帮你实现了，语法高亮，代码补全提示，terminal终端连接，mysql操作功能，集成一体，甚至php都可以写，异常的强大，非常重的一个前端开发工具，推荐。
Hbuilder 一个可以云打包html5app的开发工具
Hbuilder是一个国内互联网公司DClound开发的ide，这款ide非常的强大，专门为了Html5所打造的一款ide，如果你不想做原声的Android和iOS APP，那么你可以通过在Hbuilder上开发webapp，之后通过Hbuilder的云打包打包成自己的apk或者.ipa的文件，一秒钟可以打包你的安卓或者iOS APP。如果你不想云打包的话，你可以本地打包，可以下各种插件，是一款非常强大的免费前端H5的ide，强烈推荐！
SessionBox 可以随意切换你的Session的Chrome插件
sessionBox是一块可以让你随意切换你的session的Chrome插件~ 用户还可以给不同的session设置各种颜色，方便地标识session；SessionBox只对那些把网页的状态保存到session中的才有效果。顺便提供一下SessionBox的官网：https://sessionbox.io ；对于起那段同学来说，切换Sesssion几乎成了必不可少的一项工作，如果你使用了sessionbox，将会大大的减轻你的工作量，同时这个插件对于后端开发的RD同学也将是大大的帮助。
目前介绍了以上四款工具，建议题主可以尝试一下，都是非常不错的工具，虽然我现在不在是前端，但是对于除了webstorm之外的三款工具我都是经常会使用的；至于我为什么不使用webstorm是有原因的，因为我现在已经是作为一枚后端RD的存在，目前在公司开发机上只能用vim开发~~
前端开发常用又好用的几个软件
正所谓“工欲善其事必先利其器”，一名合格的Web前端开发工程师自然会用到不少能使其工作高效的工具。下面，就给大家分享Web前端学习需要了解的十款HTML5开发工具。
1、Lungo
Lungo是一款基于HTML5的开发框架，专为想要设计、构建和共享跨设备应用的开发者而准备。支持开放的Web标准，如HTML5、CSS3和JavaScript；支持手机、电视以及桌面设备。拥有强大的JavaScript API：开发WebAPP应用有很多种方式，而不是一味的优化。Lungo提供了一个强大的API，这样你可以完全掌控自己的WebAPP应用程序。
2、Animatron
Animatron是一款简单而又强大的在线工具，通过它，你可以创建出令人惊叹的的HTML5动画和互动内容。使用非常直观的Animatron编辑器去设计和发布完美的移动产品，同时也可以到处播放的电影和信息图表等，从桌面浏览器到移动设备，无需编码，所见即所得。
3、DCloudHBuilder
DCloudHBuilder：基于HTML5开发工具是当前最快的HTML开发工具，强大的代码助手帮你快速完成开发，最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛，DCloud 还提供云端打包服务，可以让开发者直接在云端生成 .ipa 或 .apk 安装包供部署调试。
4、mobl
mobl 是一个新的开源的编程语言，主要用于加速手机应用的开发，mobl 可方便构建手机 Web 应用程序，包括 iOS、Android 和其他支持 HTML5 技术的手机。Mobl使用一种与JavaScript非常类似的脚本语言实现了静态类型的推断语言。该语言拥有以下顶级结构： 实体（entities）、类型（types）、函数（functions）、控件（controls）、屏幕（screens）、样式（styles ）和设备（services）。实体是在本地存储中持久化的数据元素，而类型是一种供我们使用的不稳定的数据。函数与那些定义在JavaScript以及能够调用JavaScript代码的语言中的函数类似等。
5、Initializr
Initializr 是制作 HTML5 网站最好的入门辅助开发工具，你可以使用提供的特色模板快速生成网站，也可以自定义，Initializr 会为你生成代码简洁的可定制的网页模板。
6、WebStorm
WebStorm是一款强大的HTML5/JavaScriptWeb前端开发工具，被广大JS开发者誉为“Web前端开发神器”。
WebStorm 8全新特性中包括对AngularJS的支持，能够高效准确地智能感知Angular语法、指令。WebStorm还完美支持Spy-js，合并了这款JavaScript调试利器，大大提高了开发者们的工作效率。
7、Notepad++
Notepad++程序员必备的文本编辑器，软件小巧高效，支持27种编程语言，通吃C,C++ ,Java ,C#, XML, HTML, PHP,JS 等，推荐各位下载使用。Notepad++ 可完美地取代微软的记事本。
8、Dreamweaver
Dreamweaver 是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员，你可以无需编写任何代码就能快速创建Web页面。其成熟的代码编辑工具更适用于Web开发高级人员的创作！
9、Eclipse
Eclipse的本身只是一个框架平台，但是众多插件的支持使得Eclipse拥有其他功能相对固定的IDE软件很难具有的灵活性。许多软件开发商以Eclipse为框架开发自己的IDE。Eclipse最初是由IBM公司开发的替代商业软件Visual Age for Java的下一代ide开发环境，2001年11月贡献给开源社区，现在它由非营利软件供应商联盟Eclipse基金会（Eclipse Foundation）管理。
10、DevExtreme
DevExtreme是专为你的移动世界精心准备的，一个跨平台开发的HTML5/JS框架，可以构建iOS、Android、Tizen和Windows Phone 8应用程序，是Visual Studio开发人员开发跨平台移动产品的优选工具。
以上就是为大家分享的十款HTML5开发必备的工具，相信这些工具一定会让你帮你在从事Web前端开发过程中提高效率，打开一扇新的大门。