vue-cli 中使用 TypeScript

最新推荐文章于 2025-10-24 15:21:53 发布

原创

最新推荐文章于 2025-10-24 15:21:53 发布 · 9.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #typescript #前端

本文详述了在vue-cli项目中引入和配置TypeScript的过程，包括环境设置、.vue文件的改造、Vue Router和Vuex的集成。在遇到ESlint无法校验.vue文件以及部分插件缺少声明文件的问题时，通过调整tsconfig.json配置、添加.d.ts文件以及利用vue-class-component和vue-property-decorator等插件，成功实现了TypeScript在项目中的应用。

学以致用，这篇文章是对在 vue-cli 中使用 TypeScript 的一次小结。

环境

npm

// typescript
npm install typescript --save-dev

// ts-loader
npm install ts-loader --save-dev

webpack.base.conf.js

module.exports = {
  // 修改入口文件
  entry: './src/main.ts',
  // 引入 ts/tsx 文件时不必后缀 
  resolve: {
    extensions: ['.js', '.vue', '.json', '.ts', '.tsx'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    // 对 ts 使用 ts-loader
    {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      use: [
        "babel-loader",
        {
          loader: "ts-loader",
          options: { appendTsxSuffixTo: [/\.vue$/