医药行业网站建设,十大网站免费,设计手机商城网站建设,紫色网站模板前面我们进行了开源组件的自研#xff0c;很多组件可直接用现成的开源组件库#xff0c;并不需要自己重复造轮子#xff0c;为此我们讲如何在当前vite vitepress tsx技术整合的项目中实现element plus组件的按需引入#xff0c;同时解决遇到的一些坑。
安装Element Plus…前面我们进行了开源组件的自研很多组件可直接用现成的开源组件库并不需要自己重复造轮子为此我们讲如何在当前vite vitepress tsx技术整合的项目中实现element plus组件的按需引入同时解决遇到的一些坑。
安装Element Plus
npm i -S element-plus插件安装
npm install -D unplugin-vue-components unplugin-auto-importvite配置 用到了vitepress来展示组件文档要在文档的vue页面中使用element组件同样需要配置
docs/.vitepress/config.ts jsx文件中遇到的坑
在jsx中使用element plus的按需引入方式遇到了一些坑因为小卷习惯用tsx文件来写组件发现要按需引入element plus在tsx文件只存在如下问题 直接使用el-xxx标签无法解析和识别必须要手动引入下 import { ElButton } from element-plus手动引入后element组件可以被解析渲染但是样式却不生效无法被引入
经过实验发现.tsx文件可以用.vue文件来替换语法完全保持不变 写法如下
script langtsx
import { defineComponent, ... } from vue
export default defineComponent({name: XxxComponent,setup(...) { ... }
})
/script也就是我们只要把原来.tsx文件内容全部原封不动的拷贝到对应.vue文件的script langtsx/script标签体中即可。
然后我们就放心的直接使用element提供的组件即可不需要做任何的导入直接使用比如对分页内容的渲染我们直接使用element提供的el-button组件
