导语：
现在的前端技术发展太快，所以利用空余时间通过做项目的方式来扩展一下自己的知识面，提升自己。
刚升级了MAC OS系统，遇到了一些问题，比如升级后VScode中的git和svn无法使用等一些问题，不过参考一些文章也解决了，git官网下载重新安装一下，svn嘛直接禁用掉插件后重新启动也恢复使用了。
我准备在自己的MAC本上做一个博客，现在本地用，能记录一些学习的笔记，开发好后上线到自己的服务器，使用的技术栈：Node + Mysql + Koa + TypeScript + Nuxt + webpack4 + vue3
准备阶段
操作系统：mac os 10.14.0
代码工具：VScode 1.28.2
数据库：MySQL 8.0.11
环境配置
HomeBrew
安装：
HomeBrew官网
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
更新：
$ brew update
检测：
$ brew doctor // 检测brew是否有问题，有问题的话按照提示逐条解决
$ brew list // 检测brew安装了哪些包
删除：
$ brew uninstall node // 删除安装的node
NVM
安装：
$ brew install nvm // 使用brew安装nvm，node管理工具
设置：
$ vim ~/.zshrc // 我MAC安装了oh my zsh，根据个人情况而定
解除注释(解除后可以全局使用nvm)：
export NVM_DIR=/usr/local/Cellar/nvm/0.33.11
$ source $(brew --prefix nvm)/nvm.sh
检查：
$ nvm --version //检查nvm是否安装成功
查看：
$ nvm ls-remote // 查看远程已经存在的node版本
$ nvm ls // 查看本机已安装的版本，default表示当前使用的版本
Node
安装：
$ nvm install --latest-npm // 安装最新版本node
$ nvm install --lts // 安装最新稳定版node
切换:
$ nvm use v11.0.0.0 // 切换node版本
NPM
更换npm镜像为淘宝镜像：
$ npm config set registry https://$ registry.npm.taobao.org
$ npm config get registry // 检查是否更换成功
PM2
安装：
$ npm install pm2 -g
用法：
# 后台运行pm2，启动4个app.js
# 也可以把'max' 参数传递给 start
# 正确的进程数目依赖于Cpu的核心数目
pm2 start app.js -i 4
pm2 start app.js --name my-api # 命名进程
pm2 list # 显示所有进程状态
pm2 monit # 监视所有进程
pm2 logs # 显示所有进程日志
pm2 stop all # 停止所有进程
pm2 restart all # 重启所有进程
pm2 reload all # 0秒停机重载进程 (用于 NETWORKED 进程)
pm2 stop 0 # 停止指定的进程
pm2 restart 0 # 重启指定的进程
pm2 startup # 产生 init 脚本 保持进程活着
pm2 web # 运行健壮的 computer API endpoint (http://localhost:9615)
pm2 delete 0 # 杀死指定的进程
pm2 delete all # 杀死全部进程
运行进程的不同方式：
pm2 start app.js -i max # 根据有效CPU数目启动最大进程数目
pm2 start app.js -i 3 # 启动3个进程
pm2 start app.js -x #用fork模式启动 app.js 而不是使用 cluster
pm2 start app.js -x -- -a 23 # 用fork模式启动 app.js 并且传递参数 (-a 23)
pm2 start app.js --name serverone # 启动一个进程并把它命名为 serverone
pm2 stop serverone # 停止 serverone 进程
pm2 start app.json # 启动进程, 在 app.json里设置选项
pm2 start app.js -i max -- -a 23 #在--之后给 app.js 传递参数
pm2 start app.js -i max -e err.log -o out.log # 启动 并 生成一个配置文件
你也可以执行用其他语言编写的app ( fork 模式):
pm2 start my-bash-script.sh -x --interpreter bash
pm2 start my-python-script.py -x --interpreter python
Keymetrics
免费性能监测工具：
$ pm2 monitor
根据提示输入用户名，邮箱，密码进行注册
启动项目后，输入https://app.keymetrics.io/ 登录后即可查看项目状态
ES-Checker
ES6功能检测工具：
$ npm i es-checker -g // 全局安装检测工具
$ es-checker // 红色的代表不支持的功能
创建项目
创建项目目录结构
$ mkdir src
$ mkdir dist
初始化项目并安装依赖
$ npm init
$ npm install --save koa
$ npm install --save-dev @types/koa tslint typescript nodemon
VScode配置
配置tsconfig.json :
打开终端定位到项目根目录
$ tsc --init // 生成tsconfig.json文件
{
"compilerOptions": {
"module": "commonjs",
"target": "ES2017",
"noImplicitAny": true,
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist",
"baseUrl": ".",
"paths": {
"*": [
"node_modules/*",
"src/types/*"
]
}
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}
配置tslint.json :
手动创建tslint文件来检测语法
$ touch tslint.json
{
"rules": {
"class-name": true,
"comment-format": [
true,
"check-space"
],
"indent": [
true,
"spaces",
2
],
"one-line": [
true,
"check-open-brace",
"check-whitespace"
],
"no-var-keyword": true,
"quotemark": [
true,
"single",
"avoid-escape"
],
"semicolon": [
false,
"always",
"ignore-bound-class-methods"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-module",
"check-separator",
"check-type"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
},
{
"call-signature": "onespace",
"index-signature": "onespace",
"parameter": "onespace",
"property-declaration": "onespace",
"variable-declaration": "onespace"
}
],
"no-internal-module": true,
"no-trailing-whitespace": true,
"no-null-keyword": true,
"prefer-const": true,
"jsdoc-format": true
}
}
配置packge.json :
"scripts": {
"start": "npm run serve",
"serve": "node dist/server.js",
"build": "npm run tslint && npm run build-ts",
"build-ts": "tsc",
"watch": "npm run tslint && npm run watch-ts",
"watch-ts": "tsc -w",
"tslint": "tslint -c tslint.json -p tsconfig.json"
}
配置launch.json :
command+shift+p
> Debug: Open launch.json // 选择后自动创建调试用的文件
添加nodemon调试配置 ->
15411523766709.jpg
修改launch调试配置 ->
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node调试",
"runtimeExecutable": "nodemon",
"program": "${workspaceFolder}/dist/server.js",
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
},
{
"type": "node",
"request": "launch", // launch模式
"name": "Launch Program", // 配置名称；在启动配置下拉菜单中显示。
"program": "${workspaceFolder}/dist/server.js", // 程序的绝对路径。通过查看 package.json 和打开的文件猜测所生成的值。编辑此属性
"preLaunchTask": "npm: build", // 调试会话开始前要运行的任务
"outFiles": [
"${workspaceFolder}/dist/**/*.js" // 编译输出文件
]
}
]
}
配置tasks.json :
> Tasks: Configure Task
> 使用模板创建 tasks.json文件
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "build",
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
创建代码文件：
$ cd src
$ touch app.ts
$ touch server.ts
app.ts
import Koa from 'koa'
const app = new Koa()
app.use(ctx => {
ctx.body = 'Hello world!'
})
module.exports = app
server.ts
const app = require('./app')
const server = app.listen(3000, () => {
console.log('Server is running at http://localhost:3000')
console.log('Press CTRL-C to stop \n')
})
module.exports = server
启动TS文件监听：
$ npm run watch
启动nodemon热更新:
15411680347824.jpg
15411680940110.jpg
打开浏览器输入http://localhost:3000/得到以下结果:
15411683356529.jpg
完成，可以开发写API接口啦！O(∩_∩)O哈哈~