开发一套个人vue组件库

市面上有各种各样的vue组件库,element,vux,iview等等,她们已经足够好了,但是还是要自己尝试着去写一些公共组,只是为了让自己更清晰的了解到整个组件开发流程,用这些组件的时候更加方便

最终效果预览地址
项目源码地址 欢迎star

目前已更新组件
分页-pagination
加载-loading
单选框-Radio
对话弹框-dialog
按钮-button
气泡提示-pop
进度条-progress
以上组件样式参考饿了么UI,组件方法有参考饿了么的地方,也有一些按照自己的思路写的组件,并没有饿了么那么高的可配置性,但是够用

开发流程

1.页面文档

使用vuePress开发,她能够很好的嵌入vue组件代码,使得文档能够准确的加载并预览组件,vuePress怎么使用可以看上一篇文章 VuePress搭建永久文档/博客网站

2.项目配置
package.json文件配置
//package.json 文件配置
"private":false,  //默认为true,改为false,否则npm无法提交
"version":0.0.1,  //每次更新都要改下版本号
"main":"dist/rty-vue-components.min.js"  //入口文件,根据自己打包文件进行配置
webpack.base.conf.js 文件配置
//webpack.base.conf.js 文件配置
entry: {
  //配置开发、生产入口文件,在开发环境时可以实时预览组件
  app: process.env.NODE_ENV === 'production' ? './src/components/index.js' : './src/main.js'
}
Sass 配置(可选)
npm install node-sass sass-loader --save-dev
// webpack.base.conf.js
rules: [
      ...
      {
        test: /\.scss$/,
        loaders:['style','css','sass']
      }
]   
3.组件发布

1.修改版本号
2.确认npm是否有同名组件

npm login  //登入npm账户
npm publish  //发布
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 4,892评论 0 1
  • Vue2.0+组件库总结 UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基...
    szch阅读 6,006评论 1 52
  • UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库...
    卞卞村长L阅读 5,732评论 0 8
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    王喂马_阅读 11,532评论 1 77
  • 你也许可以轻而易举地出离很多过去无法出离的东西,你变得不再关心那些被认为是很世俗的事物。你不再翻阅汽车杂志,也不再...
    自由飞翔flyer阅读 2,490评论 0 0

友情链接更多精彩内容