vue开发公共组件并发布到npm

写在前面

作为一名合格的前端开发，想必大家都会有过这样的烦恼：上个项目写过这个功能（组件），这个项目又有相似的需求，又要撸一遍，费时费力还烦人。。。于是我想到了做成公共组件发布到npm上，下个项目使用时直接npm install xxx岂不是美滋滋？想法已经有了，那就开始着手干吧~~

一、搭建精简版（webpack-simple）vue开发模板

注：随着vue-cli3的发布，vue init webpack/webpack-simple xxx的语法已经被新版 vue create xxx所取代，因此，如果你使用的是vue-cli3，需要先行安装@vue/cli-init以便使用vue-cli 2.x版本语法：

vue -V //查看vue-cli版本

npm install -g @vue/cli-init //全局安装@vue/cli-init

官方参考文档：传送门

开始创建vue开发模板：

vue init webpack-simple public-element-prompt-component //创建webpack-simple模板项目

创建成功图示如下：

image.png

创建完成后进入项目目录，安装相关依赖 (cnpm install)，并运行(npm run dev)测试项目是否成功运行。出现以下界面则表示项目创建成功：

image.png

image.png

二、开始开发组件

在src目录下新建文件夹（名字随意），并新建一个.vue文件，图示如下：

image.png

文件代码如下：

三、在组件平级目录下新增index.js文件

代码如下：

import PublicComponent from './PublicComponent.vue'

// Declare install function executed by Vue.use()
export function install(Vue) {
    if (install.installed) return;
    install.installed = true;
    Vue.component('PublicComponent', PublicComponent);
}

// Create module definition for Vue.use()
const plugin = {
    install,
};

// Auto-install when vue is found (eg. in browser via 

执行效果如下：

image.png

image.png

官方文档：传送门

结束语

后续如果有版本更新，只需要修改package.json中的版本号重新发布即可~~

以上就是关于开发vue公共组件并发布到npm的操作步骤，有什么不足之处希望大家不吝评价~~
水平有限，各位看官不要嫌弃哈~~
传送门

感谢浏览~