如何从零开始配置前端环境以及安装必备的软件插件

如何从零开始配置前端环境以及安装必备的软件插件

引用

CSDN

1.

https://blog.csdn.net/m0_74824661/article/details/144422267

本文将指导你从零开始配置前端开发环境，包括安装必要的软件和工具，配置开发环境，以及创建和运行Vue项目。

前言

在当今快速发展的互联网时代，前端开发已经成为一项备受关注和需求不断增长的技术工作。作为一名前端工程师，拥有一台配置良好的电脑是提高工作效率和顺利进行项目开发的关键。在本文中，我们将向大家介绍如何从零开始配置一台新的电脑，以便能够顺利地搭建和运行Vue项目。我们将逐步引导读者完成整个配置过程，包括安装必要的软件和工具，配置开发环境，以及创建和运行Vue项目。

一、VSCode（Visual Studio Code）

1.1 VSCode介绍与安装

VSCode是一款由微软开发的免费开源的代码编辑器。它具有丰富的功能和插件生态系统，可以满足前端开发的各种需求。VSCode支持多种编程语言，提供了代码补全、语法高亮、调试等功能，让开发者可以更高效地编写和调试代码。此外，VSCode还支持自定义配置和快捷键，以及集成终端和Git等工具，方便开发者进行项目管理和团队协作。

VSCode的安装

1. 访问Visual Studio Code官网下载安装包
2. 运行安装包，按照提示完成安装（注意更改默认安装路径）

1.2 VSCode常用插件安装

插件如何安装

1. 点击扩展图标（Ctrl + shift + x）
2. 搜索对应的插件名称
3. 安装插件

1.3 VSCode代码格式化

代码格式化的效果受到所使用的插件、语言扩展和格式化配置的影响。因此，可以根据自己的需求选择适合的插件和配置来实现代码格式化。当你安装了Prettier插件后，可以通过以下设置实现保存代码时自动格式化：

1. 打开设置
2. 勾选相关按钮
3. 使用快捷键shift + Alt + F格式化代码

二、Node.js

2.1 Node的介绍与安装

Node.js是一个基于Chrome V8引擎的JavaScript运行时。它允许开发者使用JavaScript在服务器端运行代码，而不仅仅局限于浏览器环境。Node.js提供了丰富的内置模块和包管理器npm，使开发者能够轻松地构建和管理应用程序。Node.js在前端开发中广泛应用于构建工具、服务器端渲染、API开发等方面，为前端工程师提供了更多的技术选择和灵活性。

Node的安装

1. 访问Node.js中文网官网
2. 选择长期支持版本进行安装（避免安装最新版本，因为最新版本可能不够稳定）
3. 安装过程很简单，除了需要选择安装路径外，其他选项保持默认即可
4. 安装完成后无需额外配置环境变量

在控制台检验Node和npm是否安装完成：

node -v
npm -v

如果能显示出版本号，则表示安装成功。

2.2 yarn的安装

在控制台执行以下命令来安装yarn：

npm install --global yarn

验证是否安装成功：

yarn --version

三、Webpack

3.1 Webpack的介绍与安装

Webpack是一个模块打包工具，它可以将多个前端资源（如JavaScript、CSS、图片等）打包成一个或多个静态文件。Webpack通过模块化的方式管理项目中的各个模块，并根据配置文件进行打包和优化。它提供了丰富的插件和加载器，可以处理各种类型的文件，实现代码分割、压缩、懒加载等功能。Webpack还支持热模块替换（HMR），可以在开发过程中实时预览修改的效果。通过使用Webpack，前端工程师可以更好地组织和管理项目代码，提高开发效率和性能。

全局安装Webpack

npm install webpack -g

四、Vue CLI

4.1 Vue CLI的安装与介绍

Vue CLI是一个用于快速构建Vue.js项目的脚手架工具。它提供了一套完整的项目开发工具链，包括项目初始化、开发服务器、打包构建等功能。Vue CLI基于Webpack，并集成了Vue.js相关的插件和配置，使得前端工程师可以快速搭建和开发Vue项目。Vue CLI还提供了丰富的插件和模板，可以根据项目需求进行定制化配置。通过使用Vue CLI，前端工程师可以快速启动项目，统一项目结构和开发规范，并享受到Vue.js的开发优势。

