2023年7月7日发(作者：)

⼿把⼿教你如何构建Vue前端组件库

在前端开发中可能会遇到将相同的功能模板集合成⼀个组件，供他⼈调⽤，这样可以减少重复造轮⼦，也可以节约⼈⼒、财⼒，更能够提⾼代码的可维护度；下⾯将通过详细的步骤教你如何构建⼀个Vue前端组件。1、在本机上安装好NodeJs，并配置好环境变量　　（1）NodeJs的下载地址：

　　我这⾥是下载64位Windows安装包(.msi)，⼤家可以根据⾃⼰电脑系统选择相应的版本即可。　　　　（2）下载NodeJs后双击它，采⽤默认设置，⼀直点击下⼀步，直到Finish为⽌。需要说明的是，在安装NodeJs时，已经设置好了系统环境变量，此外npm⼯具也同时被安装好了，我们可以在cmd窗⼝中输⼊node -v命令和npm -v命令查看，若都安装成功了话，会看到如下的效果：

　　（3）设置全局包存放路径，这⾥不采⽤默认路径，通过npm命令来实现⽬录的修改，我这⾥是将全局包存放⽬录放置在NodeJs的安装⽬录下：⾸先在NodeJs的安装根⽬录下创建两个⽂件夹：node_global和node_cache，前者是⽤来存放下载的全局包，后者是⽤来存放node的缓存在cmd窗⼝中分别输⼊这两条命令，完成对node_global和node_cache的设置：　　 npm config set prefix "E:Program Filesnodejsnode_global" npm config set cache "E:Program Filesnodejsnode_cache"　　最后我们可以通过npm config list命令查看⼀下刚才的配置，若有如下信息，则表明设置成功了。　　　　以上就是NodeJs环境的安装和配置情况，若你的电脑之前已经安装好NodeJs，可以省略上⾯这些过程；接下来我们试试下载vue模块。2、下载vue模块　　（1）在cmd窗⼝中输⼊npm i -g vue命令，就可以等待下载vue模块了，此时可能会下载失败，如下图所⽰：　　　　　　在设置好registry地址后，重试npm i -g vue命令，下载成功后如下图所⽰：　　　　（2）为了能够使⽤vue命令，我们还的安装⼀下vue的脚⼿架vue-cli，在cmd窗⼝中输⼊npm i -g vue-cli，敲⼊回车键后就开始下载了，等到下载完成后会出现如下图的类似信息：　　　　从上图中可知Vue CLI的版本是2.9.6。3、开始创建组件库⼯程　　（1）在cmd窗⼝中输⼊vue create bienVueCom，敲回车键后结果收到这样的提⽰信息，如下图所⽰：　　　　原来是vue create命令只是Vue CLI 3版本的命令，Vue CLI 2.9.6版本不⽀持该命令；于是按照提⽰修改即可，⾸先在cmd窗⼝中输⼊npm uninstall -g vue-cli命令，卸载现有的vue-cli脚⼿架；等卸载完后再输⼊npm i -g @vue/cli开始安装，等待安装完后信息如下图所⽰：　　（2）现在可以正式创建组件库⼯程了，在cmd窗⼝中输⼊vue create bienVueCom，回车后提⽰如下图所⽰：　　　　既然⼯程名称不能包含⼤写字母，那么我们采⽤短横线来链接，如：bien-vue-com；修改好名称后按下回车键，后续的步骤就使⽤默认设置，若有需要就按回车键即可；接着就是静静地等待⼯程⾃动创建完毕。最终成功时的效果如下图所⽰：　　　　我们进⼊bien-vue-com⽬录中，可以看到默认的⼯程⽬录结构如下图所⽰：　　　　我们⾸先看看⽂件的默认内容都有哪些配置参数，如下图所⽰：　　　　针对这些默认配置项，基本上可以不⽤修改，不过为了能够向外部提供组件，须修改private字段的值为false，同时还需要新增main字段，它代表⼊⼝⽂件，指向最终编译后的包⽂件，在这⾥其值设置为“./dist/”；此外，在scripts字段中新增⼀个命令脚本，如："build-lib": "vue-cli-service build --target lib --name bien-vue-com./src/"；在该命令中--target属性表⽰构建⽬标，默认为应⽤模式，这⾥需要设置为lib，表⽰启⽤库模式；--name属性表⽰构建的名称，可以与⽂件中的name字段的值不相同；最后⼀个参数表⽰⼊⼝⽂件，默认为src/，在这⾥我们修改为了./src/。最终的修改情况如下图所⽰：　　　　接下来，我们在src⽬录下建⽴⼀个⽂件，我们试着将componets/组件导出，⽽是构建⼯程时默认⽣成的。下图是⽂件的内容：　　 　 在上图中可以看出导出的是ComponentsLib，若是还想导出其它的、⾃⼰创建的vue⽂件，可以类似于添加HelloWord组件⼀样进⾏添加。接着在bien-vue-com⽬录下打开cmd窗⼝，输⼊npm run build-lib命令，编译结果如下图所⽰：　　　　在bien-vue-com的⽬录下会⽣成dist⽂件夹，其⾥⾯的⽂件如下图所⽰：　　 　　到此，组件已经完成构建了。4、发布组件到npm　　由于我没有弄具体的账号了，在这⾥说⼀下步骤吧，在bien-vue-com⽬录下打开cmd窗⼝。 　（1）设置npm的registry地址：在cmd窗⼝中输⼊npm config set registry “需要发布的npm地址” 　（2）使⽤账号登录npm：在cmd窗⼝中输⼊npm login，后续就按提⽰输⼊正确的信息即可。　 （3）发布：在cmd窗⼝中输⼊npm publish，按下回车键即可。 5、测验组件库效果　　我在另外⼀个前端⼯程中集成刚⽣成的组件，本来是需要通过npm命令来下载的，这⾥就不做下载处理了，直接将⽣成好的组件整理放在⼀个⽂件夹中，该⽂件夹的名称就是包名称，也就是⽂件中name字段所对应的值，在这⾥就是bien-vue-com⽂件夹名称。将⽣成的dist⽂件夹拷贝到刚才新建的⽂件夹bien-vue-com，同时还需要将和⽂件也拷贝到bien-vue-com⽂件⾥，整体情况如下图所⽰：　　 　　接着将新建的bien-vue-com⽂件拷贝到⽬标⼯程的node_modules⽬录下，如下图所⽰：　　 　　然后在⽬标⼯程的⽂件⾥找到dependencies配置项，在其中添加"bien-vue-com":"0.1.0"配置项，然后在⽬标⼯程的⽂件中引⼊该组件，如下图所⽰：　　 　　最后，在⽬标⼯程中新建⼀个⽂件，⽤来调⽤引⼊的组件，其内容如下图所⽰：　　 　　所有的配置都准备好后，此时就是运⾏⽬标⼯程，看看实际调⽤组件的效果，如下图所⽰：　　 　　⾃此，整篇⽂章已介绍完了如何构建组件库，如何使⽤组件库的全部流程了，基本上能够满⾜实际项⽬需求了。6、调试组件库　　开发过程中需要调试构建的组件库，为了能够让组件库编译好后直接输出到⽬标⼯程中的node_modules⽬录下，同时也为了能够⽀持⽬标⼯程实时看到更新组件库后的变化情况，我们可以在组件库中这样设置：　　（1）在构建组件库的⼯程跟⽬录下建⽴⼀个⽂件，也就是让该⽂件与⽂件处于同⼀级，如下图所⽰：　　　　（2）在⽂件中新增如下内容：

　　（3）在组件库⼯程的⽂件中添加脚本命令，如下图所⽰：　　

------20191213闪