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

      最后更新：2022-03-06 04:48

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

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

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

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

      三. 安装git

      3.1安装步骤

      1. 点击下载（根据电脑的版本） 下载地址[这里是图片002]https://git-scm.com/
      2. 详细教程 Git下载、安装及环境配置（超详细）[这里是图片003]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 alltop_click~default-2-104921428.first_rank_v2_pc_rank_v29&utm_term=git+%E4%B8%8B%E8%BD%BD&spm=1018.2226.3001.4187
      3. 注意点：检查Git是否安装正常 ①windows键+R，输入cmd，输入git，弹出以下内容表示安装成功
      4. 注意点：因为Git是分布式版本控制系统，所以，每个机器都必须自报家门：你的名字和Email地址。账号申请完成后，打开命令行或者Git Bash，输入
      5. git config --global user.name “Your Name”，之后回车，再输入
      6. git config --global user.email email@example.com （其中Your Name和email@example.com替换成上面注册时的账户名和邮箱。）

      3.2 git 知识点

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

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

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

      （这个时候，就已经切换到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.1VScode

      • 安装（根据相应的版本）

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

      1、通过code 打开

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

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

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

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

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

      • 去掉eslint

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

      • 配置中文界面

      插件市场搜索Chinese，点击install，然后Restart，最后重启后就ok了

      • 效率神器

      设置代码间隔为4个空格[这里是图片004]https://blog.csdn.net/qq_35091353/article/details/114273224 vscode 中，vue导入组件路径提示[这里是图片005]https://blog.csdn.net/qq_34877350/article/details/107967929?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164281435616780255271233%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=164281435616780255271233&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2 allsobaiduend~default-1-107967929.first_rank_v2_pc_rank_v29&utm_term=vscode+vue+%E8%B7%AF%E5%BE%84%E6%8F%90%E7%A4%BA%E6%8F%92%E4%BB%B6&spm=1018.2226.3001.4187

      VSCode 小技巧：自动生成vue模板内容[这里是图片006]https://blog.csdn.net/happy81997/article/details/103665269

      • 安装插件
      1. JavaScript (ES6) code snippets
      2. Auto Close Tag 自动闭合HTML/XML标签
      3. vscode weapp api
      4. wxml
      5. Winter is Coming Theme
      6. wechat-snippet
      7. Vuter
      8. vue
      9. vscode-wechat
      10. vscode wxml
      11. vscode weapp api
      12. Vetur
      13. Preview on Web Server
      14. Pink-Cat-Boo Theme
      15. open in browser
      16. Live Server
      17. JavaScript (ES6) code snippets
      18. HTML Snippets
      19. HTML CSS Support
      20. Easy WXLESS
      21. Easy LESS
      22. css-auto-prefix
      23. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
      24. Auto Rename Tag
      25. Auto Close Tag
      26. 会了吧
      27. Path Autocomplete
      28. GitLens----- Git Supercharged(必备)：查看git文件提交历史
      29. Document This：注释文档生成
      30. HTML CSS Support：在编写样式表的时候，自动补全功能大大缩减了编写时间
      31. JavaScript Snippet Pack：针对js的插件，包含了js的常用语法关键字，很实用。
      32. Git History Diff
      33. 待补充

      4.2 HBuilder X
      安装
      安装app开发版[这里是图片007]https://www.dcloud.io/hbuilderx.html 注：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。

      如下图，需在输入框输入微信开发者工具的安装路径。

      若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，

      然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，

      在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。
      uni-app默认把项目编译到根目录的unpackage目录。

      4.3微信开发者工具
      安装
      根据自身操作系统下载所需版本：（建议下载稳定版本）
      点击下载 点击下载[这里是图片008]https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

      本文由 在线网速测试 整理编辑，转载请注明出处。

          热门文章

          文章分类