教你制作自己vue的组件库（仿ElementUI）

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

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

 

 

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

Icon组件的字体图标可以从字体图标库自己选择下载，放到fonts文件中，之后在icon.scss中引用，这个就不细说了。

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

然后再index.js 中

 

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

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

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

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

 

之后就可以使用组件了。 

下一篇：创建UI组件库后上传NPM​​​​​​​