使用vue-cli3.0 创建发布组件库

1.创建default项目，规划目录结构如下：

将src目录名称改为examples作为示例目录，新建packages目录作为组件库文件夹

新建vue.config.js配置项目入口文件：

pages: {

    index: {

      entry: 'examples/main.js',

      template: 'public/index.html',

      filename: 'index.html'

    }

  },

由于vue-cli 3.x 提供了构建库的命令，所以这里不需要再为 packages 目录配置 webpack

2.开发组件：

在packages目录下存放组件，每个组件单独开发目录，然后index.js整合所有组件向外导出。

*注意：每个组件都有name作为组件标签

3.组件index.js

每个自定义组件对应index编写：

packages下index.js编写：

4.示例

在examples文件夹main.js引入packages下index,Vue.use(),测试

5.构建库

库文件打包命令：vue-cli-service build --target lib --name myLib [entry]

这个入口可以是一个 .js 或一个 .vue 文件。如果没有指定入口，则会使用 src/App.vue。

主要需要四个参数：

1.target: 默认为构建应用，改为 lib 即可启用构建库模式

2.name:输出文件名

3. dest: 输出目录，默认为 dist，这里我们改为 lib

4.entry: 入口文件路径，默认为 src/App.vue，这里改为packages/index.js

6.准备发布

name: 包名，该名不能和已有的名称冲突；

version: 版本号，不能和历史版本号相同；

description: 简介；

author：作者；

"private": false, // 因为组件包是公用的，所以private为false

  "main": "dist/my-switch.min.js",// 配置main结点，如果不配置，我们在其他项目中就不用import XX from '包名'来引用了，只能以包名作为起点来指定相对的路径

  // 指定代码所在的仓库地址

    "repository": {

      "type": "git",

      "url": "git+https://github.com/linmoer/vue-flag-list.git"

    },

    // 指定打包之后，包中存在的文件夹

    "files": [

      "dist",

      "examples"

    ],

    // 指定关键字

    "keywords": [

      "vue",

      "flag",

      "code",

      "flag code"

    ],

    "license": "MIT", //开源协议

    // 项目官网的url

    "homepage": "https://github.com/linmoer/vue-flag-list#readme",

7.然后创建 .npmignore 文件，设置忽略文件

8.发布

到npm注册账号用来发布包，npm login 输入用户名密码登陆

npm publish发布包