制作了一套自己的組件庫，并發(fā)布到npm上，項目代碼見https://github.com/hamger/hg-vcomponents
vue init webpack hg-vcomponentscd hg-vcomponentscnpm install
目錄結構
- vue-flag-list + build + dist // 存放發(fā)布到npm的代碼 - src - components // 存放組件源代碼 和 README.md - arrows arrows.vue README.md - round round.vue README.md index.js // 組件導出文件 - examples // 存放組件的 demo arrows.vue round.vue index.vue // 組件 demo 的入口 - router index.js // 引入 examples 下的組件，并配置路由 App.vue main.js ...
內部代碼詳見 GitHub，如果對你有所幫助，給個star吧 。
為了使項目能上傳到npm上，需要配置一些地方。
build/webpack.base.conf.js
entry: { app: process.env.NODE_ENV === 'production' ? './src/components/index.js' // 生產模式下導入文件 : './src/main.js' // 開發(fā)模式下導入文件},package.json
"private": false, // 因為組件包是公用的，所以 private 為 false"main": "dist/hg-vcomponents.min.js", // 導出文件名，即 import 引入的文件
.gitignore
dist文件夾下文件是要導出的文件，所以在.gitignore文件中把dist/去掉，這樣上傳代碼的時候也會更新打包后的文件。
開發(fā)與生產
由于配置了webpack.base.conf.js，使得項目的開發(fā)與生產獨立開來。
使用npm run dev進入開發(fā)環(huán)境，就可以看到組件的demo，方便調試。使用npm run build打包組件庫。
發(fā)布到npm
在你登錄了npm的情況下，在根目錄輸入命令行(每次更新代碼執(zhí)行同樣操作)
npm version patchnpm publish
大功告成！現(xiàn)在你可以在其他地方使用npm install hg-vconponents下載自己寫的組件庫了。
新聞熱點
疑難解答
