vue制作自己的组件库(仿ElementUI)

1.首先自己创建个新的vue项目,之后更改下目录形式,将src文件更改为examples,这里是专门放组件展示的md文件,packages文件里是放自己写的组件代码

vue制作自己的组件库(仿ElementUI)_第1张图片vue制作自己的组件库(仿ElementUI)_第2张图片

2.然后是开始配置vue.config.js文件 ,其中md-loader是读取md文件的相关配置

 vue制作自己的组件库(仿ElementUI)_第3张图片

vue制作自己的组件库(仿ElementUI)_第4张图片 

 vue制作自己的组件库(仿ElementUI)_第5张图片

 3.配置好了之后,就可以开始写组件了,这里就举个简单的例子,Icon的组件

vue制作自己的组件库(仿ElementUI)_第6张图片Icon组件的字体图标可以从字体图标库自己选择下载,放到fonts文件中,之后在icon.scss中引用,这个就不细说了。

在packages文件下创建icon的相关文件,icon.vue文件中如下这样写:

vue制作自己的组件库(仿ElementUI)_第7张图片

然后再index.js 中

 

 之后在packages文件的总入口index.js中引入就可以了

vue制作自己的组件库(仿ElementUI)_第8张图片

 这样一个Icon组件就开发完了。

4.下面就要测试自己的组件了

vue制作自己的组件库(仿ElementUI)_第9张图片

在main.js里引用自己的组件库,就像引用elementUI一样

 vue制作自己的组件库(仿ElementUI)_第10张图片

之后就可以使用组件了。 

 

你可能感兴趣的:(vue.js,elementui,javascript)