在nuxt项目中引入typescrip以及composition Api

前端入门_1024
571 阅读2分钟

前言

本文讲述如何在现有nuxt项目下支持TypeScript和composition Api的方式编写代码。

如果是新项目，建议直接使用create-nuxt-app脚手架生成，再无需重复做本文的步骤。

另外，接入TypeScript和composition Api都是向下兼容的，即只会针对声明 lang="ts"的.vue文件或.ts文件进行类型检查，已有的代码不受影响。

环境说明

再引入TypeScript主要的问题基本都是安装包的版本问题引起的，根据自己的当前的环境安装正确的依赖包版本。

运行环境：

  • MacOS Monterey 12.0.1
  • Node v14.17.2

依赖版本：

  • nuxt @2.12.2
  • vue @2.6.14
  • typescript @4.9.3
  • @vue/composition-api @1.7.1
  • @nuxt/typescript-build @2.1.0
  • @nuxtjs/eslint-config-typescript @6.0.1
  • eslint @7.32.0
  • @babel/preset-env @7.9.0

操作

支持TypeScript

  1. 安装依赖
yarn add --dev @nuxt/typescript-build @nuxt/types
  1. 配置nuxt.config.js
export default {
  ...
  buildModules: [
+     '@nuxt/typescript-build',
  ],
  ...
}
  1. 添加tsconfig.json
{
    "compilerOptions": {
      "target": "ES2018",
      "module": "ESNext",
      "moduleResolution": "Node",
      "lib": [
        "ESNext",
        "ESNext.AsyncIterable",
        "DOM"
      ],
      "esModuleInterop": true,
      "allowJs": true,
      "sourceMap": true,
      "strict": true,
      "noEmit": true,
      "baseUrl": ".",
      "paths": {
        "~/*": [
          "./src/*"
        ],
        "@/*": [
          "./src/*"
        ]
      },
      "types": [
        "@types/node",
        "@nuxt/types",
        "@nuxt/axios"
      ],
      "skipLibCheck": true
    },
    "exclude": [
      "node_modules",
      "dist",
      ".nuxt"
    ]
  }

Typescript tsconfig.json全解析 4. 增加类型文件

// 根目录下创建 types/vue-shim.d.ts
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}
  1. 验证
<template>
    <div>{{ message }}</div>
</template>

<script lang="ts">
export default {
    data() {
        return {
            message: 'Typescript Test'
        }
    }
};
</script>

然后运行项目，查看是否能正常运行

修改Eslint

查看当前版本，我的是@7.32.0

  1. 安装@nuxtjs/eslint-config-typescript
yarn add --dev @nuxtjs/eslint-config-typescript@6.0.1

根据自己当前的eslint版本来下载@nuxtjs/eslint-config-typescript 2. 检查是否有eslint-plugin-vue 如果项目下有eslint-plugin-vue依赖，首先需要移除.

yarn remove eslint-plugin-vue
  1. 替换vue-eslint-parser

因为这样做会使ESlint 使用( @typescript-eslint/parser) 当作语法分析器，请确保 parserOptions.parser 这个选项并没有被其他的扩展(extends) 设定给覆盖。 如果你正在使用 babel-eslint 当作你的语法分析器，请把他从 .eslintrc.js 和你的依赖套件中移除。

因为我的项目下用的语法解析器是vue-eslint-parser，所以我在.eslintrc.js先挂下移除了vue-eslint-parser

// .eslintrc.js
...
    extends: [
        ...
-       "plugin:vue/recommended",
+       "@nuxtjs/eslint-config-typescript",
        ...
    ]
-   parser: "vue-eslint-parser",
...
  1. 验证 先在刚刚创建的test页面随便写一个未使用的变量会导致lint失败的代码
// test.vue
+ const a = 2;
// 'a' is assigned a value but never used.

如何在开发时就能收到eslint的报错信息可以看这篇文章，(前端工程化)[juejin.cn/post/712953…] 5. 开发环境是检查TS错误

如果想要在开发环境时检查TS的相关错误，那么可以在nuxt.config.js中添加

module.exports = {
    ...
+    typescript: {
+        typeCheck: {
+            eslint: {
+                files: "./**/*.{ts,js,vue}",
+            },
+        },
+    },
    ...
}

引入composition Api

  1. 安装 @vue/composition-api
yarn add @vue/composition-api
  1. 使用
//在 plugins文件下创建composition-api.js文件
import Vue from "vue";
import vueCompositionApi from "@vue/composition-api";

Vue.use(vueCompositionApi);
  1. 配置
// 根目录下nuxt.config.js
...
plugins: [
    ...
+   "@/plugins/composition-api",
],
...
  1. 验证
<template>
    <div>
        {{ message }}
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "@vue/composition-api";

export default defineComponent({
    setup() {
        const message = ref("This is a message");

        return {
            message,
        };
    },
});
</script>

参考

avatar
文章
阅读
粉丝