制作了一套自己的組件庫(kù)，并發(fā)布到npm上，項(xiàng)目代碼見https://github.com/hamger/hg-vcomponents

前期準(zhǔn)備

搭建項(xiàng)目

vue init webpack hg-vcomponentscd hg-vcomponentscnpm install

目錄結(jié)構(gòu)

- vue-flag-list  + build   + dist // 存放發(fā)布到npm的代碼   - src     - components // 存放組件源代碼 和 README.md      - arrows         arrows.vue         README.md       - round        round.vue         README.md      index.js // 組件導(dǎo)出文件    - examples // 存放組件的 demo      arrows.vue       round.vue       index.vue // 組件 demo 的入口     - router       index.js // 引入 examples 下的組件，并配置路由     App.vue     main.js   ...

內(nèi)部代碼詳見 GitHub，如果對(duì)你有所幫助，給個(gè)star吧 。

項(xiàng)目配置

為了使項(xiàng)目能上傳到npm上，需要配置一些地方。

build/webpack.base.conf.js

entry: {  app: process.env.NODE_ENV === 'production'   ? './src/components/index.js' // 生產(chǎn)模式下導(dǎo)入文件   : './src/main.js' // 開發(fā)模式下導(dǎo)入文件},

package.json

"private": false, // 因?yàn)榻M件包是公用的，所以 private 為 false"main": "dist/hg-vcomponents.min.js", // 導(dǎo)出文件名，即 import 引入的文件

.gitignore

dist文件夾下文件是要導(dǎo)出的文件，所以在.gitignore文件中把dist/去掉，這樣上傳代碼的時(shí)候也會(huì)更新打包后的文件。

開發(fā)與生產(chǎn)

由于配置了webpack.base.conf.js，使得項(xiàng)目的開發(fā)與生產(chǎn)獨(dú)立開來(lái)。

使用npm run dev進(jìn)入開發(fā)環(huán)境，就可以看到組件的demo，方便調(diào)試。使用npm run build打包組件庫(kù)。

發(fā)布到npm

在你登錄了npm的情況下，在根目錄輸入命令行(每次更新代碼執(zhí)行同樣操作)

npm version patchnpm publish

大功告成！現(xiàn)在你可以在其他地方使用npm install hg-vconponents下載自己寫的組件庫(kù)了。