记录:前端开发环境的搭建步骤0-1
一、Google Chrome下载
下载
1.官网地址:https://www.google.cn/chrome/index.html
2.设置默认浏览器
在谷歌页面右上角的设置中可以设置为默认浏览器
如果设置默认应用程序中找不到谷歌浏览器,关闭谷歌--右键用管理员身份运行--再次打开就能够找到啦
3.查询文件的插件
https://chrome.google.com/webstore/detail/shopify-theme-file-search/mhchmhfecfdpaifljcfebnlaiaphfkmb
二、VScode下载
下载
vscode官网:https://code.visualstudio.com/
如果使用官网下载的话除非FQ不然下载非常缓慢,此处建议使用镜像下载。
国内镜像地址:https://vscode.cdn.azure.cn
我们只需要替换镜像源即可,下面以某一版本为例
官网下载地址:https://az764295.vo.msecnd.net/stable/abd2f3db4bdb28f9e95536dfa84d8479f1eb312d/VSCodeUserSetup-x64-1.82.2.exe
镜像下载地址:https://vscode.cdn.azure.cn/stable/abd2f3db4bdb28f9e95536dfa84d8479f1eb312d/VSCodeUserSetup-x64-1.82.2.exe
安装
安装直接一键安装,但是安装的会是英文版,如果要使用中文版可以在扩展下载一个评分高的中文扩展(Chinese/中文),或者在设置里面搜索locale,找到“locale:执行 VSCode 的区域设置。”在右侧下拉菜单中选择“zh-cn”。完成操作之后保存操作重启vscode即可。
vscode打开markdown实时预览 先按Ctrl + K,然后放掉,紧接着再按 v,也能调出实时预览框
扩展(2023-11-7)
- Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
中文安装包
- CodeSnap
可以将代码截图成为代码片段,方便阅读
- CSS Navigation
点击classname可以直接跳转到定义class的位置
- Dracula Official
一款vscode主题(习惯了就好)
- Prettier - Code formatter
代码格式化,代码校验
- TODO Highlight
todo高亮,方便对代码做记号 查询
- vue
三、node下载与安装
下载
点击下载LTS稳定版就可以了
官网地址:https://nodejs.org/en
打开cmd---输入node -v 和npm -v 查看版本检测是否安装完成
环境配置
- 在node所在的文件夹添加node_cache和node_globa这两个文件夹如下
- 用管理员的身份打开cmd分别输入以下命令
npm config set prefix "D:\nodejs\node_global(新建文件夹路径)"
npm config set cache "D:\nodejs\node_cache(新建文件夹路径)" - 我的电脑-->右键(属性)-->高级系统配置-->环境变量
新建一个名为NODE_PATH的系统变量(系统变量板块下面-->编辑)
Tips: 如果输入变量值之后没有自动创建【node_modules】文件夹,就在【node_global】下手动创建一个【node_modules】文件夹,再复制你创建的【node_modules】文件夹的路径地址到变量值。
选中编辑变量path,新建结束后保存
测试
cmd 执行 npm install express -g // -g代表全局安装
如果失败使用管理员的身份进行安装
详细说明可参考此博主https://blog.csdn.net/m0_57313444/article/details/131660180
四、git安装
下载
官网地址:https://git-scm.com/downloads
测试
在文件夹内右键出现以下图标即可使用