Vue 60 ，前端设置开发环境，新电脑设置前端开发环境，Vue开发环境设置的具体过程（前端开发环境设置，电脑重置后设置前端开发环境）

媒介

无论是为新电脑设置前端开发环境，还是在电脑重置后重新设置，精确安装须要的软件和插件都是开始编码前的告急步调。具体都必要安装什么软件和插件，这里来分享一下，文章得当新手和小白，大佬可以直接滑走。



一. 设置必要

设置前端开发环境，必要用到的软件和插件，请看
   

• Chrome
  
• Visual Studio Code（vscode） 
  
• Node.js（npm / cnpm）
  
• Vue CLI （vue-cli / vue/cli）
  
• Git
  

---

二. Chrome

安装Chrome（谷歌欣赏器），请看
           Google Chrome步调员必备，它是一款由谷歌公司开发的网页欣赏器，于2008年初次发布。它被广泛以为是速率快、安全性高、功能强盛的欣赏器之一。Chrome支持多种操纵体系，包罗Windows、MacOS和Linux。它具有简便的界面、快速的页面加载速率、强盛的扩展步调生态体系和内置的安全功能。Chrome还集成了Google的搜索引擎，使用户可以更便捷地举行搜索，得当个人用户和企业用户使用。
  

安装所在

Chrome 欣赏器安装所在，请看
Chrome官网

https://www.google.cn/chrome/
这里不外多先容，直接安装使用就行，也可以直接在应用市肆举行下载。

---

三. Visual Studio Code

安装Visual Studio Code（简称vscode），请看
           Visual Studio Code是一款轻量级、功能强盛的源代码编辑器，可在Windows、macOS、Linux以致欣赏器上使用。它内置了对JavaScript、TypeScript和Node.js的支持，并为其他语言和运行时提供了丰富的扩展生态体系。
  

1. 官方网址

Vscode官方网址，请看
Visual Studio Code官网

https://code.visualstudio.com/
2. 选择下载

下载时，选择好与自己匹配的体系版本，一样平常的64位windosws用户，点击下载这个，请看

下载完成以后，直接点击安装，点击选择担当协议，点击下一步安装就好。

---

四. Node.js

安装Node.js，请看
           起首，npm 是 nodejs 中的一部分，通常与 nodejs 一起安装和更新。当你安装了 nodejs，npm 也随之安装。npm全称是Node Package Manager，它是 nodejs的官方包管理工具，用来管理和分发 JS库和其他相干资源的体系，npm 可以安装、共享和管理项目标依靠关系，可通过 `npm -v` 下令可以查抄其版本信息。
  

1. 官方网址

Node.js 官网所在，请看
Node.js官网

https://nodejs.org/en
2. 汗青版本

Node.js 汗青版本，请看
Node.js汗青版本

https://nodejs.org/dist/
3. 中文网址

Node.js 中文网址，请看
Node.js中文网

http://nodejs.p2hp.com/
4. 安装设置

如需，安装步调 和 设置nodejs的环境变量，请看
Node.js安装步调以及环境变量的设置

5. 安装检测

   安装完成后，可以使用node -v和npm -v来检测是否安装乐成，注意这里的-v是小写字母。可以在下令提示符窗口 大概 vscode中都可以检测是否安装乐成。那么，如安在下令提示符窗口检测安装效果？请看
  ① 直接在键盘按下win + r 键，弹出输入框，输入cmd，请看

② 再按回车键，下令提示符窗口启动，然后直接输入 node -v 和 npm -v 下令，检测安装效果，请看

node版本号v16.17.1，npm版本号8.15.0，可以看到检测安装乐成。
6. 镜像使用

   这里保举设置安装下npm镜像cnpm，cnpm是一个为中国用户量身打造的Node.js包管理工具，它通过提供国内的镜像服务器来加快Node.js包的下载和安装，为Node.js开发者带来了更加流通和高效的开发体验。想要使用cnpm，必要先行设置下载cnpm，cnpm的下载下令如下，请看

1. //cnpm 安装使用新的镜像源
2. npm install -g cnpm --registry=https://registry.npmmirror.com/
4. 旧的域名
5. http://npm.taobao.org 和
6. http://registry.npm.taobao.org 已经在 2022 年 5 月 31 日停止服务

