Vue自学之路(3)——Typescript 的支持

        本系列文章详细阐述基于Vue 3.X + Webpack 5.X，从徒手搭建项目开始到各个常用插件的配置和应用，目的是让学习者能快速掌握项目结构及vue的开发要领。

1. 概述

        本文介绍 Typescript 的安装和配置

2. 插件安装

        执行下列脚本安装相关插件

npm i typescript@4.6.3 -S
npm i ts-loader@9.2.8 tslint@5.20.1 tslint-config-standard@9.0.0 tslint-loader@3.5.4 -D
npm i vue-class-component@7.2.6 vue-property-decorator@9.1.2 --force -S

        其中，vue-class-component 和 vue-property-decorator 是实现按需导入效果的插件

3. Webpack配置

        在webpack.config.js文件中，增加如下代码

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      })  
  ],
  module: {
      rules: [
          {
              test: /\.ts$/,
              exclude: /node_modules/,
              enforce: 'pre',
              loader: 'tslint-loader'
          },
          {
              test: /\.tsx?$/,
              loader: 'ts-loader',
              exclude: /node_modules/,
              options: {
                  appendTsSuffixTo: [/\.vue$/],
              }
          }
      ]
  }
}

4. 配置文件 tsconfig.json

        执行下列脚本初始化 tsconfig.json 配置文件

npx tsc --init

        这里使用 npx 指令而非直接用 tsc ，是因为安装的 typescript 未采用全局安装。

5. 问题排查

        安装 ts 过程中遇到一些兼容性问题，详见如下文章

Vue自学之路（10）——安装配置报错排查集锦