编译源码如何引入elementui等组件？

欢乐树

import { createApp } from 'vue';
import App from "./App.vue";
import {loadComponent} from '@o2oa/component';

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)

loadComponent('custom.classroom', (d, cb)=>{
    createApp(App).mount(d);
    cb();
}).then((c)=>{
    c.render();
});
我按照O2OA视频官网前端vue3框架搭建，已经弄好显示出来了。但是我按照全局引入的方式引入了elementui+组件，但是无法使用啊，我在helloword.vue里面替换了elementui+组件不生效。。

论坛管理员

您说的无法使用是什么意思？能不能详细描述一下现象是什么，是否有报错信息之类的？

欢乐树

论坛管理员 发表于 2022-4-12 09:43
您说的无法使用是什么意思？能不能详细描述一下现象是什么，是否有报错信息之类的？ ...

elementui 按照我的截图是可以使用，但是基于vue3的element plus 无法使用，里面树形组件使用了typeScript语法，需要在<script lang= "ts" steup><script>加上lang="ts"，
但是加上以后，从其他地方import的o2组件就报错。去掉lang="ts"，typeScript语法又报错, o2组件恢复正常。

欢乐树

论坛管理员 发表于 2022-4-12 09:43
您说的无法使用是什么意思？能不能详细描述一下现象是什么，是否有报错信息之类的？ ...

还有一个问题，数据表格名称每次一刷新每一列的名称全部变成一样的了，这个怎么办呢。。

Tommy

o2component使用ElementPlus是可以的。
ElementPlus并没有限制必须使用Typescript，你完全可以自己选择使用Javascript或Typescript。
你说的树形组件使用了Typescript语法，我估计是你看的是ElementPlus官方文档的样例。有两个方法解决你的问题：
1、将<script steup>中的代码改写为Javascript。
2、给组件添加vue-Typescript支持。在组件目录下使用 vue add typescript 命令，然后按提示安装Typescript插件。然后在生成的src/shims-vue.d.ts文件中增加 declare module '@o2oa/component'; 再根据编译的提示，修改相关代码，以符合Typescript语法规范。

另外，你引入ElementPlus 的main.js文件代码应该是这样的：

[JavaScript] 纯文本查看 复制代码

import { createApp } from 'vue';
import App from "./App.vue";
import {loadComponent} from '@o2oa/component';

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

loadComponent('test.euip', (d:any, cb:any)=>{
    const app = createApp(App);
    app.use(ElementPlus);
    app.mount(d);
    cb();
}).then((c:any)=>{
    c.render();
});

欢乐树

Tommy 发表于 2022-4-14 15:16
o2component使用ElementPlus是可以的。
ElementPlus并没有限制必须使用Typescript，你完全可以自己选择使用 ...

谢谢你呀~~下次我试试，我已经用vue2做完了。。

论坛管理员