2024年做前端需要会什么软件 篇1
如果您是想开发跨平台应用程序而找到本指南的，则您可能知道Electron.js就是这样做的。您可以使用相同的代码轻松开发和分发适用于Windows / macOS / linux的应用程序（请记住，其中不包括android 或 iOS）。
那这样问题就变成：“Electron如何做到这一点？”。简而言之，Electron启动浏览器，该浏览器可以通过Electron自己的API 访问
Node.js API。有很多用例，但最大的可能是理论上您的应用程序无需互联网即可运行。
如果听起来像是一团糟，那没关系，但重要的是要了解Electron将浏览器和
Node.js结合在一起，为我们创造了这种无缝的开发体验。第1部分：您的第一个Electron应用程序
步骤0.导航到您的项目文件夹
您可以在计算机上的任何位置创建一个新文件夹，并运行命令npm init并按照提供的提示进行操作
步骤1. NPM需要运行它npm install electron --save-dev* NOTE *（--save-dev而不是我们使用）
来安装Electron ，--save以便将来您可以在具有多个electronic版本的多个应用程序上工作。
步骤2.创建两个名为index.js和的新文件index.html
步骤3.在内部index.js输入以下代码：const { app, BrowserWindow } = require("electron");function createWindow() { // Create the browser window. let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true}}); // and load the index.html of the app. win.loadFile("index.html");}app.on("ready", createWindow);
在此文件中，我们从先前安装的Electron包中导入app和BrowserWindow模块。当Electron应用程序准备就绪时，我们将BrowserWindow使用提供的属性创建一个新index.html文件并加载到我们的文件中。
步骤4.将一些内容放入
index.html文件中
它可以是任何您想要的东西，但是，我喜欢<h1>Hello World</h1>为了旧时使用。
步骤5.运行您的应用程序
运行Electron应用程序有两个过程。首先，您可能希望node index.js像使用任何节点应用程序一样通过运行应用程序。
不幸的是，这行不通。您需要通过Electron的二进制文件运行Javascript，该文件通常包含在Node_Modules文件夹中。如果您查看了Electron的文档，您可能会认为可以通过来运行您的应用程序electron .。这很接近，但是除非您进行一些其他设置来配置环境变量并进行全局Electron安装，否则它将无法工作。这超出了本指南的范围。
相反，我们将通过打开package.json文件（该文件是在我们npm init之前执行时创建的）并添加一个带有属性的新启动脚本来制作npm脚本electron。您的package.json应该类似于以下内容：
最后，您可以通过npm start在终端中输入来运行您的应用程序。如果您使用的是Mac，您应该会看到一个类似于以下的窗口：
第2部分：您实际的第一个Electron应用程序
好的，您好，您好！我们尝试使用Electron提供的一些实际功能进行练习。不要扔掉Hello World应用程序，因为我们将在此基础上进行构建。
步骤0.添加一些样式
Electron最大的吸引之一是，您可以像编写html / css一样轻松地创建惊人的自定义GUI，这比Qt和其他本机应用程序要容易得多。
创建一个名为的css文件，styles.css并将其包含在项目的根目录中，然后在index.html文件中添加适当的引用：<link rel =“ stylesheet” type =“ text / css” href =“ ./ styles.css” />
重新运行角度项目时，将显示对样式所做的任何更改npm start。
我个人喜欢在这些演示中使用skeleton.css，因为它是轻量级的，我们不需要太多（而且我懒得有时候写css）。重要的是要记住，如果您希望您的应用在离线状态下看起来一样，则不能在HTML中包含CDN脚本。您需要下载css文件并在本地引用它。
本指南假定您知道如何编写html和css，因此我不会再赘述，您可以从我在底部链接的github上窃取它。无论如何，我的Electron应用现在看起来像这样：
步骤1.打包您的应用
您可能现在知道，您不能只将潜在的项目交给您的潜在用户，并希望他们弄清楚如何自己运行所有内容。他们可能没有安装节点，为什么要这样做？
我们需要做的是将应用程序编译为二进制文件，最终用户只需双击并执行即可。为此，请在终端中键入以下内容来安装Electron Package：npm install electron-packager --save-dev
然后将以下行添加到package.json脚本中"package": "electron-packager .",
最后，通过在终端中键入以下命令来执行打包程序：npm run package
您应该在项目目录中看到一个与当前系统匹配的新文件夹。该文件夹中包含一个应用程序（如果使用Windows，则为.exe）。结论
本指南应该使您对Electron的工作原理有基本的了解。如果您在遵循本指南时遇到困难，建议您在进入Electron之前花更多的时间学习Node.js。
2024年做前端需要会什么软件 篇2
Web前端入行门槛低、薪资待遇高、市场需求大，是很多人进入IT行业的首选语言。工欲善其身必先利器，作为初学前端行业的小白，如果知道一些好用的软件工具可以帮助他们更好的工作。下面，分享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、VisualStudio
CodeVisualStudioCode是一个运行于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字体放到自己的项目中。主要特性如下：缩小字形集合，减小字体大小;合并一些字体标记到单个文件中;访问大量专业级的开源图标。
想要成为优秀的Web前端开发工程师，除了好用的工具，项目实战经验也必不可少。其实精通Web前端开发并非易事。我们需要具备多种能力，并根据具体情况施展这些能力这有些难度，但并不是不可能。Web前端开发是一项需要花很多时间才能掌握的技能。
2024年做前端需要会什么软件 篇3
前端开发有很多方向，核心包括以下内容：JavaScript编程语言本身，需要多阅读一些书籍来深化了解以及JavaScript在浏览器里的各种API，这个可以多翻阅MDN文档；工程化：可以通过一些脚手架以及开发一些脚手架来提升开发效率；可以通过对功能的拆分实现模块化与组件化，降低分组开发的难度；可以通过工具链规划、测试、部署代码，实现自动化；模块化、组件化、规范化、自动化，这就是工程化；Vue或React框架，学会其一即可，这两个框架都有自己的生态，路由、状态管理、UI、服务端渲染；计算机科学知识：Linux、计算机网络、数据库、简单的数据结构和算法、云服务等；补充项：工作的时候再学没有关系，前端的跨端实现、typescript等
为啥你提了这么多，没有说UI的Web实现，什么布局、样式、动画、切图、实现一个商城...这是基础，不是核心，你可以用UI框架来做，前端开发可以先不必深究。
前端开发最必不可少也是最经常会使用到的（软件和网站）：VS Code，支持前端开发各种文件格式以及自带emmet语法、代码提示、自动补全、格式化文档，以及拥有强大的调试功能，适配所有（应该是所有）前端必备工具链；Node.js以及前端工具链，前端开发离不开强大而Node生态，无论是git、webpack、lodash、gulp等，还是Vue、React框架，亦或是vuepress、gatsby等开源项目，这些都是前端开发需要掌握的；Chrome浏览器，前端开发离不开Chrome的开发者工具，从了解DOM、终端适配、JavaScript调试、页面加载到性能优化等；MDN文档，MDN文档是前端开发人员最经常翻阅的JavaScript技术文档，一定要长期翻阅