复制代码

7. 安装报错

使用npm安装cnpm时报错，安装不上时，可以检察下文，内里有详解。请看
cnpm安装不上，cnpm安装时报错

8. 安装完成

cnpm安装完成后，假如cnpm下令不管用的话，也是必要设置环境变量的，一样平常的cnpm文件所在为如下，请看

1. C:\Users\Administrator\AppData\Roaming\npm

复制代码

9. 下令标题

假如 cnpm下令 在下令提示符窗口管用，而在Vscode中不收效，则必要在PowerShell中设置远程署名，跟 vue下令 在下令提示窗口管用，在Vscode中不收效环境是一样的，设置详情如下，请看
cnpm下令在Vscode中不收效

---

五. Vue CLI / vue-cli  /  vue/cli   

安装Vue脚手架，也就是Vue CLI / vue-cli  /  vue/cli，请看
           Vue CLI是Vue.js官方提供的标准化开发工具，旨在简化和加快Vue.js项目标开发流程。通过vue-cli，开发者可以通过下令行或用户界面（UI）快速地创建一个新的Vue项目，并主动天生得当Vue和Webpack的项目模板。简而言之，Vue脚手架可以资助开发者更高效地搭建起一个具备所需依靠库的Vue项目，以便更快地进入现实编程工作。
  

1. 安装插件

Vue脚手架安装下令，请看

1. npm install -g @vue/cli
2. //或者
3. cnpm install -g @vue/cli

复制代码

2. 下令标题

安装完成后，偶尔候会碰到，在下令提示符窗口使用vue下令管用，但在vscode中，vue下令不收效的环境，这时间必要在Windows Powershell管理员模式中设置实行战略，详见此文，请看
设置实行战略

3. 安装检测

安装完成后，可通过vue -V（注意是大写的V）来检测vue版本是否安装乐成，假如能看到Vue CLI的版本号，阐明Vue CLI已经乐成安装。请看

---

六. Git

安装Git，请看
           Git是一个免费和开源的 分布式版本控制体系，旨在处理处罚从小到 非常大的项目，速率和服从。Git很轻易学习， 占地面积小，性能快如闪电。 它逾越了设置管理工具，如Subversion、CVS、Perforce和ClearCase 具有便宜的当地分支等功能，方便的集结地，以及 多个工作流。
  

1. 官方网址

Git官网所在，请看
Git官方网站

https://git-scm.com/download/win

• 打开官网，根据自己的电脑体系选择32位或64位版本举行下载。
  
• 双击安装包开始安装：等候下载完成后，双击安装包开始安装过程。
  
• 选择安装目次：在安装过程中，可以选择Git的安装目次，可以使用默认目次或指定其他目次。
  
• 选择安装组件：根据自己的需求选择必要安装的Git组件。
  
• 设置开始菜单目次名称：在安装过程中，可以选择开始菜单中Git的目次名称，默认即可。
  
• 选择下令行环境：根据喜欢选择是否使用Git的下令行环境。
  
• 调解PATH环境变量：选择是否将Git的可实行文件路径添加到体系的PATH环境变量中，如允许以在任何目次下直接使用Git下令。
  
• 开始安装：确认设置无误后，点击“Install”按钮开始安装Git。
  
• 完成安装：等候安装完成后，点击“Finish”按钮退出安装步调。
  

2. 安装检测

安装完成后，您可以通过打开终端窗口并输入下令`git --version`来查抄Git是否安装乐成。假如返回Git的版本信息，则表现安装乐成。请看

3. 具体使用

验证安装是否乐成，还可以在桌面右击鼠标，假如看到两个Git相干的选项（如“Git Bash Here”和“Git GUI Here”），则阐明Git已经乐成安装，然后直接点击 Git Bash Here 使用。请看

如许团体下来，就可以在 Vscode 中使用 Vue 举行开发，并在 Chrome 中举行调试，末了使用 Git 举行代码管理工作啦！

创作不易，感觉有用，就一键三连，感谢(●'◡'●)