如何从零开始配置前端情况以及安装必备的软件插件
文章目次[*]前言
[*]一、VSCode（Visual Studio Code）
[*]
[*]1.1 VSCode先容与安装
[*]1.2 VSCode 常用插件安装
[*]1.3 VSCode代码格式化
[*]二、Node.js
[*]
[*]2.1 Node的先容与安装
[*]2. yarn的安装
[*]三、Webpack
[*]
[*]3.1 Webpack的先容与安装
[*]四、Vue CLI
[*]
[*]4.1 Vue CLI的安装与先容
[*]五、初始化Vue项目并运行
[*]六、前端工程师必备软件
[*]
[*]6.1 Git
[*]6.2 Snipaste
[*]6.3 Pxcook
[*]七、VUE开辟者工具
[*]总结
前言
在当今快速发展的互联网时代，前端开辟已经成为一项备受关注和需求不绝增长的技术工作。作为一名前端工程师，拥有一台配置精良的电脑是提高工作效率暖和利进行项目开辟的关键。在本文中，我们将向各人先容如何从零开始配置一台新的电脑，以便能够顺遂地搭建和运行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 Pro
VS Code 主题插件，提供了一套美丽的暗色主题
open in browser
在浏览器中打开当前文件的快捷方式 （Alt + B）
Prettier - Code formatter
格式化代码的插件，支持多种编程语言，并提供了一些格式化选项和配置
vscode-icons
为 VS Code 的文件资源管理器添加了美丽的文件图标，以加强可视化结果和易用性
Vetur
适用于vue2项目，语法高亮、代码补全、代码格式化、语法检查
EditorConfig for VS Code
EditorConfig 通过定义一个名为 .editorconfig 的配置文件，来指定项目中的代码风格设置。这个文件通常放在项目的根目次下，包罗一系列键值对，用于定义各种代码风格规则，如缩进、行尾符、字符集等。
两个vue项目的插件。启用了一者，另外一者肯定要禁用，制止辩论
插件如何安装 点击扩展图标（Ctrl + shift + x） 搜刮对应的插件名称 安装
1.3 VSCode代码格式化
代码格式化的结果受到所使用的插件、语言扩展和格式化配置的影响。因此，可以根据本身的需求选择适合的插件和配置来实当代码格式化
当你安装了prettier插件后，可以通过这些设置实现Ctrl + S 的方法实现保存代码时自动格式化
首先打开设置
https://i-blog.csdnimg.cn/blog_migrate/47bf5e2b09985982273704c8c24a59f8.png
勾选两个按钮
https://i-blog.csdnimg.cn/blog_migrate/408a770346cfe3de220c306c5f51c447.png
也可以选择 shift + Alt + F的方式格式化代码
二、Node.js
2.1 Node的先容与安装
[*] Node.js是一个基于Chrome V8引擎的JavaScript运行时。它允许开辟者使用JavaScript在服务器端运行代码，而不仅仅局限于浏览器情况。Node.js提供了丰富的内置模块和包管理器npm，使开辟者能够轻松地构建和管理应用程序。Node.js在前端开辟中广泛应用于构建工具、服务器端渲染、API开辟等方面，为前端工程师提供了更多的技术选择和灵活性。
[*] Node的安装
Node.js 中文网 ，进官网后选择长期支持版本安装，太新的版本不稳定
安装十分简单，除了本身选择安装路径外，其他的一路无脑下一步
安装完以后不用配置任何的情况
https://i-blog.csdnimg.cn/blog_migrate/87842562ee0ae0f3f9bdd2c08a49c2dd.png
在控制台里查验一下node和npm是否安装完成（node安装时自带了npm的安装，无需手动安装）
node -v
npm -v
https://i-blog.csdnimg.cn/blog_migrate/fb62894df9e1bee38803abede8d242a7.png
能体现出版本号就安装完毕啦！
2. yarn的安装
在控制台实验下令
npm install --global yarn
验证是否安装乐成
yarn --version
https://i-blog.csdnimg.cn/blog_migrate/4819d6208c7ff379870e5f4cc302610a.png
三、Webpack
3.1 Webpack的先容与安装
[*] Webpack： Webpack是一个模块打包工具，它可以将多个前端资源（如JavaScript、CSS、图片等）打包成一个或多个静态文件。Webpack通过模块化的方式管理项目中的各个模块，并根据配置文件进行打包和优化。它提供了丰富的插件和加载器，可以处置惩罚各种类型的文件，实当代码分割、压缩、懒加载等功能。Webpack还支持热模块更换（HMR），可以在开辟过程中实时预览修改的结果。通过使用Webpack，前端工程师可以更好地构造和管理项目代码，提高开辟效率和性能。
[*] 全局安装webpack
npm install webpack -g
https://i-blog.csdnimg.cn/blog_migrate/55053275d846319a603408a9a17012e8.png
四、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
https://i-blog.csdnimg.cn/blog_migrate/02d9dabe047184999077474e1e02575d.png
这里注意如果你是用yarn安装的脚手架，需要本身配置情况
可以使用vue -V查验是否安装乐成
全局安装@vue/cli脚手架的情况配置
五、初始化Vue项目并运行
新建一个文件夹，在控制台输入
vue create vue2_test
选择vue2或者vue3的默认模板安装 (回车键)
安装好后，实验
cd vue2_test
npm run serve
https://i-blog.csdnimg.cn/blog_migrate/d4307a1617957c114353648d353630d3.png
就乐成跑起一个vue2的初始化项目了
https://i-blog.csdnimg.cn/blog_migrate/fe8731e791ce2c431cb52532eabe8747.png
打开网址：
https://i-blog.csdnimg.cn/blog_migrate/4c155c8c3f6290a9431820aae708cb0c.png
六、前端工程师必备软件
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 组件、状态和变乱。
https://i-blog.csdnimg.cn/blog_migrate/bc9c606d87fe27fb380cd0a1e479f525.png
总结
通过本文的引导，你已经学会了从零开始配置一台新的电脑，并顺遂地搭建和运行Vue项目。首先，安装须要的软件和工具。然后，通过Vue CLI创建一个新的Vue项目，并启动开辟服务器。末了，根据个人喜好配置编辑器和插件，以提高开辟效率。渴望本文能够帮助你顺遂地配置新电脑，并开展愉快的Vue项目开辟工作。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]