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

---

媒介

在当今快速发展的互联网期间，前端开辟已经成为一项备受关注和需求不停增长的技能工作。作为一名前端工程师，拥有一台设置精良的电脑是提高工作服从温顺遂举行项目开辟的关键。在本文中，我们将向各人先容如何从零开始设置一台新的电脑，以便可以或许顺遂地搭建和运行Vue项目。我们将渐渐引导读者完成整个设置过程，包罗安装须要的软件和工具，设置开辟环境，以及创建和运行Vue项目。

---

一、VSCode（Visual Studio Code）

1.1 VSCode先容与安装

• VSCode是一款由微软开辟的免费开源的代码编辑器。它具有丰富的功能和插件生态系统，可以满意前端开辟的各种需求。VSCode支持多种编程语言，提供了代码补全、语法高亮、调试等功能，让开辟者可以更高效地编写和调试代码。别的，VSCode还支持自界说设置和快捷键，以及集成终端和Git等工具，方便开辟者举行项目管理和团队协作。
  
• VSCode 的安装
  Visual Studio Code在官网下载好安装包，一路无脑确定（安装路径必要本身更改）
  

1.2 VSCode 常用插件安装

插件名作用Auto Rename Tag主动重定名标签，当你修改一个 HTML 或 XML 标签的开始或竣事标签时，它会主动更新对应的标签ENV将 env 文件 （.env） 的格式和语法高亮显示ESLint用于在编辑器中实时查抄和修复 JavaScript 代码中的语法和风格错误的插件Git Graph提供一个可视化的 Git 提交汗青图形界面，以便更好地检察和明白项目标版本控制汗青GitLens提供了丰富的 Git 功能，如解释、作者、时间线等JavaScript (ES6) code snippets为 JavaScript 开辟职员提供了一组代码片断，可以快速天生常用的代码模板Live Server在本地开辟环境中提供一个实时预览服务器，用于在欣赏器中实时检察和调试One Dark ProVS Code 主题插件，提供了一套美丽的暗色主题open in browser在欣赏器中打开当前文件的快捷方式 （Alt + B）Prettier - Code formatter格式化代码的插件，支持多种编程语言，并提供了一些格式化选项和设置vscode-icons为 VS Code 的文件资源管理器添加了美丽的文件图标，以增强可视化结果和易用性Vetur实用于vue2项目，语法高亮、代码补全、代码格式化、语法查抄Vue Language Features (Volar)实用于vue3项目，语法高亮、代码补全、代码格式化、语法查抄   两个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的安装，无需手动安装）
  

1. node -v

复制代码

1. npm -v

复制代码

   能显示出书本号就安装完毕啦！
  2. yarn的安装

在控制台实验命令

1. npm install --global yarn

复制代码

验证是否安装乐成

1. yarn --version

复制代码

三、Webpcak

3.1 Webpcak的先容与安装

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

1. 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
  

1. npm install -g @vue/cli

复制代码

这里留意如果你是用yarn安装的脚手架，必要本身设置环境
可以使用vue -V查验是否安装乐成
全局安装@vue/cli脚手架的环境设置
五、初始化Vue项目并运行

新建一个文件夹，在控制台输入

1. vue create vue2_test

复制代码

选择vue2或者vue3的默认模板安装 (回车键)
安装好后，实验

1. cd vue2_test

复制代码

1. npm run serve

复制代码

就乐成跑起一个vue2的初始化项目了

打开网址：

六、前端工程师必备软件

6.1 Git

• 版本控制：Git 是一个分布式版本控制系统，用于管理代码的版本和变更汗青。它可以帮助开辟团队协作、追踪代码的修改、归并分支等。
  
• 分支管理：Git 答应创建和管理多个分支，方便并行开辟和特性隔离。
  
• 团队协作：Git 提供了团队协作的功能，开辟职员可以通过 Git 举行代码的共享、归并和冲突办理。
  
• 版本回退：Git 答应根据必要回溯到特定的代码版本，方便举行代码的回退和规复。
  git官网下载地址
  安装完成后还必要设置ssh公钥 将ssh文件夹中的公钥（ id_rsa.pub）添加到GitHub管理平台中
  

6.2 Snipaste

• 屏幕截图：Snipaste 是一款强盛的屏幕截图工具，可以快速捕获屏幕上的恣意地域，并举行标注、编辑和生存。
  
• 粘贴板管理：Snipaste 提供了粘贴板管理功能，可以方便地管理剪贴板中的汗青内容，快速粘贴和复制。
  Snipaste下载地址
  

6.3 Pxcook

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

七、VUE开辟者工具

参考此文：Vue3 简介
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项目开辟工作。

来源：https://blog.csdn.net/m0_57524265/article/details/132052881
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！