市面上有各種各樣的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 //發布