尝试在Nuxt.js v2.11.X中支持TypeScript和

image.png

在Nuxt.js v2.11.0 中支持TypeScript和Express.js。

主要环境

• Nuxt.js v2.11.0
• @nuxt/typescript-runtime
• ts-node
• @nuxt/typescript-build
• vue-property-decorator

首先安装以上支持包

nuxt.config.ts 配置

下面是部分配置

import { Configuration } from '@nuxt/types'

const nuxtConfig: Configuration = {
  buildModules: ['@nuxt/typescript-build']
}
module.exports = nuxtConfig

然后添加 TypeScript 配置，在 nuxt.config.ts 的任意位置

typescript: {
    typeCheck: true,
    ignoreNotFoundWarnings: true
},

配置 serverMiddleware

serverMiddleware: [
    { path: '/api', handler: '~/server/index.ts' }
]

这样config的设定就完成了
最终的完整配置文件如下:

import { Configuration } from '@nuxt/types'

const nuxtConfig: Configuration = {
  mode: 'universal',
  buildModules: ['@nuxt/typescript-build'],
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || ' ',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  typescript: {
    typeCheck: true,
    ignoreNotFoundWarnings: true
  },
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/eslint-module',
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  },
  serverMiddleware: [
    { path: '/api', handler: '~/server/index.ts' }
  ]
}
module.exports = nuxtConfig

tsconfig.json 的配置

"types": [
    "@types/node",
    "@nuxt/types",
    "@nuxtjs/axios"
]

不想使用axios的可以关掉axios。
这样tsconfig.json的配置就完成了。

tsconfig.json 的整体配置

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types",
      "@nuxtjs/axios"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

package.json 的配置

配置启动脚本

"scripts": {
    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
    "precommit": "yarn run lint",
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate"
},

Express 端的配置

server/index.ts

import express from 'express'
import bodyParser from 'body-parser'
import routes from './api'
const app = express()

app.use(bodyParser.json())
app.use(routes)

module.exports = app

Server 端的 api
server/api/index.ts

import { Router } from 'express'

import text from './text'

const router = Router()

router.use(text)

export default router

Vue文件的脚本
pages/index.vue

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component({
  components: {
    Logo: () => import('~/components/Logo.vue')
  },
  async asyncData({ $axios }) {
    const data: any = await $axios.$get('api/test')
    return { text: data }
  }
})
class TopPage extends Vue {
}
export default TopPage
</script>

以上使用的是vue-property-decorator，也可以使用 nuxt-property-decorator。

这样设定就完成了。

总结

Nuxt.js的TypeScript支持感觉还不稳定，随着版本升级也总会有一些细节变化。
给人的印象是事情多。

以下是工程模板
https://github.com/baisheng/nuxt-express-ts