在npm组件库上发布npm组件

一、初始化项目

打开cmd窗口，执行vue create 项目名称。

二、组件项目目录

初始化完成之后,我们需要创建一个packages目录，存放开源的组件，如果有需求需要展示的文档界面，那么我们可以把src目录改成example。在vue.config.js同级目录创建一个index.js文件，index.js是把packages目录下的组件文件暴露出去的出口。

三、组件库关键代码

1.编写组件

首先我们在packages下创建相对于组件的文件夹，然后创建index.vue文件，编写组件，如果有公共的样式的话，在项目一级目录下创建一个styles目录文件夹，在index.vue引入需要的样式文件。

2. 将组件作为vue插件

在tables目录下创建一个index.js文件，将tables组件作为vue插件。

3.将每个组件暴露出来

在项目的一级目录index.js中将每个组件的index.js文件通过import引入进来，然后通过install.installed检查组件库是否安装到node_modules中，再将全局组件遍历注册（这是重点，如果不注册，怎么把组件暴露出去？），最后通过export把install方法导出，不然怎么能被调用的时候通过Vue.use()方法安装。

 

4.修改package.json文件的配置

name：组件名称

Version：版本号(每发布一次版本，都需要修改版本号，不能重复)

main:指定该npm包引用的入口（文件名应与打包生成的文件名保持一致）

files：指定需要打包的文件夹

description：组件名称

keywords：组件引用的第三方开源组件

lib: （vue-cli-service build --target lib --name tables --dest lib index.js）指定打包的入口

 

四、npm打包发布

1. npm login 注册并登陆npm账号

2.npm run lib 打包

3. Npm publish 发布组件到npm上

注意点：

邮箱必须要先注册

包名不能有大写字母/空格/下划线，不能和npm上已经开源库的名称重复

五、开源库使用

1. 安装依赖

npm i tables

2. 在main.js引入

 在页面中直接调用组件就可以了