美文网首页Vue.js专区VueJS
开发一套个人vue组件库

开发一套个人vue组件库

作者: RtyXmd | 来源:发表于2018-12-04 14:19 被阅读668次

    市面上有各种各样的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  //发布
    

    相关文章

      网友评论

      本文标题:开发一套个人vue组件库

      本文链接:https://www.haomeiwen.com/subject/ewvdqqtx.html