文章摘要： 这是一个将Typescript与node框架（本模板暂时只支持koa，后续可以支持express，或者使用者自行配置）、以及vue同构框架nuxt结合的模板。
前言
我们经常可以看到有很多文章对nuxt、next、nest这三个node框架进行对比分析，大部分文章中都提及nest最大的优点：使用TypeScript构建,保留与纯JS的兼容性，集OOP（面向对象编程）,FP（函数式编程）,FRP（响应式编程）一身。
所以我在想，难道只有nest能做这样的框架设计吗？于是我开始对nuxt 2.x版本（笔者对nuxt的感情比较深）进行研究改造，让nuxt也能拥有像nest那样优秀的框架设计。最终，我通过结合nuxt、routing-controllers、typedi等框架终于实现了。
如果想直接体验改造完成后的模板，可以安装xinsirnuxt-cli脚手架进行初始化项目：
npm i xinsirnuxt-cli -g
xinsirnuxt-cli i
或者直接clone xinsirnuxt模板 gitee地址：gitee.com/xinsiroffic…
git clone https://github.com/xinsira/xinsirnuxt
git clone https://gitee.com/xinsiroffice/xinsirnuxt
如果觉得这个模板对你有帮助，请帮忙给这个项目点个star（比心❤️）。
接下来就是改造过程：
1.安装routing-controllers脚手架
npm i routing-controllers-cli -g
2.初始化一个routing-controllers的项目（备用）
执行：
routing-controllers-cli
3.初始化一个nuxt项目
建议使用我这个版本的，自带server文件夹，不需要自己再去单独配置；建议选择koa框架，因为本教程是以koa来进行改造
npx create-nuxt-app@2.9.2 projectname
4.将routing-controllers的src文件夹整个copy到nuxt项目中
5.gitignore将server文件夹设置为忽略，同时将server文件夹删除
...
# ts-node编译后生成server
server
...
6.安装依赖
npm i @nuxt/types class-transformer class-validator kcors reflect-metadata routing-controllers typedi -S
npm i @types/koa @types/node nodemon tsc-watch typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser -D
7.添加tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"moduleResolution": "node",
"outDir": "server", // 第5步设置gitignore的原因所在，并且这里也是个小技巧，自己体会
// "lib": [
// "ESNext",
// "ESNext.AsyncIterable",
// "DOM"
// ],
// commonjs
// "target": "esnext",
// "module": "esnext",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
// "strict": true,
// "noEmit": true,
"types": [
"@nuxt/types",
"@types/node"
]
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
".nuxt",
"dist"
]
}
8.修改执行命令 package.json
需要先将ts编译成js才能启动项目，同时添加ts实时编译
...
"scripts": {
"dev": "cross-env NODE_ENV=development && tsc && tsc-watch --onSuccess \"nodemon ./server/index.js\"",
"build": "tsc && nuxt build",
...
9.将nuxt的配置文件nuxt.config.js修改
（1）将nuxt.config.js后缀改成.ts，并挪进src目录下 （2）nuxt.config.js中使用了commonJS语法，需要改成AMD；其实就是把module.exports = 改为 export default （3）添加一个变量
dev: process.env.NODE_ENV !== 'production'
10.在src/app.ts中添加nuxt配置，同时将其改为index.ts
ps1：当然你可以新建文件夹来更好的规划你的server目录，比如将启动文件放在bin文件夹，你的app.ts只有执行的代码（扯远了，这块自己改造吧）。
ps2：启动必须用一个函数包起来，不然没法保证执行顺序（await）
ps3：备注写的都比较清楚，应该可以看得懂
// index.ts
...
import { Nuxt, Builder } from 'nuxt'; // 添加nuxt
import config from './nuxt.config'; // 添加nuxt配置
...
// 在createKoaServer 或者 useKoaServer后
// 先匹配接口路由，再匹配页面路由
const nuxt = new Nuxt(config);
await nuxt.ready();
// Build in development
if (config.dev) {
const builder = new Builder(nuxt);
await builder.build();
}
app.use((ctx) => {
if (ctx.status !== 404) { // 200，说明是接口路由，如果不return，会被下面的覆盖
return;
}
ctx.status = 200;
ctx.respond = false; // Bypass Koa's built-in response handling
ctx.req.ctx = ctx; // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash
nuxt.render(ctx.req, ctx.res);
});
11.项目启动
npm run dev
（1）http://127.0.0.1:3000 访问了xinsirnuxt的首页 （2）http://127.0.0.1:3000/user 访问了demo中的user接口 简单的改造到此处就大功告成了，你就可以用ts进行开发啦～
