使用场景：多项目开发对公共的组件抽离成组件库引入；

eg: 多项目需要引入common项目中的组件。

project1、project2、.......。对于common包的引入方式可以分为一下几种。

引入组件库的几种方式

1、通过git引入

应用场景

本地开发中引入git地址依赖

package.json

"包名称": "git+username%40qq.com:password@gitee.com/xxxx.git"

npm 、cnpm、yarn 一般用yarn安装成功

如果引入不成功：查看nodemoudles下目录依赖入口是否存在

main.js

import xxxx from '包名称'

2、npm link

应用场景

本地开发项目关联，优点是本地开发方便，引入的包更改（common）本地build一下其他项目就可以生效。

project1

引入相对路径：npm link ../common （我这里是相对路径）

main.js

import xxxx from '包名称'

全局命令

1. 全局安装link包，在common 包下 npm link
2. 其他项目引入link包，npm link 包名（common, common打包其他引入的项目生效）
3. 删除全局link包，npm unlink 包名

3、发布npm包

应用场景

将封装的组件库发布到npm上，项目内通过npm包引入

基于vue-cli使用

新建目录plugins, 里面封装好组件并提供js文件将其export出来，目录结构如下

plugins下的entry.js文件用来作为组件库打包的入口，其作用是引入全部组件，并为组件拓展install方法。

// 引入当前子文件夹下的index.js
const moduleFiles = require.context('./', true, /index.js$/i),
    components = moduleFiles.keys().map(modulePath =>
        // 获取到组件信息
        moduleFiles(modulePath).default 
    )

// 拓展全局注册组件的方法
const install = function (Vue) {
    components.forEach(component => {
        Vue.component(component.name, component);
    });
}

const assignObj = Object.assign({ install }, ...components.map(x => {
    // 给组件拓展install方法，用来允许按需引入
    x.install = (Vue) => {
        Vue.component(x.name, x);
    }
    return {
        [x.name]: x
    }
}))

export default assignObj;

配置打包命令

"lib": "vue-cli-service build --target lib --name dwd-plugins --dest lib --entry src/plugins/entry.js"

// target: 默认为构建应用，改为 lib 构建库模式

// name: 输出文件名

// dest: 输出目录

// entry: 入口文件

修改package.json

此时我们需要修改main字段为打包后的lib目录下文件, 还能配置插件描述和关键字等信息。

"main": "lib/dwd-plugin.common",

"description": "基于element-ui二次封装的功能组件",

"keywords": [

"区域选择器",

"倒计时",

"下拉选择器"

]

发布到npm上

1. 发布前检查项目名称全部小写或者kebab-case短横线命名，删掉package.json中的private字段。
2. 检查npm下载源，如果是淘宝镜像需要改回npm

查看下载源：npm get registry

设置npm命令：npm config set registry registry.npmjs.org/

设置淘宝镜像： npm config set registry registry.npm.taobao.org

1. 首先在在npm上注册好账户
2. npm login 登录，输入用户名密码邮箱，然后进行邮件验证码验证
3. 登陆成功 npm publish 发布， 出现包名加版本号，即发布成功
4. 其他项目 npm i 包名 安装引入