web前端开发软件安装 web前端开发需要哪些工具？

大家平时对前端开发都十分关注，今天为大家整理了web前端开发软件安装 web前端开发需要哪些工具？，下面就随我爱编程网小编一起来看一下吧。

web前端开发需要哪些工具？

Web前端是一个新兴职业，市场需求大，薪资待遇高，吸引了很多人加入学习。无论是初学小白亦或是自身前端开发人员，好用的软件工具可以帮助他们更好的工作。今天千锋武汉给大家分享一下Web前端开发用什么软件。

1、Sublime Text

Sublime Text是一个代码编辑器也是HTML和散文先进的文本编辑器。漂亮的用户界面和非凡的功能，例如迷你地图，多选择，Python的插件，代码段，等等。完全可自定义键绑定，菜单和工具栏。Sublime Text的主要功能包括：拼写检查，书签，完整的Python API，Goto功能，即时项目切换，多选择，多窗口等等。 我爱编程网

2、Dreamweaver

Adobe Dreamweaver使用所见即所得的接口，亦有HTML(标准通用标记语言下的一个应用)编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。 访问代码提示，即可快速了解 HTML、CSS 和其他Web 标准。使用视觉辅助功能减少错误并提高网站开发速度。

3、Visual Studio Code

Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器，软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增PHP语法高亮。

4、HBuilder

HBuilder是专为前端打造的开发工具，具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。从开放注册以来深受广大前端朋友们的喜爱。

5、WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

想知道“Web前端开发用什么软件”，通过网上搜索你可以发现很多，而能否很好的借助这些软件完成项目，关键还要看你的技术。千锋武汉网站上有以上这些工具的安装包，需要的小伙伴自己去下载吧。

【Web前端基础】webpack全局安装失败怎么办？

WebPack的安装，采用的是命令行npm形式的安装。
d://切到d盘
mkdir webpack_demo//在d盘下新建webpack_demo文件夹
cd webpack_demo//进入该文件夹下
npm install -g webpack //全局安装webpack
（备注如果这样安装会出现提示安装webpack-cli；这是4.x的提示，如果不想安装webpack-cli需重新安装低版本webpack）
npm uninstall -g webpack //先卸载之前安装的webpack
npm install -g webpack@3.6.0 //安装低版本webpack
全局安装完成后，我们还要进行一个项目目录的安装。在用npm安装前，我们先要进行一下初始化，
初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，
包括当前项目的依赖模块，自定义的脚本任务等等，如果你对此文件还不了解，可以看看node 的相关知识）。
npm init//初始化项目，可以一路回车生成的package.json文件
npm install --save-dev webpack@3.6.0 //官方不太支持全局安装，会锁定版本，因此对项目目录安装
安装完成后可以查看版本号 webpack -v
安装完成后新建webpack.config.js配置文件基本配置
const path = require(‘path’);

const uglify = require(‘uglifyjs-webpack-plugin’);//代码压缩
module.exports={
//入口文件的配置项

entry:{

entry:'./src/entry.js',

//这里我们又引入了一个入口文件

entry2:'./src/entry2.js'

},

//出口文件的配置项

output:{

//输出的路径，用了Node语法

path:path.resolve(__dirname,'dist'),

//输出的文件名称

filename:'[name].js'

},

//模块：例如解读CSS,图片如何转换，压缩

module:{

rules: [

{

test: /\.css$/,

use: [ 'style-loader', 'css-loader' ]//处理样式的loader

}

]

},

//插件，用于生产模版和各项功能

plugins:[

new uglify()//代码压缩

],

//配置webpack开发服务功能

devServer:{

//设置基本目录结构

contentBase:path.resolve(__dirname,'dist'),

//服务器的IP地址，可以使用IP也可以使用localhost

host:'localhost',

//服务端压缩是否开启

compress:true,

//配置服务端口号,可自定义

port:1717

}

}
（备注：安装webpack-dev-server时安装完后，运行报不是内部指令，需要在package.json中配置下）
“scripts”: {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"start": "npm run dev",

"build": "node build/build.js"12345

},
如果还是报不是内部指令，则重新安装低版本 npm i webpack-dev-server@2.9.1
npm install --save-dev webpack

前端开发常用哪些工具软件？

前端开发 的编译器在选择上还是很多的。在学校里，老师主要讲三个前端 开发软件 ：

1、WebStorm

帮助编写HTML、CSS、Less、Sass和Stylus代码，并且支持Node.js和主流框架，如React、Angular、 Vue.js 、Meteor等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。但是付费软件。

2、IntelliJ idea

idea是学校老师教得最多的一款软件，从学Java开始，除了eclipse和myeclipse之外，学校老师用的最广泛的Java编译器就是idea，而idea也能进行前端项目的开发，idea是我用得最熟的一个编译软件。像一个完整的前端网站，配置好jdk，tomcat，maven，数据库之后就可以在idea上进行搭建了。

3.Visual Studio Code

简称VScode，前端开发时期学习的第一款软件，当时学VScode的时候上的网课，老师用插件的时候一个没跟上，就跟不上了。总体感觉下来是插件库很丰富，而且内存占用不大，目前我身边用VScode的人是最多的。

下面是我在实习中接触到的前端开发工具：

1. notepad++
   

页面很简单，乍一看像是一个记事本，它也确实可以当记事本用。有很多特色插件可以使用，支持多种 编程语言 的语法高亮显示，具有代码折叠功能。

2、HBuilderX

HBuilderX是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。是HBuilder下一代版本，具有轻便、适合vue框架的特点。

以上就是今天分享给大家的内容了，想要了解更多前端开发资讯，敬请关注我爱编程网！