开发环境配置
前端开发常用的开发工具
| 软件名称 | 描述 |
|---|---|
| Visual Studio Code | 一款真正的跨平台编辑器 |
| Chrome | 谷歌浏览器，审查元素，安装辅助浏览器插件（谷歌访问助手） |
| Photoshop | 专业图像处理软件 |
| Node | Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境 |
| Yarn | Yarn 是一个快速、可靠、安全的依赖管理工具 |
| Git | Git是一个开源的分布式版本控制系统 |
| Duo Mobile | 双因素身份验证服务 APP gitlab权限认证推荐使用 |
| 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命令
常用命令
// 这个命令用于初始化一个包，创建一个package.json文件，我们的项目都应该先执行npm init
npm init;
// 快速的初始化一个包， 不能是一个中文名
npm init -y;
// 安装指定的包名的最新版本到项目中
npm install 包名;
// 安装指定包的指定版本 jQuery@1.12
npm install 包名@版本号
// 安装多个包
npm install pkg1 pkg2
// 模块名添加到生产阶段依赖： dependencies
npm install pkg -S/--save
// 模块名添加到开发阶段依赖：devDependencies
npm install pkg -D/--save-dev
// 简写
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.
配置NPM淘宝镜像地址
1、切换npm下载地址到taobao
npm config set registry https://registry.npmmirror.com
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
NVM Node版本管理工具
安装nvm
直接进入安装包下载地址：https://github.com/coreybutler/nvm-windows/releases，选择nvm-setup.zip，下载后直接安装。
使用nvm
nvm list 命令 - 显示版本列表
nvm list // 显示已安装的版本（同 nvm list installed）
nvm list installed // 显示已安装的版本
nvm list available // 显示所有可以下载的版本
nvm install 命令 - 安装指定版本nodejs
nvm install 14.5.0 // 安装14.5.0版本node
nvm install latest // 安装最新版本node
nvm use 命令 - 使用指定版本node
nvm use 14.5.0 // 使用14.5.0版本node
nvm uninstall 命令 - 卸载指定版本 node
nvm uninstall 14.5.0 // 卸载14.5.0版本node
遇坑警告！！！！！
在运行
nvm install的时候，有可能会出现无权限安装的问题，如果遇到此问题，请以管理员身份运行cmd。
其他命令
nvm arch：显示node是运行在32位还是64位系统上的nvm on：开启nodejs版本管理nvm off：关闭nodejs版本管理nvm proxy [url]：设置下载代理。不加可选参数url，显示当前代理。将url设置为none则移除代理。nvm node_mirror [url]：设置node镜像。默认是https://nodejs.org/dist/。如果不写url，则使用默认url。设置后可至安装目录settings.txt文件查看，也可直接在该文件操作。nvm npm_mirror [url]：设置npm镜像。https://github.com/npm/cli/archive/。如果不写url，则使用默认url。设置后可至安装目录settings.txt文件查看，也可直接在该文件操作。nvm root [path]：设置存储不同版本node的目录。如果未设置，默认使用当前目录。nvm version：显示nvm版本。version可简化为v。