开发环境配置
前端开发常用的开发工具
软件名称 | 描述 |
---|---|
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.