Vue组件开源发布到Npm

前言

在开发项目过程中，通常会用到很多功能和设计相类似的组件，为了避免重复造轮子，各种复制代码，我们就需要用到一些第三方组件库，我们一直使用别人开源的库，那么我们今天自己开源一个属于自己的库。

Npm:vc-view

一、初始化项目

在初始化项目之前，首先需要安装node.js，相信各位同学都会。创建一个文件夹，在文件夹下打开cmd窗口，执行vue create 项目名称。初始化完项目，通过npm run dev让项目跑起来。如下图，这样第一步工作才算完事。

二、组件项目目录

初始化完成之后,我们需要创建一个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()方法安装。

index.js目录

index.js文件

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

name：组件名称

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

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

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

lib: 指定打包的入口

package.json

四、npm打包发布

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

2.npm run lib 打包

3. Npm publish 发布组件到npm上

注意点：

邮箱必须要先注册

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

五、开源库使用

1. 安装依赖

npm i vc-view

2. 在main.js引入

main.js

3. 在页面调用

页面.vue

4.效果