如何从一台新电脑配置前端常用工具实现快速开发

简介: 如何从一台新电脑配置前端常用工具实现快速开发

前言:正所谓工欲利其事必先利其器。进入公司后,可能给你一台新电脑,你需要下载IDE以及下载很多的插件、第三方工具,工具很多,容易忘记,影响开发效率。这里做一个总结。

1.首先是写代码的编辑器(IDE  )


01.vscode  插件多,功能强大 、免费

02 submit  简洁

03 webstorm  好使,收费

2 版本控制工具


注意:安装的时候,要可以右键打开文件  git bash here

1 安装完 Git 之后,要做的第一件事就是设置自己的用户名邮件地址

git config --global user.name "你的名字"
git config --global user.email "你的邮箱"

如果使用了 --global 选项,那么该命令只需要运行一次,即可永久生效。

image.png

2.使用:

新建一个文件夹,运行:

1.git init 初始化文件夹,使他被git跟踪管理

2.git add . 提交到暂存区

3.git commit -m 'XXX写点文字'

4.git  push 推送到远程仓库  第一次的时候,用git push origin master (网页应该给你提示,复制就好)

5.开发时,一般新建分支,最后开发完成再合并到主分支

新建分支:git checkout  -b  'dev'    建完了git branch  查看状态  一般不用管 后续直接Git push 就行

6.拉取远程仓库   第一次拉,git  clone 后面跟xxxx…(网页也会给提示,复制即可)  之后就git pull 就行

3 远程仓库


码云(gitee)或者GitHub


基于 SSH key

1打开 Git Bash

2 粘贴如下的命令,并将 your_email@example.com 替换为注册 Github 账号时填写的邮箱:

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

3 连续敲击 3 次回车,即可在 C:\Users\用户名文件夹\.ssh 目录中生成 id_rsa 和 id_rsa.pub 两个文件

4配置ssh

4-1使用记事本打开 id_rsa.pub 文件,复制里面的文本内容

4-2在浏览器中登录 Github,点击头像 -> Settings -> SSH and GPG Keys -> New SSH key

4-3将 id_rsa.pub 文件中的内容,粘贴到 Key 对应的文本框中

4-4 在 Title 文本框中任意填写一个名称,来标识这个 Key 从何而来

这里面最难的就是配置ssh,其他的按照提示就行,傻瓜操作

总结:github和码云(gitee)差不多,但更加推荐码云,因为GitHub太卡了,老是登不上去,而且码云操作更加简单。

4 node 官网下载


主要使用它里面的npm下载第三方包,当然你也可以用他里面的express搭建服务器。

设置淘宝镜像  

$ npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址
$ npm config get registry  #查看镜像地址
# 1. 初始化, 得到package.json文件(当前路径下)
npm init  /  npm init -y
# 2. 添加依赖(下包)
npm i [package]
npm i [package]@[version]
# 例如: npm i jquery
# 例如: npm i jquery@3.5.1
npm i axios -S # 生产依赖 => xie
npm i less -D # 开发依赖
# 3. 移除包
npm un [package]
# 例如: npm un axios
# 4. 安装项目全部依赖(一般拿到别人的项目缺少node_modules)          
npm i
# 5. 全局
安装: npm i [package] -g
卸载: npm un [package] -g
# 例如 npm i @vue/cli -g

5 postman


一款可以测试接口的软件,可以模拟浏览器 发送请求

1.get 请求参数写在 params里

2.post请求参数写在body 的 x-www……

6typora


写笔记,文档很好用  .md格式的文件

7 xmind


思维导图 可以随心所欲的总结

8vue-devtools


vue官方提供的插件  类似于控制台console.log的效果 vue开发必不可少

9 webpack


1.初始化项目目录和包环境=> 使用git bash操作=>npm init -y

2安装依赖包 npm i webpack webpack-cli -D

3配置scripts(自定义命令)

scripts: {
    "build": "webpack"
}

打包方法:npm run build =》生成默认dist目录和打包后默认main.js文件  

10 安装vue脚手架


全局安装命令 npm install -g @vue/cli

查看vue脚手架版本 vue --version  如果出现版本号就安装成功, 否则失败

10-2  vue-cli 创建项目


# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

注意:脚手架创建项目的时候

image.png


相关文章
|
10月前
|
运维 前端开发 JavaScript
前端埋点校验工具:数据驱动的最后一道防线
数据埋点是企业决策的关键基础,但常面临覆盖率低、数据不准和故障难排查三大难题。本文深入剖析了这些问题的成因与影响,并提出“三维校验矩阵”解决方案:提升覆盖率至99.8%、降低错误率至0.3%、提速故障定位5倍。同时对比Split.io、Tealium、Sentry、板栗看板等工具优劣,为企业选型提供参考。迈向高质量数据治理,从精准埋点开始。
|
9月前
|
JSON 监控 前端开发
AMIS:百度开源的前端低代码神器,18.4k star 背后的开发效率提升利器
AMIS(前端低代码框架)是百度开源的低代码前端框架,基于纯 JSON 配置即可生成完整后台页面,包括表单、表格、图表、CRUD 列表,支持可视化拖拽编辑。,星标数已达 18.4k,百度内部已沉淀超过 5 万个页面,广泛应用于审核系统、数据管理后台、模型监控等落地场景
1629 0
|
8月前
|
人工智能 前端开发 JavaScript
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
973 18
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
1033 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
725 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
542 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
12月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
661 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
971 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
1175 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
534 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1133
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    500
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    388
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    375
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    495
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    668
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1133
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    263
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    957
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    448