制作了一套自己的组件库, 并发布到 npm 上, 项目代码见 https://github.com/hamger/hg-vcomponents
前期准备
有一个 npm 账号
安装了 vue-cli
搭建项目
- 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 下载自己写的组件库了
来源: http://www.jb51.net/article/135114.htm