全局安装Vue CLI

npm install -g @vue/cli

注意：如果你是用yarn安装的脚手架，需要自己配置环境。可以使用vue -V检验是否安装成功。

五、初始化Vue项目并运行

1. 新建一个文件夹
2. 在控制台输入以下命令：

vue create vue2_test

选择Vue2或Vue3的默认模板安装（按回车键）

3. 安装完成后，执行以下命令：

cd vue2_test
npm run serve

这样就成功运行了一个Vue2的初始化项目了。你可以通过浏览器访问默认的开发服务器地址（通常是http://localhost:8080）来查看项目。

六、前端工程师必备软件

6.1 Git

• 版本控制：Git是一个分布式版本控制系统，用于管理代码的版本和变更历史。它可以帮助开发团队协作、追踪代码的修改、合并分支等。
• 分支管理：Git允许创建和管理多个分支，方便并行开发和特性隔离。
• 团队协作：Git提供了团队协作的功能，开发人员可以通过Git进行代码的共享、合并和冲突解决。
• 版本回退：Git允许根据需要回溯到特定的代码版本，方便进行代码的回退和恢复。

Git安装

1. 访问Git官网下载地址
2. 安装完成后需要配置SSH公钥
3. 将SSH文件夹中的公钥（id_rsa.pub）添加到GitHub管理平台中

6.2 Snipaste

• 屏幕截图：Snipaste是一款强大的屏幕截图工具，可以快速捕捉屏幕上的任意区域，并进行标注、编辑和保存。
• 粘贴板管理：Snipaste提供了粘贴板管理功能，可以方便地管理剪贴板中的历史内容，快速粘贴和复制。

Snipaste下载地址

6.3 Pxcook

• 设计稿标注：Pxcook是一款设计稿标注工具，用于将设计师的设计稿转化为前端开发所需的标注信息，包括尺寸、颜色、字体等。
• 导出资源：Pxcook可以将设计稿中的图片、图标等导出为前端开发所需的资源文件，方便开发人员使用。

Pxcook下载地址

七、Vue开发者工具

Vue开发者工具（Vue Devtools）是一款用于辅助Vue.js应用开发的浏览器插件。它的主要作用是帮助开发者在浏览器中调试和分析Vue.js应用，提供了一系列强大的开发工具和功能，包括：

• 组件层级查看：Vue Devtools可以展示当前页面中的Vue组件层级结构，方便开发者快速了解组件的嵌套关系和层级结构。
• 组件状态查看和修改：开发者可以查看每个组件的状态数据，包括props、data、computed等，并且可以实时修改这些数据，以便测试和调试。
• 事件追踪和调试：Vue Devtools可以显示组件的事件监听器，包括绑定的事件和触发的事件。开发者可以追踪事件的触发和处理过程，方便调试和分析问题。
• 性能监控和分析：Vue Devtools提供了性能监控和分析工具，可以查看组件的渲染性能、内存占用等指标，帮助开发者优化应用的性能。
• Vuex状态管理工具：Vue Devtools集成了Vuex的状态管理工具，可以查看和修改应用的状态树，方便调试和测试Vuex相关功能。
• 时间旅行调试：Vue Devtools支持时间旅行调试，可以回溯和查看组件的状态和数据在不同时间点的变化，方便调试复杂的数据流和状态管理。

总之，Vue Devtools是一款非常实用的开发工具，可以大大提升Vue.js应用的开发效率和调试能力，帮助开发者更好地理解和调试Vue组件、状态和事件。

总结

通过本文的指导，你已经学会了从零开始配置一台新的电脑，并顺利地搭建和运行Vue项目。首先，安装必要的软件和工具。然后，通过Vue CLI创建一个新的Vue项目，并启动开发服务器。最后，根据个人喜好配置编辑器和插件，以提高开发效率。希望本文能够帮助你顺利地配置新电脑，并开展愉快的Vue项目开发工作。