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

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

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


相关文章
|
12天前
|
前端开发 JavaScript API
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
|
2月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
5天前
|
前端开发 JavaScript 开发者
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
|
5天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
28 3
|
1月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
49 8
|
3天前
|
前端开发 搜索推荐 安全
陪玩系统架构设计陪玩系统前后端开发,陪玩前端设计是如何让人眼前一亮的?
陪玩系统的架构设计、前后端开发及前端设计是构建吸引用户、功能完善的平台关键。架构需考虑用户需求、技术选型、安全性等,确保稳定性和扩展性。前端可选用React、Vue或Uniapp,后端用Spring Boot或Django,数据库结合MySQL和MongoDB。功能涵盖用户管理、陪玩者管理、订单处理、智能匹配与通讯。安全性方面采用SSL加密和定期漏洞扫描。前端设计注重美观、易用及个性化推荐,提升用户体验和平台粘性。
26 0
|
1月前
|
监控 前端开发 JavaScript
前端稳定性工具-Sentry
【11月更文挑战第9天】Sentry 是一个开源的错误和性能监控平台,支持多种编程语言和框架。它能够捕获前端应用中的各种错误和性能问题,提供详细的错误信息和用户行为关联,帮助开发团队快速定位和解决问题,优化应用性能。但需注意隐私保护、数据准确性和成本控制。
|
1月前
|
前端开发 JavaScript 安全
揭秘!前端大牛们如何高效解决跨域问题,提升开发效率!
【10月更文挑战第30天】在Web开发中,跨域问题是一大挑战。本文介绍前端大牛们常用的跨域解决方案,包括JSONP、CORS、postMessage和Nginx/Node.js代理,对比它们的优缺点,帮助初学者提升开发效率。
68 4
|
1月前
|
前端开发 JavaScript API
前端开发的秘密武器:这些工具让你轻松应对各种复杂动画效果!
【10月更文挑战第30天】前端开发中,动画效果为页面增添了无限生机。CSS3的@keyframes规则和JavaScript动画库如GSAP、Anime.js等,使开发者能轻松实现从简单到复杂的动画效果。掌握动画原理和设计原则,结合工具和库,可以创造出既美观又实用的动画,提升用户体验。
57 4
|
1月前
|
Web App开发 前端开发 JavaScript
前端开发的秘密武器:这些工具让你轻松应对各种复杂布局!
【10月更文挑战第31天】前端开发充满挑战,尤其是在处理复杂布局时。本文介绍了几种关键工具和技术,如HTML和CSS基础、Firefox开发者工具、Visual Studio Code以及Vue、React和Angular等前端框架,帮助开发者高效应对复杂布局,提升代码质量和用户体验。
35 2