基于vue-cli3创建libs库的实现方法

components.forEach(component => {
Vue.component(component.name, component)
})
}

// 如果是直接引入的
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}

export default {
// 使用Vue.use必须具有install方法
// https://cn.vuejs.org/v2/api/#Vue-use
install,
// 同时导出组件列表
...components
}

在examples中的入口文件main.js引入注册的全局组件。

//main.js
...
import libs from "../packages"
...
Vue.use(libs,{a:'test'})

到现在项目基本已经跑起来了，在项目中可以直接调用组件了，无需在components里注册，平时开发中你的全局组件也可以这样来注册使用。

 

四：组件打包

vue-cli3中提供了构建一个库的方法 ，默认是构建应用，这个方法提供的几个配置项主要有以下几个

target: 改为 lib 可启用构建库模式；
name: 构建库输出的文件名；
dest: 构建的输出目录，默认为 dist；
entry: 入口文件路径；

vue-cli-service build --target lib --name myLib --dest libs [entry]

所以需要在项目的package.json文件中添加一条上面的执行脚本

"scripts": {
  "lib": "vue-cli-service build --target lib --name common --dest lib packages/index.js"
}

vue-cli3的默认配置是只对src目录下的文件进行编译的，所有这里我们还需要在vue.config.js文件中将packages文件夹也加入loader编译的配置（后测试可不加）。

chainWebpack:(config)=>{
  config.module
    .rule('js')
    .include
      .add('/packages/')
      .end()
    .use('babel')
      .loader('babel-loader')
      .tap(options=>{
          //TODO
          return options
      })
}

然后执行npm run lib会在跟目录下生成lib文件夹，lib会生成三种形式的文件（commonjs，umd，umd-min）

五：发布npm

有了上面的四步，基本上开发阶段算是完成了，接下来就是如何让你的库有一个存储的地方，方便下一次的复用，首先你应该想到了 npm ，这个node包管理库。

一个基础的npm包，你首先需要知道package.json中这些配置的作用

name —–> 包的名称，必须唯一，不能跟已有的npm包重名，否则发布不上去；

version