如何进行组件库开发?
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
如何进⾏组件库开发?
市⾯上⽬前已有各种各样的UI组件库,⽐如 Element 和 iView,他们的强⼤⽏庸置疑。
但是我们⾯临的情况是需求越来越复杂,当它们不能再满⾜我们需求的时候,这个时候就有必要开发⼀套属于⾃⼰团队的组件库了。
为何要进⾏组件库开发?
如果你所在的公司对于页⾯的样式没有什么要求,那么你只要随便拿⼀个组件库来⽤就⾏了,⽐如element、iView等等,不⽤再重复造轮⼦了;
如果你⽬前只有个⼈⽤⼀个组件,或者是只对个别组件有要求,那么只要在你的⼯程⾥⾯开发⼀个.vue单⽂件组件就可以了;如果你的团队想要⼀个更加快速的开发⽅式,希望有⼀套⼀类应⽤的标准,并且对组件的样式有较⾼的要求,那么你就需要开发⼀个组件库了。
开发组件库步骤:(
创建项⽬
调整项⽬结构
编写组件
使⽤vue-cli-service库模式打包编译
发布到npm
)
开发步骤:
第⼀步:创建⼀个项⽬
第⼆步:创建完成项⽬之后,你就会在项⽬的根⽬录发现这样的界⾯,之后添加⼀个新的⽂件夹,名为packages,将src⽂件重命名为examples
第三步:将项⽬拖到编译器中,在根⽬录创建⼀个vue.config.js⽂件
第四步:创建packages⽂件夹中的所需⽂件,界⾯如下,编写组件
其中:
|-- datePicker // 新编写的组件,以datepicker为例
|-- theme-default // 主题⽂件
主题⽂件较为特殊,他作为单独的⼀个包进⾏发布引⼊,⽅便进⾏主题发布,后⾯再进⾏介绍。
下⾯对datePicker进⾏介绍:
第五步:
datePicker.vue⽂件代码
datePicker/index.js
批量注册组件
Package/index.js
本地测试组件
我们的组件以及编写完成,第⼀步先在本地进⾏测试:
examples/main.js
如何在浏览器中就可以看到我们的组件运⾏成功了,下⼀步就是要将我们的代码打包成npm库了,那么需要通过vue-cli3中vue-cli-service的库模式进⾏打包。
执⾏ npm run build-lib
修改package.json
根⽬录添加.npmignore⽂件
发布到npm下,只需要lib⽬录、package.json 和readme.md⽂件,所以需要忽略掉其他的⽬录
.npmignore
(.npmignore⽂件是⼀个隐藏⽂件,所以在编译器中不可见,在⽂件根⽬录添加如下代码:)
examples/
packages/
public/
vue.config.js
postcss.config.js
babel.config.js
*.map
登录npm (如果没有npm账号,可以去npm官⽹注册⼀个)最后登录npm官⽹查看,就成功啦。