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

简介: 如何从一台新电脑配置前端常用工具实现快速开发
+关注继续查看

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


相关文章
|
9月前
|
前端开发
前端实现导出word(docxtemplater、pizzip、jszip-utils、file-saver )
docxtemplater、pizzip、jszip-utils、file-saver 前端实现导出word
560 0
前端实现导出word(docxtemplater、pizzip、jszip-utils、file-saver )
|
9月前
|
存储 JSON JavaScript
|
9月前
|
JavaScript 前端开发
vue 前端实现随机背景色
vue 前端实现随机背景色
vue 前端实现随机背景色
|
9月前
|
前端开发 JavaScript
前端:JS实现双击table单元格变为可编辑状态
前端:JS实现双击table单元格变为可编辑状态
301 0
|
9月前
|
JavaScript 算法 前端开发
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
153 1
|
9月前
|
算法 前端开发 JavaScript
【前端算法】用JS实现快速排序
理解数组方法里面运用到的算法,splice 和 slice的区别
|
9月前
|
JavaScript 前端开发 算法
【前端算法】javaScript实现二分查找
如何使用JS实现一个合格的二分查找
156 0
|
9月前
|
存储 算法 前端开发
【前端算法】链表和数组实现队列的区别
比较链表和数组实现队列的性能
124 0
|
9月前
|
算法 前端开发 测试技术
【前端算法】两个栈实现一个队列
介绍栈和队列的区别,以及如何使用栈实现一个队列
|
9月前
|
存储 前端开发 算法
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
97 0
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
相关产品
云迁移中心
推荐文章
更多