开发环境配置

前端开发常用的开发工具

软件名称	描述
Visual Studio Code	一款真正的跨平台编辑器
Chrome	谷歌浏览器，审查元素，安装辅助浏览器插件（谷歌访问助手）
Photoshop	专业图像处理软件
Node	Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境
Yarn	Yarn 是一个快速、可靠、安全的依赖管理工具
Git	Git是一个开源的分布式版本控制系统
phpStudy	phpStudy是一个PHP调试环境的程序集成包
Postman	数据接口API调试工具
Navicat for MySQL	MySQL数据库可视化工具
typora	MarkDown查看和编辑软件
XMind	XMind思维导图
Snipaste	截屏贴图工具

NPM全局插件目录

插件名称	插件描述	安装	备注使用
@types/jquery	该软件包包含jquery的类型定义	npm install -g @types/jquery
express-generator	基于 Node.js平台，快速、开放、极简的 Web 开发框架	npm install -g express-generator
@vue/cli	Vue.js 开发的标准工具，Vue脚手架	npm install -g @vue/cli	vue create Hello
i5ting_toc	markdown自动生成侧边栏TOC /目录	npm install -g i5ting_toc	i5ting_toc -f sample.md -o
json-server	JSON服务器虚拟数据接口	npm install -g json-server	json-server db.json
live-server	服务器模式预览本地网页和项目	npm install -g live-server	live-server
nodemon	Node自动重启工具	npm install -g nodemon	nodemon ./server.js
typescript	JavaScript的超集运行环境	npm install typescript -g	tsc --init

Visual Studio Code编辑器常用插件

插件名称	描述
Beautify	HTML、CSS、JS的格式化插件
vscode-icons	优化vscode文件和文件夹图标
HTML CSS Support	CSS代码提示插件
HTML Snippets	HTML代码提示插件
Live Server	代码服务端预览插件
open in browser	快捷键Alt+B默认浏览器预览
Path Intellisense	文件图片路径提示插件
px2rem	rem自动计算插件
Vetur	Vue单文件支持插件
ESLint	语法规范插件
VueHelper	Vue代码提示工具

Chrome浏览器常用插件

插件名称	描述
谷歌上网助手/谷歌访问助手	可以访问谷歌google搜索，gmail邮箱，google+等谷歌产品
Vue.js devtools	用于调试Vue.js应用程序
掘金	为程序员、设计师、产品经理每日发现优质内容
划词翻译	支持谷歌、百度、有道三大翻译和朗读引擎，可以方便的查看、复制和朗读不同引擎的翻译结果
WEB前端助手(FeHelper)	包含多个独立小应用，比如：Json工具、代码美化、代码压缩、正则表达式、Postman、markdown

注：使用谷歌账号可以备份和同步标签和扩展插件已经浏览器的各项设置

配置NPM淘宝镜像地址

1、切换npm下载地址到taobao

npm config set registry https://registry.npm.taobao.org

2、安装nrm镜像管理工具

// 全局安装 nrm
npm i -g nrm

// 查看仓库地址列表，带*表示当前正在使用的地址
nrm ls

// 切换仓库地址
nrm use taobao

3、切换到npm官方镜像

// 使用nrm切换
nrm use npm

// 手动切换
npm config set registry https://registry.npmjs.org

npm常用命令

// 这个命令用于初始化一个包，创建一个package.json文件，我们的项目都应该先执行npm init
npm init;    

// 快速的初始化一个包， 不能是一个中文名
npm init -y;  

// 安装指定的包名的最新版本到项目中
npm install 包名;  

// 安装指定包的指定版本 jQuery@1.12
npm install 包名@版本号

// 简写
npm i 包名

// 卸载已经安装的包
npm uninstall 包名  

 // 清除缓存
npm cache clean -f

// 全局安装,会把npm包安装到C:\Users\HUCC\AppData\Roaming\npm目录下，作为命令行工具使用
npm install -g 包名;

// 全局卸载 
npm uninstall -g 包名;

// 本地安装，会把npm包安装到当前项目的node_modules文件中，作为项目的依赖
npm install 包名;

// 查看全局已经安装的包
npm list -g --dept 0

//    更新全局指定的包,jshint是包名
npm update -g jshint

//    要找出需要更新的软件包
npm outdated -g --depth=0.

//    要更新所有全局软件包
npm update -g.