封装一个vue组件

 message-bell
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   └── main.js
└── webpack.config.js

// sumFunction 插件对应组件的名字
import messageBell from './message-bell/message-bell'

// Vue.js 的插件应当有一个公开方法 install 。第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
// 参考：https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6
// 此处注意，组件需要添加name属性，代表注册的组件名称，也可以修改成其他的
 


const messages = {
   install(Vue){
       Vue.component('messageBell', messageBell)
   } 
}
/* 支持使用标签的方式引入 */
if(typeof window !== 'undefined' && window.Vue){
    window.Vue.use(messages);
}
export default messages;

// 执行环境
const NODE_ENV = process.env.NODE_ENV;
console.log("-----NODE_ENV===",NODE_ENV);

// entry: './src/main.js',
 // 根据不同的执行环境配置不同的入口
 entry: NODE_ENV == 'development' ? './src/main.js' : './src/components/index.js',
 /* output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
   filename: 'build.js'
 }, */
 output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
   filename: 'messageBell.js',
   library: 'messageBell', // 指定的就是你使用require时的模块名
   libraryTarget: 'umd', // 指定输出格式
   umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
 },

//"private": true,
"private": false,
"main": "dist/messageBell.js",

//登陆
npm login 
//生成版本号
npm version patch
//上传组件
npm publish
//取消上传
npm unpublish <组件名>