3.TypeScript引入[webpack搭建vue3脚手架]

这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战

脚手架git地址 持续更新中....

概览

上一章成功引入vue3（链接），并配置了scss，assets等，基本可以在其上面编写代码了。接下来任务是ts引入。

vue3良好的支持了typescript，配置起来远远比vue2简单，但是有一些细节还是需要我们注意

1. tsconfig.json文件：module、moduleResolution字段的设置
2. vue项目中.d.ts文件创建
3. vue+ts项目引入图片

ts安装与配置文件修改

1. 全局安装ts，然后使用命令来生成配置文件。
2. 项目中安装typescript， 配置ts-loader。

全局安装，生成配置文件

使用以下命令全局安装typescript

npm install -g typescript**

在控制台运行tsc -v, 输出版本号即安装成功

运行以下命令在根目录生成tsconfig.json文件。使用此命令生成的配置文件很全，而且还有注释(不过是英文)，非常方便。

tsc --init

生成tsconfig.json文件之后需要修改几个字段。

项目中配置

接下来要在自己的脚手架中需要安装ts，另外需要配置ts-loader。

webpack配置ts

安装依赖

yarn add typescript ts-loader -D

ts-loader配置

module: {
    rules: [
        {
            test: /\.ts$/,
            use: [
              {
                loader: 'ts-loader',
                options: {
                  appendTsSuffixTo: [/\.vue$/]
                }
              }
            ]
        }
    ]
}

需要配置appendTsSuffixTo选项，使其作用于vue文件中

以上是appendTsSuffixTo的官方解释

shims-vue.d.ts

项目中必须ts声明文件，让ts认识.vue文件。

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

上图是没有.d.ts文件时的报错

项目中导入图片

ts项目中使用图片也需要一定的配置

1. .d.ts中声明图片类型

2. tsconfig.json中配置include

一个简单的例子

接下来就可以再项目中写一个引入图片的简单例子了

<template>
  <div>
    <h1>{{name}}</h1> 
    <img src="~assets/logo.png" alt="">
    <div class="bg"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const name = ref<string>('name')
    return {
      name
    }
  },
})
</script>

<style lang="scss">
  @import './index.scss';
  .bg {
    width: 200px;
    height: 200px;
    background: url("~assets/logo.png");
    background-size: 100% 100%;
  }
</style>

如果要使用上图的~assets需要在webpack中配置路径别名，不管是img中的src还是设置背景都可以使用，十分方便,配置方法如下

resolve: {
    alias: {
      assets: path.resolve(process.cwd(), './src/assets'),
      '@': path.resolve(process.cwd(), './src')
      // asserts: path.resolve(__dirname, '../src/assets')
    }
  }

总结

这一章在脚手架中引入了ts，并且完善了一系列配置。下一章，将在脚手架中引入eslint。