前端电脑需要安装哪些工具? 您所在的位置:网站首页 前端需要什么软件 前端电脑需要安装哪些工具?

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

2024-01-02 01:44| 来源: 网络整理| 查看: 265

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

    桌面--我的电脑--右键 --属性---系统类型     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 protected]                                                             (其中Your Name和[email protected]替换成上面注册时的账户名和邮箱。)

   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"     } }; 配置中文界面

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

效率神器

设置代码间隔为4个空格https://blog.csdn.net/qq_35091353/article/details/114273224 vscode 中,vue导入组件路径提示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~all~sobaiduend~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模板内容https://blog.csdn.net/happy81997/article/details/103665269

 安装插件             JavaScript (ES6) code snippets            Auto Close Tag  自动闭合HTML/XML标签            vscode weapp api            wxml            Winter is Coming Theme            wechat-snippet            Vuter            vue            vscode-wechat            vscode wxml            vscode weapp api            Vetur            Preview on Web Server            Pink-Cat-Boo Theme            open in browser            Live Server            JavaScript (ES6) code snippets            HTML Snippets            HTML CSS Support            Easy WXLESS            Easy LESS            css-auto-prefix            Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code            Auto Rename Tag            Auto Close Tag            会了吧            Path Autocomplete            GitLens----- Git Supercharged(必备):查看git文件提交历史            Document This:注释文档生成            HTML CSS Support:在编写样式表的时候,自动补全功能大大缩减了编写时间            JavaScript Snippet Pack:针对js的插件,包含了js的常用语法关键字,很实用。            Git History Diff            待补充

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

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

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

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

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

4.3微信开发者工具安装 根据自身操作系统下载所需版本:(建议下载稳定版本) 点击下载点击下载https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有