自己做一网站,高唐网页定制,做旅游信息的网站能赚钱吗,设计一站式服务简介#xff1a;有时候#xff0c;我们需要在新电脑 或者 电脑重置后#xff0c;配置前端开发环境#xff0c;具体都需要安装什么软件和插件#xff0c;这里来记录一下#xff08;文章适合新手和小白#xff0c;大佬可以带过#xff09;。 ✨前端开发环境#xff0c;需…简介有时候我们需要在新电脑 或者 电脑重置后配置前端开发环境具体都需要安装什么软件和插件这里来记录一下文章适合新手和小白大佬可以带过。 ✨前端开发环境需要用到的软件和插件 Chrome Visual Studio Codevscode Node.jsnpm / cnpm Vue CLI vue-cli / vue/cli Git 一、安装Chrome谷歌浏览器
Tips: Google Chrome程序员必备它是一款由谷歌公司开发的网页浏览器于2008年首次发布。它被广泛认为是速度快、安全性高、功能强大的浏览器之一。Chrome支持多种操作系统包括Windows、MacOS和Linux。它具有简洁的界面、快速的页面加载速度、强大的扩展程序生态系统和内置的安全功能。Chrome还集成了Google的搜索引擎使用户可以更便捷地进行搜索适合个人用户和企业用户使用。 1、Chrome浏览器安装地址
Chrome官网https://www.google.cn/chrome/
2、这里就不多说了直接安装使用就行也可以直接在应用商店进行下载。 二、安装Visual Studio Code简称vscode
Tips: Visual Studio Code是一款轻量级、功能强大的源代码编辑器可在Windows、macOS、Linux甚至浏览器上使用。它内置了对JavaScript、TypeScript和Node.js的支持并为其他语言和运行时提供了丰富的扩展生态系统。 1、Vscode官网
Visual Studio Code官网https://code.visualstudio.com/
2、下载时选择好与自己匹配的系统版本一般的64位windosws用户点击下载这个 下载完成以后直接点击安装点击选择接受协议点击下一步安装就好。 三、安装Node.js
Tips: 这里解释下npm 是 nodejs 中的一部分通常与 nodejs 一起安装和更新。当你安装了 nodejsnpm 也随之安装。npm全称是Node Package Manager它是 nodejs的官方包管理工具用来管理和分发 JS库和其他相关资源的系统npm 可以安装、共享和管理项目的依赖关系可通过 npm -v 命令可以检查其版本信息。 1、Node.js官网
Node.js官网https://nodejs.org/en
2、Node.js中文网
Node.js中文网http://nodejs.p2hp.com/
3、如需安装步骤 和 配置nodejs的环境变量详见此文
Node.js安装步骤以及环境变量的配置https://blog.csdn.net/weixin_65793170/article/details/126885041?ops_request_misc%257B%2522request%255Fid%2522%253A%2522170684972716777224451412%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257Drequest_id170684972716777224451412biz_id0utm_mediumdistribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-126885041-null-null.nonecaseutm_termnodejsspm1018.2226.3001.4450 4、安装完成后可以使用node -v和npm -v来检测是否安装成功注意这里的-v是小写字母。可以在命令提示符窗口 或者 vscode中都可以检测是否安装成功。
这里说下如何在命令提示符窗口检测安装结果
直接在键盘按下win r 键弹出输入框输入cmd 再按回车键命令提示符窗口启动然后直接输入node -v和npm -v检测安装结果如下 node版本号v16.17.1npm版本号8.15.0可以看到检测安装成功。 5、这里推荐配置安装下npm镜像cnpmcnpm是一个为中国用户量身打造的Node.js包管理工具它通过提供国内的镜像服务器来加速Node.js包的下载和安装为Node.js开发者带来了更加流畅和高效的开发体验。想要使用cnpm需要先行配置下载cnpmcnpm的下载命令如下
npm install -g cnpm --registryhttps://registry.npm.taobao.org 四、安装Vue脚手架也就是Vue CLI / vue-cli / vue/cli
Tips: Vue CLI是Vue.js官方提供的标准化开发工具旨在简化和加快Vue.js项目的开发流程。通过vue-cli开发者可以通过命令行或用户界面UI快速地创建一个新的Vue项目并自动生成适合Vue和Webpack的项目模板。简而言之Vue脚手架可以帮助开发者更高效地搭建起一个具备所需依赖库的Vue项目以便更快地进入实际编程工作。 1、Vue脚手架安装命令
npm install -g vue/cli
//或者
cnpm install -g vue/cli 2、安装完成后有时候会遇到在命令提示符窗口使用vue命令管用但在vscode中vue命令不生效的情况这时候需要在Windows Powershell管理员模式中配置执行策略详见此文
配置执行策略https://blog.csdn.net/weixin_65793170/article/details/128987191?ops_request_misc%257B%2522request%255Fid%2522%253A%2522170684702416800182752105%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257Drequest_id170684702416800182752105biz_id0utm_mediumdistribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-128987191-null-null.nonecaseutm_termvue%E5%91%BD%E4%BB%A4%E5%9C%A8vscode%E4%B8%AD%E4%B8%8D%E7%94%9F%E6%95%88spm1018.2226.3001.4450 3、安装完成后可通过vue -V注意是大写的V来检测vue版本是否安装成功如果能看到Vue CLI的版本号说明Vue CLI已经成功安装。 五、安装Git
Tips: 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已经成功安装。 这样下来就可以在Vscode中使用Vue进行开发并在Chrome中进行调试工作啦 创作不易感觉有用就一键三连感谢(●◡●)
