零基础小白自学web前端要用到哪些软件？下面这些可能帮到你

Chrome浏览器

下载地址： Google Chrome 网络浏览器

ChromeStandalone_52.0.2743.116_Setup，安装包解压后，双击自动下载，好用度一般般，下载，安装插件没问题

Firefox浏览器

下载地址：Firefox 火狐浏览器 - 全新、安全、快速

Photoshop

下载地址： 链接：https://http://pan.baidu.com/s/1MR4KNjKesLJ2GCA8C2ndgQ 提取码：j86a

有两个版本，一个轻简版，够用了，一个原版，有使用教程

Visual Studio Code

官网直接下载安装，无需破解

官网下载地址： Visual Studio Code - Code Editing. Redefined

安装插件

vetur

open in browser 鼠标右键打开浏览器 Alt + B 打开浏览器

Auto Close Tag　　 自动闭合HTML/XML标签

Auto Rename Tag　　自动完成另一侧标签的同步修改

Path Intellisense 自动路劲补全

JS-CSS-HTML Formatter　　 代码格式化

Bracket Pair Colorizer 颜色识别匹配括号

Code Runner 能够运行多种语言的代码片段 代码文件

HTML Snippets 代码自动填充

Webstorm

1.官网下载安装Webstorm WebStorm: The Smartest JavaScript IDE by JetBrains

最新版本的破解方式可能变了，可以直接下载2018版本

2.将补丁复制到安装目录的bin目录下

3.修改同目录下的 WebStorm.exe.vmoptions 和WebStorm64.exe.vmoptions，这两个文件一个是32位的，一个是64位的，同步修改。

4. 用文本编辑器打开之后，在文件最上面加一行代码 ：

-javaagent:你的WebStorm路径前缀/WebStorm/bin/破解补丁名字.jar

如 -javaagent:D:\Webstorm/WebStorm 2018.3.2/bin/JetbrainsIdesCrack-3.4-release-enc.jar

5.配置好之后，保存文件。在此再次启动WebStorm，选择activation code，并将-javaagent:你的WebStorm路径前缀/WebStorm/bin/破解补丁名字.jar

font:Consolas

Color Scheme: Darcula

File Encodings

IDE Encoding:utf-8 开发工具使用utf-8

Project Encoding:utf-8 当前项目使用utf-8

Languages -- javaScript

ECMAScript 6

自动换行

灰色区域--右键--Soft-Wrap-Current-File

安装node.js

1.官网下载安装包 https://http://nodejs.org/en/

或者下载指定版本v8.11.3版本

2.配置环境变量

安装位置加入到"path"中

用户变量: 新建NODE_PATH D:\nodejs\node_modules

新建文件夹node_global 和 node_cache

3.cmd

npm config set prefix "D:\nodejs\node_global"

npm config set cache "D:\nodejs\node_cache"

4.node_global添加环境变量

安装cnpm

默认使用使用淘宝镜像的方法

npm config set registry http://http://registry.npm.taobao.org

npm升级只能去官网覆盖升级

使用cnpm

npm install -g cnpm -registry=https://http://registry.npm.taobao.org

DevTool

DevTool调试vue应用

安装

1）chrome商店直接安装

You Need FQ

2）手动安装

1）找到vue-devtools的github项目，并将其clone到本地

git clone vuejs/devtools

2）安装项目所需要的npm包

cnpm install

3）编译项目文件

npm run build

4）添加至chrome浏览器

浏览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序...”按钮，选择vue-devtools>shells下的chrome文件夹