基于刮刮卡Vue组件发布一个NPM包

一、前言

项目中需要实现一个刮刮卡的模块，项目结束后沉淀项目时刚好可以把刮刮卡模块封装好，在下次新的项目中要用到时，可以更好的提高项目的效率，当然也更好地提供给其他小伙伴使用。

源码地址：github.com/ZENGzoe/vue… npm包地址：www.npmjs.com/package/vue…

刮刮卡组件的效果如下：

二、刮刮卡vue组件的实现

刮刮卡功能的实现可以分三步：

1. 工作流的搭建

工作流使用的是vue-cli的webpack-simple模版，能够满足组件基本的编译要求：

vue init webpack-simple vue-scratch-card
复制代码

执行后，根据组件录入package.json的信息。

Use sass? (y/N) y
复制代码

在项目这里我选择的是use sass。

在src目录下创建packages目录，用于存放所有的子组件，在本组件中只有一个刮刮卡组件，因此在packages里新建scratch-card目录用于存放我们的刮刮卡组件。如果还有其他子组件，可以继续在packages添加子组件，最终目录如下：

.
├── README.md
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── main.js             //组合所有子组件，封装组件
│   ├── main.js             //入口文件
│   └── packages            //用于存放所有的子组件
│       └── scratch-card    //用于存放刮刮卡组件
│           └── scratch-card.vue   //刮刮卡组件代码
└── webpack.config.js
复制代码

为了支持组件可以使用标签 复制代码

五、总结

发布npm包时，一直提示Package name too similar to existing packages，但是在npm官网中，又没有查到命名相同的包，这个时候就不停的换package.json中的name，最后终于发布成功了，太不容易了～_～