前端电脑需要安装哪些工具？

Miraitowa_chole

已于 2022-02-09 12:04:12 修改

阅读量4k

点赞数 2

分类专栏：思维导图系列前端体系（整个项目） web（pc端）文章标签：前端 git 思维导图前端框架 javascript

于 2022-02-09 12:03:19 首次发布

本文链接：https://blog.csdn.net/ZHENGCHUNJUN/article/details/122837994

版权

web（pc端）同时被 3 个专栏收录

7 篇文章 3 订阅

订阅专栏

思维导图系列

6 篇文章 2 订阅

订阅专栏

前端体系（整个项目）

3 篇文章 5 订阅

订阅专栏

一. 确定自己的电脑是什么版本

桌面--我的电脑--右键 --属性---系统类型
tip：安装node.js、Git、编辑器都需要知道电脑是什么版本

二. 安装node.js及cli脚手架

打开node下载页面下载地址https://nodejs.org/zh-cn/download/
选择window安装包---64bit（根据电脑的版本）
然后像普通软件一样一直下一步就OK了（校验node是否完成安装, 通过 win + R 输入 cmd 按回车打开命令行, 看到版本号表示安装成功）
npm配置一下淘宝镜像: npm config set registry https://registry.npm.taobao.org
执行vue-cli 安装命令:npm install -g vue-cli
在命令行窗口输入vue查看vue是否安装成功,如果没有报错，说明安装成功
如果报错执行以下先执行以下代码：set-ExecutionPolicy RemoteSigned，再输入Y,然后回车即可

三. 安装git

3.1安装步骤

点击下载（根据电脑的版本）下载地址https://git-scm.com/
详细教程Git下载、安装及环境配置（超详细）https://blog.csdn.net/weixin_43951315/article/details/104921428?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164187460816780269888313%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=164187460816780269888313&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-2-104921428.first_rank_v2_pc_rank_v29&utm_term=git+%E4%B8%8B%E8%BD%BD&spm=1018.2226.3001.4187
注意点：检查Git是否安装正常 ①windows键+R，输入cmd，输入git，弹出以下内容表示安装成功
注意点：因为Git是分布式版本控制系统，所以，每个机器都必须自报家门：你的名字和Email地址。账号申请完成后，打开命令行或者Git Bash，输入
git config --global user.name “Your Name”，之后回车，再输入
git config --global user.email email@example.com （其中Your Name和email@example.com替换成上面注册时的账户名和邮箱。）

3.2 git 知识点

3.2.1.git 创建分支
例如：在master分支里面创建一个新分支dev

 git add  git commit -a "信息"

（先将master里的内容暂时放在本地（在vscode里面就可以在面板里面直接操作）

git branch -b dev（新分支名）

（创建本地分支，并绑定到远程分支）

git push

（这个时候，就已经切换到dev新分支，这个新的分支里面就有master里面所有的内容，这个时候就可以推送到远程仓库了）

3.2.2git 查看历史

如何得到一个完全没有污染的master

在master分支里面，写了很多东西，后面创建了新的分支，并提交了

git 处理冲突
冲突出现的原因：在同一个分支下，修改了同一个板块的代码，产生了冲突
修改的步骤：

（1）首先，无论什么情况下，一定要先将自己的代码暂存以及提交到本地仓库

（2）进行拉取

（3）这个时候就会提示冲突

（4）进入文件里面进行修改，有4种状态：
Accept Current Change: 选择本机的修改
Accept Incoming Change :选用别人的代码修改 Accept Both Changes：两个代码都保留（你自己的代码在前面，别人的代码在后面）
Compare Change:对比两个的代码修改

（5）将文件提交到远程仓库即可

git pull

解释：
git在上传文件时，需要做多一步，就是git pull，
因为会存在一种情况，别人也同时在修改你的代码
如果没有pull一下的话，那就有可能会覆盖掉代码，
那如果你有pull一下的话，那如果有相同的文件时，会提示冲突，然后再看看要不要保存

第一种情况：
1.写好代码，进行提交之前
（1）git commit -a -m message加一些备注的信息，方便进行查阅项目进度
（这个是先将文件存放在本机一个.git文件夹的index文件里，算是与远程仓库的联系）
（2）git pull 将远程仓库里有更新的文件先下载到本机里
（3）.git push将本机文件，上传并合并到远程仓库里
2.在公司电脑先打开前一天的代码
直接git pull即可更新全部代码

四.编辑器
4.1 VScode

安装（根据相应的版本）

一步一步安装操作
注意点：

1、通过code 打开

“操作添加到windows资源管理器文件上下文菜单：把这个两个勾选上，

可以对文件使用鼠标右键，选择VSCode 打开。

2、将code注册为受支持的文件类型的编辑器：不建议勾选，

这样会默认使用VSCode打开支持的相关文件，文件图标也会改变。

3、添加到PATH（重启后生效）：建议勾选，这样可以使用控制台打开VSCode 了。

去掉eslint

找到目录里面的》》.eslintrc.js 这个文件，将里面的内容去掉，替换成以下代码：

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "plugin:vue/essential",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
        "generator-star-spacing": "off",
        "no-tabs":"off",
        "no-unused-vars":"off",
        "no-console":"off",
        "no-irregular-whitespace":"off",
        "no-debugger": "off"
    }
};