使用Vue CLI 3将基于element-ui二次封装的组件发布到npm

前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是Vue CLI 3 + element-ui + 多个二次封装的组件。最终想要的是 element-ui 这种感觉的,很多组件可以在不同项目中复用。

安装依赖

首先用Vue CLI 3来初始化项目

安装element-ui

这里使用官方提供的的插件安装: http://element.eleme.io/#/zh-CN/component/quickstart#shi-yong-vue-cli-at-3

https://github.com/ElementUI/vue-cli-plugin-element

在插件列表搜索element

在这里我选的手动导入,图中是全部导入

这样在项目中,就会新建一个plugins文件夹,里面有个element.js 文件,如果想手动引入,就在这里添加要依赖的组件,这里是为了调试组件:

由于我们是基于 的部分组件做的二次封装,所以最好还是按需引入所依赖的组件比较好。

编写组件

在 的同级下面新建 目录,在这里添加自己封装的要发布的组件。 例如,新建 文件夹,再接着新建 文件夹,里面新建 ,在这里写组件的代码:

在 根目录下新建 ,里面注册单独的该组件,方便使用时可以单独引用:

这样一个组件就添加完成了,然后需要在 的根目录下添加一个总的 ,这里是全局注册的地方,使用时可以全局引入,其实就跟 的两种方式一样:

后面再添加组件,在这里也要再注册一下,而 源码中是动态引入的,我们的项目组件还没那么多,可以先一个个手动引入,如果后面数量多了,不好维护,可以参考 的源码实现,我在这里做了一些简单的解释。

配置 npm

在 package.json 里面的 script 里面加一个 lib选项,方便每次构建:

其中 后面是你最后想要生成文件的名字,并用 修改了构建的目录。 然后在 里面添加一些npm包发布的相关信息,比如作者、版本等: 其中最重要的是:

这里的路径要和上面构建出来的目录和文件名对应上。

里面的配置项,在网上找了个例子:

发布到npm

到这块后面的网上有很多更细致的教程,我就不在这里赘述了。下面给出两个文章的链接,供参考。

1、到npm上注册一个账号

2、登录

3、添加用户信息

4、发布到远程仓库(npm)上

5、删除远程仓库的包

参考:

(https://juejin.im/post/5bc44175f265da0a906f9869)[Vue cli3 库模式搭建组件库并发布到 npm的流程vue.js脚本之家]

(https://www.jb51.net/article/148692.htm)

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181107G15AE900?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券