前端开发环境配置

本文主要介绍一下前端的一种开发环境配置，主要包括6个部分：运行环境node部分，代码编辑器vscode，浏览器Chrome，Vue工程，截图工具Snipaste，接口测试Apipost。

1. 运行环境node部分

Node.js是一个开源、跨平台的JavaScript运行时环境。Node.js可以在浏览器之外运行JavaScript，而Vue工程通常依赖webpack构建工具，这个工具依赖Node.js环境，所以运行Vue工程也需要Node.js环境。

window10可以支持的最低Node.js版本是Node.js 14，可以直接在官网nodejs.org进行下载安装，也可以使用nvm在多个Node.js版本之间切换。

有时候安装的node.js没有配置环境变量，会导致系统找不到node.js。可以用win+R打开运行对话框，输入sysdm.cpl，打开系统属性窗口，选择高级选型卡，点击环境变量，在系统变量的Path里添加Node.js的文件路径。

2. 代码编辑器vscode

VSCode是一款功能强大、易用且免费的开发工具。可以直接在官网code.visualstudio.com进行下载安装。下面是一些前端常用的设置和插件。

• 自动保存 auto save
• 自动换行 word wrap
• 格式化
• 插件Auto Close Tag 可以自动闭合HTML标签
• 插件Chinese 可以汉化软件
• 插件Code Runner 可以运行js代码
• 插件Dependency Cruiser Extension 可以检查文件的依赖关系
• 插件Image preview 可以看到引用图片的预览
• 插件JavaScript code snippets 包含js的代码片段
• 插件Live Sass Compile 可以实时编译SCSS为CSS
• 插件Live Server 可以启动一个本地开发服务器
• 插件npm Intellisense 可以自动完成导入语句中的npm模块
• 插件path Intellisense 可以自动完成文件名的一个插件
• 插件Prettier Code formatter 可以将代码格式化
• 插件px to rem 可以在px和rem之间进行转换
• 插件Vetur 一个为Vue2编写的插件
• 插件vscode-fileheader 可以插入标题注释
• 插件vscode-icons 一个图标插件

3. 浏览器Chrome

Chrome浏览器是一个性能和稳定性都很棒的浏览器。web开发需要使用浏览器来调试，可以自行百度下载。注意一些低版本的浏览器不支持web3D。

4. Vue工程

可以通过Vue Cli 或者 webpack构建工程来进行开发。

5. 截图工具Snipaste

Snipaste 是一个简单但强大的截图工具，也可以将截图贴回到屏幕上。可以在官网snipaste.com进行下载。注意该软件不支持window7系统。

6. 接口测试Apipost

Apipost是一个测接口的工具，可以在官网apipost.cn下载安装。