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

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

前言:正所谓工欲利其事必先利其器。进入公司后,可能给你一台新电脑,你需要下载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


相关文章
|
3月前
|
缓存 移动开发 Rust
前端构建工具 Mako 开源了
Hi,我是 sorrycc,Mako 的主要负责人之一,也是 Umi、Dva、Father 等库的作者。 很开心,Mako 终于开源了! Github 地址:https://github.com/umijs/mako/ 今天和大家正式介绍下他。
140 3
|
2月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
14天前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
38 8
|
21天前
|
监控 前端开发 JavaScript
前端稳定性工具-Sentry
【11月更文挑战第9天】Sentry 是一个开源的错误和性能监控平台,支持多种编程语言和框架。它能够捕获前端应用中的各种错误和性能问题,提供详细的错误信息和用户行为关联,帮助开发团队快速定位和解决问题,优化应用性能。但需注意隐私保护、数据准确性和成本控制。
|
28天前
|
前端开发 JavaScript 安全
揭秘!前端大牛们如何高效解决跨域问题,提升开发效率!
【10月更文挑战第30天】在Web开发中,跨域问题是一大挑战。本文介绍前端大牛们常用的跨域解决方案,包括JSONP、CORS、postMessage和Nginx/Node.js代理,对比它们的优缺点,帮助初学者提升开发效率。
53 4
|
28天前
|
前端开发 JavaScript API
前端开发的秘密武器:这些工具让你轻松应对各种复杂动画效果!
【10月更文挑战第30天】前端开发中,动画效果为页面增添了无限生机。CSS3的@keyframes规则和JavaScript动画库如GSAP、Anime.js等,使开发者能轻松实现从简单到复杂的动画效果。掌握动画原理和设计原则,结合工具和库,可以创造出既美观又实用的动画,提升用户体验。
54 4
|
27天前
|
Web App开发 前端开发 JavaScript
前端开发的秘密武器:这些工具让你轻松应对各种复杂布局!
【10月更文挑战第31天】前端开发充满挑战,尤其是在处理复杂布局时。本文介绍了几种关键工具和技术,如HTML和CSS基础、Firefox开发者工具、Visual Studio Code以及Vue、React和Angular等前端框架,帮助开发者高效应对复杂布局,提升代码质量和用户体验。
28 2
|
2月前
|
负载均衡 前端开发 JavaScript
前端研发链路之开发
本文首发于微信公众号“前端徐徐”,作者徐徐。文章介绍了前端研发链路中的开发部分,重点探讨了开发服务器(dev-server)、热更新(hot-reload)、数据模拟(mock)和代理(proxy)等关键技术,帮助开发者理解其基本原理和应用场景,提升开发效率和代码质量。
39 2
前端研发链路之开发
|
2月前
|
自然语言处理 前端开发 JavaScript
推荐 10 个前端开发会用到的工具网站
本文介绍了多个前端开发工具,包括 Web Design Museum、Landing Page、Google Fonts、Lorem Ipsum、Animista、Blobmaker、Spline、CodeToGo、UnusedCSS 和 Responsively,帮助开发者提高效率和项目质量。这些工具涵盖了设计、动画、代码片段管理、响应式测试等多个方面。
99 0
推荐 10 个前端开发会用到的工具网站
|
2月前
|
人工智能 前端开发 测试技术
探索前端与 AI 的结合:如何用 GPT-4 助力开发效率
本文介绍了 GPT-4 如何成为前端开发者的“神队友”,让开发变得更加高效愉快。无论是需求到代码的自动生成、快速调试和性能优化,还是自动化测试和技术选型,GPT-4 都能提供极大的帮助。通过智能生成代码、捕捉 BUG、优化性能、自动化测试生成以及技术支持,GPT-4 成为开发者不可或缺的工具,帮助他们从繁重的手动任务中解脱出来,专注于创新和创意。GPT-4 正在彻底改变开发流程,让开发者从“辛苦码农”转变为“效率王者”。
36 0
探索前端与 AI 的结合:如何用 GPT-4 助力开发效率