通用组件库

组件编写：

1. 先用vue脚手架搭建一个项目：

vue create common-component
           

1. package.json里修改部分配置：
   • 为了能够向外部提供组件，须修改private字段的值为false
   • 同时还需要新增main字段，它代表入口文件，指向最终编译后的包文件，在这里其值设置为“./dist/common-component.common.js”
   • 在scripts字段中新增一个命令脚本，如：

在该命令中–target属性表示构建目标，默认为应用模式，这里需要设置为lib，表示启用库模式；–name属性表示构建的名称，可以与package.json文件中的name字段的值不相同；最后一个参数表示入口文件，默认为src/App.vue，在这里我们修改为了./src/index.js

1. 在components下新建CommonTable.vue文件，里面.vue文件名和具体内容自己定义
2. 在src目录下建立一个index.js文件，试着将componets/CommonTable.vue组件导出

   

   

   在上图中可以看出导出的是ComponentsLib，若是还想导出其它的、自己创建的vue文件，可以类似于添加CommonTable组件一样进行添加
3. 在整体common-component文件夹下执行命令行:

npm run build-lib
           

至此通用组件就创建完成啦！！

发布到npm：

1. 首先要有一个npm账号，没有可去官网注册

2. 设置npm的registry地址：在cmd窗口中输入npm config set registry “需要发布的npm地址”

   （我此处发布的为：https://registry.npmjs.org/）

3. 使用账号登录npm：在cmd窗口中输入npm login，后续就按提示输入正确的信息即可

4. npm publish

   （此处执行后可能会报403错误，原因：所要publish的包的name和npmjs网上已经被别人注册了（存在了）。如下图：）

   

   解决方案：去package.json文件里，换把name的值换掉（如果还是出现以上错误，继续重复此解决方案）

   

   publish成功过后，可登录npm官网查看：

   

至此就发布完成啦！！

使用方法：

1. 在其他vue项目中（例如：use-components），首先查看一下镜像源：

   npm config get registry

   如果镜像源不是https://registry.npmjs.org/，则更改为：

1. 在use-components中安装引入一下该通用组件：

npm i common-component12
           

1. 在main.js中导入并注册该组件

1. 在想用的地方使用

   

效果图如下：

至此，本文章结束啦！！