市面上有各種各樣的vue組件庫，element，vux，iview等等，她們已經(jīng)足夠好了，但是還是要自己嘗試著去寫一些公共組，只是為了讓自己更清晰的了解到整個(gè)組件開發(fā)流程，用這些組件的時(shí)候更加方便

最終效果預(yù)覽地址

項(xiàng)目源碼地址 歡迎star

目前已更新組件
分頁-pagination
加載-loading
單選框-Radio
對話彈框-dialog
按鈕-button
氣泡提示-pop
進(jìn)度條-progress
以上組件樣式參考餓了么UI，組件方法有參考餓了么的地方，也有一些按照自己的思路寫的組件，并沒有餓了么那么高的可配置性，但是夠用

開發(fā)流程

1.頁面文檔

使用vuePress開發(fā)，她能夠很好的嵌入vue組件代碼，使得文檔能夠準(zhǔn)確的加載并預(yù)覽組件，vuePress怎么使用可以看上一篇文章 VuePress搭建永久文檔/博客網(wǎng)站

2.項(xiàng)目配置

package.json文件配置

//package.json 文件配置
"private":false,  //默認(rèn)為true，改為false，否則npm無法提交
"version":0.0.1,  //每次更新都要改下版本號
"main":"dist/rty-vue-components.min.js"  //入口文件，根據(jù)自己打包文件進(jìn)行配置

webpack.base.conf.js 文件配置

//webpack.base.conf.js 文件配置
entry: {
  //配置開發(fā)、生產(chǎn)入口文件，在開發(fā)環(huán)境時(shí)可以實(shí)時(shí)預(yù)覽組件
  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.組件發(fā)布

1.修改版本號
2.確認(rèn)npm是否有同名組件

npm login  //登入npm賬戶
npm publish  //發(fā)布