vite tsx项目的element plus集成 - 按需引入踩坑

前面我们进行了开源组件的自研，很多组件可直接用现成的开源组件库，并不需要自己重复造轮子，为此我们讲如何在当前vite + vitepress + tsx技术整合的项目中实现element plus组件的按需引入，同时解决遇到的一些坑。

安装Element Plus

npm i -S element-plus

插件安装

npm install -D unplugin-vue-components unplugin-auto-import

vite配置

用到了vitepress来展示组件文档，要在文档的vue页面中使用element组件同样需要配置：

docs/.vitepress/config.ts

jsx文件中遇到的坑

在jsx中使用element plus的按需引入方式遇到了一些坑，因为小卷习惯用tsx文件来写组件，发现要按需引入element plus，在tsx文件只存在如下问题：

1. 直接使用<el-xxx>标签无法解析和识别，必须要手动引入下：

   import { ElButton } from 'element-plus'
   

2. 手动引入后，element组件可以被解析渲染，但是样式却不生效，无法被引入

经过实验，发现.tsx文件可以用.vue文件来替换，语法完全保持不变：

写法如下：

<script lang="tsx">
import { defineComponent, ... } from 'vue'
export default defineComponent({
  name: 'XxxComponent',
  setup(...) { ... }
})
</script>

也就是我们只要把原来.tsx文件内容全部原封不动的拷贝到对应.vue文件的<script lang='tsx'></script>标签体中即可。

然后我们就放心的直接使用element提供的组件即可，不需要做任何的导入，直接使用，比如对分页内容的渲染，我们直接使用element提供的<el-button>组件：