（一）本地環境
一、node.js
Node.js是一個開源與跨平台的JavaScript運行時環境，事件驅動，非阻塞IO。
1、nvm
nodejs版本管理工具，也就是說，一個nvm可以管理很多 node 版本和 npm 版本。可以使用nvm來安裝nodejs。
#查看nvm版本 nvm version #設置nodejs運行版本位數 nvm arch 64 #開啟nvm版本管理 nvm on #設置nodejs國內鏡像源 nvm node_mirror https://npm.taobao.org/mirrors/node/ #設置npm國內鏡像源 nvm npm_mirror https://npm.taobao.org/mirrors/npm/ #安裝nodejs 建議使用nvm安裝 nvm install v12.16.1 #列出本機nvm管理的nodejs版本清單 nvm list #設置使用哪一個版本nodejs nvm use v12.16.1
參考：
Linux/Mac系統安裝 參考github nvm文檔
Windows系統安裝參考nvm-windows
(2)手動下載安裝
去官網下載node.js（https://nodejs.org/zh-cn/） LTS（長期支持）版本，選擇阿里雲鏡像下載，比較快。注意：v12.16.2以上版本不支持win7系統。
這里我們使用node-v12.16.1-win-x64.zip，解壓后並配置Path環境變量即可。
$ node -v v12.16.1 $ npm -v 6.13.4
2、包管理工具
(1)npm
npm是nodejs默認安裝的包管理工具。
(2)cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
注冊使用國內淘寶鏡像后就可以使用cnpm代替npm進行包管理了。
參考：淘寶NPM鏡像官方文檔
(3)yarn（推薦）
支持離線安裝，速度很快。yarn可以單獨安裝，但是依賴nodejs。
#查看版本 $ yarn -v 1.22.5 #查看yarn鏡像源 $ yarn config get registry https://registry.yarnpkg.com #設置yarn國內淘寶鏡像源 $ yarn config set registry https://registry.npm.taobao.org yarn config v1.22.5 success Set "registry" to "https://registry.npm.taobao.org". Done in 0.05s.
參考：
3、模塊管理
3.1 包發布
#進入目錄
cd sourceModule
#初始化
npm init
#包下面添加一個入口文件index.js，添加如下內容： function consoleFunc(arg){ console.log(arg) } module.exports = consoleFunc #將倉庫地址設置為官方注冊倉庫地址,就像git的倉庫github，docker的倉庫dockerHub，這里npm類似也有一個npmjs npm set registry https://registry.npmjs.org/ #添加npm倉庫本地用戶（需要提前去http://www.npmjs.com/注冊） npm adduser #查看當前用戶 npm whoami #發布 npm publish
3.2 包使用
#新建一個useModule目錄 $ mkdir useModule $ cd useModule/ #初始化目錄 npm init #安裝上面發布的包cac2020-publish yarn add cac2020-publish
#在useModule目錄下面新建入口文件 const consoleFunc=require('cac2020-publish') consoleFunc('hello word!') #在useModule目錄下面執行 $ node index.js hello word! 或者修改package.json內容 { "name": "usemodule", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node index.js", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "cac2020-publish": "^1.0.0" } } $ yarn start yarn run v1.22.5 $ node index.js hello word! Done in 0.30s.
二、Vue-Cli
1、關於舊版本
Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。
2、新版本安裝
npm install -g @vue/cli # OR yarn global add @vue/cli
3、新版本升級
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
4、驗證
$ vue --version @vue/cli 4.5.8
5、快速原型開發
你可以使用 vue serve 和 vue build 命令對單個 *.vue 文件進行快速原型開發，不過這需要先額外安裝一個全局的擴展：
npm install -g @vue/cli-service-global
參考:
三、IDE
首先推薦 Webstrom，如果希望占用資源少可以使用Vscode、Atom。
1、對比
Webstrom；功能強大、外觀、智能提示都很好，不需要做過多的配置，收費；
Vscode：小巧，占用內存小，環境、外觀都需要自行配置，學習成本高，所有高級功能都是通過安裝插件來實現，插件系統非常強大，免費；
vscode使用參考：玩轉VS Code
2、真機調試技巧（安卓、蘋果手機）
隨着頁面越來越復雜，在瀏覽器上無法模擬出真實手機上的效果，所以要借助手機真機來調試驗證。
(1)原生方式測試：Chrome + Android/Safari+iOS,移動端上的瀏覽器方式測試；
准備工作：
手機打開調試者模式;
手機和PC設置為連接到同一個局域網內；
手機使用數據線和電腦連接；
(2)接口類測試：Fiddler（Windows）/Charles（Mac），使用劫持移動端的請求的工具，看看發送請求的數據和路徑是否正確；
適用於代碼已發布到生產環境的調試。
(3)Weinre,Spy-Debugger,vConsole：npm包，會啟動一個代理，在手機上設置ip、端口，在局域網內訪問這些代理服務，以達到請求劫持和調試的目的；
調試代碼發布到生產之前一定要注釋掉，切記。
參考：Weinre入門手冊
（二）測試環境
一、使用虛擬機自建環境
二、購買雲服務
要求大於1C+2G
三、使用Docker
1、在Linux操作系統安裝Docker
(1)linux安裝Docker
參考：Github docker安裝文檔
(2)配置國內鏡像加速源
https://registry.docker-cn.com http://hub-mirror.c.163.com https://3laho3y3.mirror.aliyuncs.com http://f1361db2.m.daocloud.io https://mirror.ccs.tencentyun.com
2、在windows/Mac安裝Docker
3、docker-compose工具
參考：官方安裝文檔
（三）數據庫服務
這里采用mongoDB作為數據庫服務，使用Robo3T作為mongo客戶端工具。
(四)接口測試
一、常見接口測試工具
1、插件類
Postman、DHC、REST client
2、平台類
Yapi、DOCleaver、RAP2、EasyMock、Swagger
3、終端類
Postman、SoapUI、DOCleaver
二、Mock
1、概念
Mock數據，虛假的數據，虛假的測試數據；Mock開發，使用Mock數據，實現效率開發。
2、作用
模擬接口、虛擬業務場景、臨界情況。
模擬真實接口：提供虛假的測試數據，保證前端開發效率，前后端同步，特別是分布式系統；
模擬業務場景：某些開發場景非常難觸發，還有一些異常邏輯、交互邏輯；
3、工具
Yapi、DOCleaver、EasyMock、Fast Mock
4、Mock開發流程
5、Docker安裝DOCleaver
參考：
DOCleaver線下部署文檔
docker方式部署
6、DOCleaver中Mock數據開發使用
7、Mock.js
如果覺得DOClever平台較龐大，可以使用Mockjs，靈活小巧。
安裝&語法&使用 參考
Mock.js官網
github文檔