03.05 在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 配置

下面是部分配置

<code>import { Configuration } from '@nuxt/types'

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

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

<code>typescript: {
    typeCheck: true,
    ignoreNotFoundWarnings: true
},
/<code>

配置 serverMiddleware

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

這樣config的設定就完成了最終的完整配置文件如下:

<code>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
/<code>

tsconfig.json 的配置

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

不想使用axios的可以關掉axios。這樣tsconfig.json的配置就完成了。

tsconfig.json 的整體配置

<code>{
  "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"
  ]
}
/<code>

package.json 的配置

配置啟動腳本

<code>"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"
},
/<code>

Express 端的配置

server/index.ts

<code>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
/<code>

Server 端的 apiserver/api/index.ts

<code>import { Router } from 'express'

import text from './text'

const router = Router()

router.use(text)

export default router
/<code>

Vue文件的腳本pages/index.vue

<code>/<code>

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

這樣設定就完成了。

總結

Nuxt.js的TypeScript支持感覺還不穩定，隨著版本升級也總會有一些細節變化。給人的印象是事情多。

以下是工程模板

https://github.com/baisheng/nuxt-express-ts

閱讀更多 劉佰晟 的文章

關鍵字: TypeScript CSS 支持