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

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

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


相关文章
|
23天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
20 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
1月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
35 0
|
1月前
|
前端开发 开发者
探索前端技术的新趋势:Web组件化开发
【2月更文挑战第11天】 在这篇文章中,我们将深入探讨Web组件化开发的概念及其对前端开发领域的影响。不同于传统的摘要方式,我们通过一个故事来引入主题:想象在一个快速变化的数字世界里,有一座由各种小型、独立、可复用的建筑块构成的城市,每个建筑块都拥有独特的功能和风格,它们可以自由组合,创造出无限可能的城市景观。这座城市,就像是使用了Web组件化开发技术的前端项目。接下来,我们将详细探讨Web组件化开发的优势、实现方式以及面临的挑战,为前端开发者提供一个全面的视角来理解和应用这一重要的技术趋势。
62 5
|
2月前
|
缓存 前端开发 JavaScript
(10月最新) 前端图形学实战: 从零开发几何画板(vue3 + vite版)
(10月最新) 前端图形学实战: 从零开发几何画板(vue3 + vite版)
62 0
|
2月前
|
前端开发 JavaScript Java
从前端到后端:探索Web开发的技术演进
本文将介绍Web开发领域中前端和后端技术的演进过程。我们将从最初的静态网页开始,逐步探索动态网页、前后端分离、服务器端渲染等技术,以及流行的编程语言如Java、Python和C的应用。通过了解这些技术的发展,读者可以更好地理解Web开发的现状以及未来的趋势。
|
2月前
|
前端开发 NoSQL 关系型数据库
从前端到后端:探索全栈开发的无限可能
本文将介绍全栈开发的概念以及其在现代技术领域中的重要性。我们将深入探讨前端和后端开发的关联,并探索多种编程语言(如Java、Python、C、PHP、Go)以及数据库技术在全栈开发中的应用。通过本文,读者将了解到如何成为一名全栈开发人员,以及如何利用全栈开发的技能构建出强大且可扩展的应用程序。
|
3月前
|
前端开发 JavaScript 测试技术
探索现代前端工程化工具与流程:提升开发效率和项目质量
探索现代前端工程化工具与流程:提升开发效率和项目质量
探索现代前端工程化工具与流程:提升开发效率和项目质量
|
2月前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
84 0
|
3月前
|
XML 存储 前端开发
前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容(三)
前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容
|
3月前
|
XML JSON 前端开发
前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容(二)
前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容