elementui中有导出组件吗_[Vue TypeScript ElementUI 自定义组件]

如标题的关键字所述，我会教你如何在 Vue + TypeScript + ElementUI 里面再自定义其他组件，并导入项目使用

首先搭建 Vue + TypeScript + ElementUI

其实要不要 elementUI 无所谓，他只是演示了如何引入第三方组件库

看我的这篇文章即可，有问题留言tqz：[vue typescript ElementUI] 安装过程​zhuanlan.zhihu.com

然后自定义组件

先看最终的目录，我是直接将脚手架自带的 HelloWorld 组件重新修改成规范化的组件形式

如图所示，在 components 下面创建 index.ts 它是用来导出 components 文件夹里面全部组件的文件，然后在 components 下面创建组件 HelloWorld，并创建图示的4个文件。注意：因为我使用的 CSS 预处理器是 stylus，所以我创建的是 HelloWorld.stylus 文件，你们要是 Less 的话就创建 HelloWorld.less。

现在我粘贴一下这几个文件里面的内容，一看就懂

首先是 HelloWorld 文件夹下面的文件内容

HelloWorld.vue

{{ msg }}

@import url('./HelloWorld.stylus');

HelloWorld.ts

import { Component, Prop, Vue } from "vue-property-decorator";

@Component

export default class HelloWorld extends Vue {

@Prop() private msg!: string;

}

HelloWorld.stylus

h3 {

margin: 40px 0 0;

}

ul {

list-style-type: none;

padding: 0;

}

li {

display: inline-block;

margin: 0 10px;

}

a {

color: #42b983;

}

index.ts

import HelloWorld from './HelloWorld.vue'

export { HelloWorld }

可以发现我就是将原来的一整个 HelloWorld.vue 拆开成多个文件了。这样有利于简化单个文件的代码长度，便于阅读。

然后是最外面的 components 文件夹里面的内容

export { HelloWorld } from './HelloWorld'

到这里为止，组件的创建过程就结束了，要是再想创建其他组件也是一样的过程，我总结一下这个过程：在 components 文件夹里面创建组件文件夹，然后创建那 4 个文件

填写这 4 个文件的基础内容

在 components 根目录下的 index.ts 里面导出本组件

最后使用组件

我这就是使用这个 HelloWorld 组件了，首先，你把 Home.vue 里面的这些注释掉，如图

因为我要直接演示在 App.vue 里面操作，这里的就不管了。

然后打开 App.vue，如图导入并使用组件(我删除了一些原有的代码，看起来简洁多了)

我最后在 msg 里面添加了个 6666666，用来测试组件是否定义成功

启动服务：npm run serve

搞定！

以上步骤不是死的，但是大概就是这么搞的，我的总结就是通过多个 index.ts 文件将组件层层导出，然后在适当的地方导入并使用