制作了一套自己的組件庫，并發布到npm上，項目代碼見https://github.com/hamger/hg-vcomponents
vue init webpack hg-vcomponents cd hg-vcomponents cnpm install
目錄結構
- vue-flag-list
+ build
+ dist // 存放發布到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' // 開發模式下導入文件
},
package.json
"private": false, // 因為組件包是公用的，所以 private 為 false "main": "dist/hg-vcomponents.min.js", // 導出文件名，即 import 引入的文件
.gitignore
dist文件夾下文件是要導出的文件，所以在.gitignore文件中把dist/去掉，這樣上傳代碼的時候也會更新打包后的文件。
開發與生產
由于配置了webpack.base.conf.js，使得項目的開發與生產獨立開來。
使用npm run dev進入開發環境，就可以看到組件的demo，方便調試。使用npm run build打包組件庫。
發布到npm
在你登錄了npm的情況下，在根目錄輸入命令行(每次更新代碼執行同樣操作)
npm version patch npm publish
大功告成！現在你可以在其他地方使用npm install hg-vconponents下載自己寫的組件庫了。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
