前端学习之一——关于第一次使用VSCode打开前端代码并启动问题
目录
一、软件环境准备(VSCode、git、nodejs、npm)
1、VSCode下载安装教程
2、git下载安装教程
3、nodejs、npm下载安装教程
二、打开VSCode,通过git拉取代码,运行代码
1、打开VSCode
2、通过git拉取代码
3、运行代码
注意:所有涉及代码的软件,都不建议使用中文目录!!要不然会出事!!勿谓言之不预!
如果不小心用了,后期出现问题,就要重装了。
一、软件环境准备(VSCode、git、nodejs、npm)
1、VSCode下载安装教程
下载:
官网网址:https://code.visualstudio.com/Download
我是直接点这里。然后它的下载速度会很慢。这时候把下载任务的链接复制出来,将里面的 http://az764295.vo.msecnd.net 替换为 http://vscode.cdn.azure.cn ,然后重新丢到链接框就可以快速下载了
这里放一下我的最终下载地址(我是1.67.2版本的):
http://vscode.cdn.azure.cn/stable/c3511e6c69bb39013c4a4b7b9566ec1ca73fc4d5/VSCodeUserSetup-x64-1.67.2.exe
安装:
因为安装过程很简单,所以就不放图了,说几个关键点:
①在【选择目标位置】的时候,将目录换成【非C盘/非系统盘】的地方
②在【选择附加任务】的时候,我把它全部打钩了(有个添加到path的选项需要重启,那你就听话重启就好了)
③其他地方全部默认下一步,就可以了
2、git下载安装教程
下载:
官网网址:https://git-scm.com/downloads
你可以直接点击右边这个小电脑的下载
也可以点击左边,看你是哪个系统,进去自己挑(我是win,然后我选的是standalone)
具体各个版本什么不同,我就不做辨析,大家可以自行百度,我只是记录一下我的历程。
安装:
后面连续都是默认,直到:
最后点击install安装就好了。
检查是否装好了:打开自己电脑的命令提示符(win+R,cmd回车);输入git --version(注意有两个-)
我忘了我有没有给git配置环境变量了,如果大家在自己电脑的命令提示符使用git,发现提示指令不存在之类的,那应该就是环境变量不太对,自行百度蛤。
3、nodejs、npm下载安装教程
下载:
官网地址:http://nodejs.cn/download/
可以直接点Windows的这个图标下载,也可以自己选
安装:
这个安装没啥特别的,有几个关键说一下:
①新版的nodejs有自带npm(这玩意是后面运行前端代码必不可少的),不用再另外装
②在【Destination Folder】这里,改一下目录,但是改的时候注意,要自己创建nodejs这一个文件夹(不改也行,但是后面C盘满了就很难受了)
③其他都默认,直接下一步到安装结束
试安装是否成功:
也是打开自己电脑的cmd,输入node -v和npm -v(注意只有一个-)
环境配置:
1、这里首先修改一下npm安装的全局模块所在的路径,以及缓存cache的路径。直接使用自己电脑的命令提示符进行。
可以先用npm root -g指令,看当前配置的安装全局模块路径(正常来说,第一次使用都是默认在C盘)。为了以后C盘的干净,这里需要改一下配置,代码如下:
npm config set prefix "D:\****\node_global"
npm config set cache "D:\****\node_cache"
****的地方是你自己的目录,放D盘或其他盘都是可以的。
我执行这两步的时候,nodejs文件夹里面没有什么变化,按理来说是会自动给你创建node_global和node_cache文件夹。后面发现是缺少权限,但是node的配置有更改成功,可以通过npm root -g检测。
然后这个权限问题,我知道的有两个解决方法:
①右击nodejs文件夹,【属性】-->【安全】,直接点击编辑,然后依次查看用户权限,看自己选择进行权限赋予
②右击这个玩意,然后再进行npm配置,应该就可以了(我没试过,但是理论上应该是可以的)
2、系统环境变量配置
我的电脑是win11,但是其他的大差不差。右击【我的电脑】,选择【属性】,选择【高级系统设置】——【高级】——【环境变量】
创建一个新的NODE_PATH,变量值:****\nodejs\node_modules(你自己装的nodejs的位置,里面node_modules的地址)
然后在Path里面,添加node_global的地址(如果刚才配置成功的话,你的nodejs文件夹里就会有这样一个文件夹,如果没有的话,自己手动创建也是可以的),注意添加新的地址进去时,使用的【;】一定得是英文下的。
然后就安装好了。
二、打开VSCode,通过git拉取代码,运行代码
1、打开VSCode
建议右击,通过管理员身份打开,因为后面启动前端代码的时候,npm需要权限才能下载依赖。
2、通过git拉取代码
先【ctrl+`】打开终端(那一个小点就是键盘左上角的那个点);或者其他方法都行,打开就行。
然后在终端处,先进入到你想存放前端代码的文件夹下(指令百度)
再输入git clone https://gitee.com/y_project/RuoYi-Vue.git(这一串地址是根据GitHub上来的,具体如下)
3、运行代码
然后等拉取完毕,通过VSCode的【文件】——【打开文件夹】——选择想要的文件(前端代码所在的文件夹)
接下来,以若依的代码为例:
①他前端代码在ruoyi-ui里面,所以cd进入
②分别执行npm install;npm run dev。然后等待就可以了。
注意:在执行npm install的过程中,有可能出现【npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。】的错误,这个错误的原因有两种:一种就是没有权限,需要通过管理员身份打开VSCode;另一种就是环境变量配置出问题,检查、重新配置一下环境变量就好了。
前端学习之一——关于第一次使用VSCode打开前端代码并启动问题相关推荐
- 前端学习路线整理,如何点亮前端技术栈
从用Markdown写博客开始,慢慢点亮前端技术栈 写在开始 关于Markdown 关于学习方法和学习资源 前端技术栈学习路线 一.工具类 代码编辑器Visual Studio Code 代码管理工具 ...
- 前端学习第一天--编程软件vscode使用、HTML标签
vscode软件基本操作 第一步:下载vscode,官网下载即可,不会的可以搜索下载教程. 第二步:下载插件 打开vscode,在最左侧最下面找到四个方块图标 点击进来之后直接在搜索框内输入名称,选择 ...
- flex 左右布局_web前端学习:移动端开发常用布局—前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
- 前端学习(2824):数据绑定前的代码编辑器技巧
- 前端学习(2488):使用git获取代码
- 前端学习(2409):vs code自定义代码块
- 前端学习(593):使用devtools作为代码编辑器
- 【转】一个40岁老程序员的前端学习之路|2021 年中总结
40岁的老程序员感言 时光给我留下了什么? 不知不觉间虚度了40年光阴,看着父母逐渐的苍老和孩子逐渐长大,看着自己发福的身材,已知道自己在这个陌生的城市里已经扎根,估计是很难再去哪里了.回首故里似乎和 ...
- 给玩得好的女朋友写了一份前端学习路线。
利用这几天的碎片化时间,给在座的各位"朋友"整理了一份适合大部分开发者的前端自学开发路线. 无论你是非科班还是在校的大专生,或者是其他领域的开发者,希望这份开发路线可以更好的帮助你 ...
- 【前端学习】D1:HTML简介与HTML标签
文章目录 前言 系列文章目录 1 HTML简介 1.1 网页 1.1.1 什么是网页? 1.1.2 什么是HTML? 1.1.3 网页的形成 1.2 常用浏览器 1.2.1 常用浏览器 1.2.2 浏 ...
最新文章
- spring Bean自动装配
- 寄存器(内存访问)---汇编学习笔记
- LightSwitch中的权限
- R语言中的block Gibbs吉布斯采样贝叶斯多元线性回归
- java 静态方法_新手学Java,哪些知识点可以优先掌握?
- 朋友易得 ,知已难求
- 【论文阅读】Pancreas Segmentation in Abdominal CT Scan: A Coarse-to-Fine Approach 2016
- C#中Socket用法,多个聊天和单一聊天。
- 数据挖掘导论(完整版).Introduction.To.Data.Mining习题英文版答案
- Scrapy爬虫流程
- 教你使用Box2d制作用蜡笔手绘物体的效果(一)
- 怎么把两个PDF文件合并一起
- 如何创建海外美区Apple ID,并使用支付宝购买Apple Store礼品卡,十分钟学会
- 液压比例阀放大器比例控制器比例阀放大板
- 惠普服务器蓝屏怎么修复,惠普电脑蓝屏出现WDF_VIOLATION错误代码解决办法
- 我 Spring Boot 贼 6,还有必要学 SpringMVC 么?
- mybatis中的驼峰转换
- 快速获取容器VIPs,解决集群自动化测试难题
- 2017ACM暑假集训总结
- android的TextView的TextWatcher使用