记录:前端开发环境的搭建步骤0-1

一、Google Chrome下载

下载

1.官网地址:https://www.google.cn/chrome/index.html
image
2.设置默认浏览器
在谷歌页面右上角的设置中可以设置为默认浏览器
如果设置默认应用程序中找不到谷歌浏览器,关闭谷歌--右键用管理员身份运行--再次打开就能够找到啦
3.查询文件的插件
https://chrome.google.com/webstore/detail/shopify-theme-file-search/mhchmhfecfdpaifljcfebnlaiaphfkmb

二、VScode下载

下载

vscode官网:https://code.visualstudio.com/
image
如果使用官网下载的话除非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
    中文安装包
    image
  • CodeSnap
    可以将代码截图成为代码片段,方便阅读
    image
    image
  • CSS Navigation
    点击classname可以直接跳转到定义class的位置
    image
  • Dracula Official
    一款vscode主题(习惯了就好)
    image
  • Prettier - Code formatter
    代码格式化,代码校验
    image
  • TODO Highlight
    todo高亮,方便对代码做记号 查询
    image
  • vue
    image

三、node下载与安装

下载

点击下载LTS稳定版就可以了
官网地址:https://nodejs.org/en
image
打开cmd---输入node -v 和npm -v 查看版本检测是否安装完成

环境配置

  • 在node所在的文件夹添加node_cache和node_globa这两个文件夹如下
    image
  • 用管理员的身份打开cmd分别输入以下命令
    npm config set prefix "D:\nodejs\node_global(新建文件夹路径)"
    npm config set cache "D:\nodejs\node_cache(新建文件夹路径)"
  • 我的电脑-->右键(属性)-->高级系统配置-->环境变量
    image
    新建一个名为NODE_PATH的系统变量(系统变量板块下面-->编辑)
    image
    Tips: 如果输入变量值之后没有自动创建【node_modules】文件夹,就在【node_global】下手动创建一个【node_modules】文件夹,再复制你创建的【node_modules】文件夹的路径地址到变量值。
    选中编辑变量path,新建结束后保存
    image

测试

cmd 执行 npm install express -g // -g代表全局安装
如果失败使用管理员的身份进行安装
详细说明可参考此博主https://blog.csdn.net/m0_57313444/article/details/131660180

四、git安装

下载

官网地址:https://git-scm.com/downloads
image
image
image

测试

在文件夹内右键出现以下图标即可使用
image

至此就可以开始进行前端开发啦

posted @ 2023-09-19 14:32  ling'er  阅读(66)  评论(0编辑  收藏  举报