Vue组件发布到npm私服并且搭建web组件库

前言

上回书说到我们使用nexus搭建npm私服但是是以轨迹插件的形式去举得栗子，这次我们创建个vue组件发布到私服上去，这样做的好处就是组件做到了统一的管理维护，并且安装方便

npm私服搭建链接：juejin.cn/post/711939…

vue组件发布到npm私服

创建一个组件

如何创建一个组件想必小伙伴儿们都清楚，但是这一步骤我要说的是为了方便组件维护以及管理组件库，我们需要从kc-design项目中拉取，仓库地址为:https://yourGitLabaddress/frontweb/kc-design如下图所示：

其中packages目录是需要打包的组件目录，将我们封装好的组件放在这里，index.js为打包入口文件其功能为将组件注册到vue全局中

组件打包

项目打包相信大伙儿都门清儿，直接执行npm run build就行 但是我们需要在package.json中修改一下打包文件内容

• --target lib 关键字 指定打包的目录

• --name 打包后的文件名字

• --dest 打包后的文件夹的名称

然后我们执行打包命令，打包完成后会生成kc-design文件夹，其中

• kc-design.css为组件整体样式

• kc-design.common.js为组件的入口文件

组件发布

进入kc-design文件夹下执行npm init，然后生成一个package.json文件(或者直接npm init -y生成默认的package.json文件)

package name: 项目名称version: 版本号description: 项目描述entry point: 项目的入口文件test command: 项目启动的时候要用什么命令来执行脚本文件git repository: git的仓库地址keywirds： 项目关键字（用于方便在npm仓库搜素，由于是私服所以不重要）author: 作者名license: 发行项目需要的证书

具体发布步骤请看使用nexus2.13.0搭建npm私服中的第三步将轨迹插件发布到私服

看完之后相信大伙儿也有了个大概的了解，我们直接执行:

npm use hostnpm publish

可以看到我们已经发布成功了！

组件使用

nrm use groupnpm install kc-design

然后在main.js里引入组件库并使用，其中需要引入kc-design.css样式文件

然后我们在项目中引用：

注意

• 在安装组件前一定要查看一下当前npm源是哪里，安装私服下的组件或插件npm源为group！

  nrm ls //查看当前源nrm use group //使用group源

• 目前组件库的管理我司初步是当成一个项目去做，因为是以lib模式进行打包，代码已经被压缩，打包后无法看到项目结构，并且有可能存在多人协同部署问题，防止版本之间的覆盖，方便组件库的维护，代码回滚等。