前端开发环境配置、淘宝镜像及跨域处理

开发环境准备工作

安装软件

NPM 和 Yarn 添加淘宝镜像

NPM 设置淘宝镜像

  • 查询当前配置的镜像
npm get registry
# https://registry.npmjs.org/
  • 设置成淘宝镜像
npm config set registry http://registry.npm.taobao.org/
  • 换成原来的
npm config set registry https://registry.npmjs.org/
用 nrm 管理 npm 镜像
安装 nrm
npm i nrm -g
显示已有的镜像库
nrm ls
  npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
* taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/
切换镜像库
nrm use <name>
添加内部镜像库
nrm add <name> <url>

Yarn 设置淘宝镜像

  • 安装 yarn
npm install -g yarn
  • 查询当前配置的镜像
yarn config get registry
# https://registry.yarnpkg.com
  • 设置成淘宝镜像
yarn config set registry http://registry.npm.taobao.org/

安装 Vue/React 脚手架 和 eslint

# Vue-cli 2.x
[sudo] yarn global add vue-cli
# Vue-cli 3.x
[sudo] yarn global add @vue/cli
# React
[sudo] yarn global add create-react-app

[sudo] yarn global add eslint
[sudo] yarn global add mocha

安装VS code插件

  • Settings Sync 同步插件
  • Auto Close Tag
  • Auto Rename Tag
  • ESLint
  • HTML Snippets
  • JavaScript Standard Format
  • language-stylus
  • Path Intellisense
  • Vetur
  • Vue 2 Snippets

chrome浏览器跨域

版本号49之前的跨域设置

  1. 下载并安装好chrome浏览器后在桌面找到浏览器快捷图标并点击鼠标右键的属性一栏。
  2. 在属性页面中的目标输入框...exe"后加上 --disable-web-security
  3. 点击应用和确定后关闭属性页面，并打开chrome浏览器。
  4. 如果浏览器出现提示“你使用的是不受支持的命令标记–disable-web-security”，那么说明配置成功。

版本号49之后的chrome跨域设置

  1. 在电脑上新建一个目录，例如：C:\MyChromeDevUserData
  2. 在属性页面中的目标输入框...exe"后加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData,–user-data-dir的值就是刚才新建的目录。
  3. 点击应用和确定后关闭属性页面，并打开chrome浏览器。
  4. 再次打开chrome，发现有“–disable-web-security”相关的提示，说明chrome又能正常跨域工作了。

其他

如果报错 error An unexpected error occurred: "https://registry.npm.taobao.org/axios: unable to verify the first certificate".
就设置 npm/yarn config set strict-ssl false