文章介绍了如何创建一个Vue项目，改用examples存放组件展示，用packages编写组件代码。配置vue.config.js以支持MD文件，以Icon组件为例，详细讲解组件开发过程，包括字体图标的引用和组件的编写、导出。最后，在main.js中引用组件库，并预告了如何将组件库上传到NPM。
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
扫一扫
1037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
