前言

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

一、VSCode（Visual Studio Code）

1.1 VSCode介绍与安装

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

VSCode 的安装

Visual Studio Code在官网下载好安装包，一路无脑确定（安装路径需要自己更改）

1.2 VSCode 常用插件安装

两个vue项目的插件。启用了一者，另外一者一定要禁用，避免冲突
插件如何安装 ⇒ 点击扩展图标（Ctrl + shift + x） ⇒ 搜索对应的插件名称 ⇒ 安装

1.3 VSCode代码格式化

代码格式化的效果受到所使用的插件、语言扩展和格式化配置的影响。因此，可以根据自己的需求选择适合的插件和配置来实现代码格式化

当你安装了prettier插件后，可以通过这些设置实现Ctrl + S 的方法实现保存代码时自动格式化

首先打开设置

勾选两个按钮

也可以选择 shift + Alt + F的方式格式化代码

二、Node.js

2.1 Node的介绍与安装

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

Node的安装

Node.js 中文网，进官网后选择长期支持版本安装，太新的版本不稳定

安装十分简单，除了自己选择安装路径外，其他的一路无脑下一步

安装完以后不用配置任何的环境

在控制台里检验一下node和npm是否安装完成（node安装时自带了npm的安装，无需手动安装）

node -v

npm -v

能显示出版本号就安装完毕啦！

2. yarn的安装

在控制台执行命令

csharp 复制代码

npm install --global yarn

验证是否安装成功

css 复制代码

yarn --version

三、Webpcak

3.1 Webpcak的介绍与安装

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

全局安装webpck

js 复制代码

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