使用Elemen加上lang=“ts“后编译报错

当我们在使用Element UI开发Vue项目，并且使用TypeScript等其他语言时，在引入Element UI组件时，需要在script标签中的lang属性指定为ts，例如:

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Button } from 'element-ui';

@Component({
  components: {
    'el-button': Button,
  },
})
export default class MyComponent extends Vue {}
</script>

然而，当我们这样使用时，可能会遇到以下错误：

This relative module was not found: ./Button in ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/ts-loader??ref--0-1!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/my-component.vue?vue&type=script&lang=ts& (error)

原因是在TypeScript中导入Element UI组件时，类型仅支持组件名称小写的形式。因此，应将组件Button更改为button，并更新带有属性的HTML。

例如，将Button更改为button，并将组件传递给HTML属性el-component：

<template>
  <div>
    <el-button>Button</el-button>
    <div :is="el-component">button</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  elComponent = 'el-button';
}

</script>

如果我们需要将Button作为标识符导入，则可以使用as关键字，并将类型声明加上as后面的小写字符串。

例如：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Button as ElButton } from 'element-ui';

@Component({
  components: {
    'el-button': ElButton,
  },
})
export default class MyComponent extends Vue {}
</script>

通过这些方法，我们可以使用Element UI开发Vue项目，并且在使用其他语言时避免错误。