在工作中，我们习惯在一个vue里面引入组件。随着业务量的增加，我们发现，使用公共组件的频率相当高，所以决定，讲根据业务需求打造自己的前端组件库

现在大致记录一下(仅属于个人总结)

基于vue-cli3打造组件库

1,快速创建项目

vue-cli3

vue create projectName

2,修改目录结构

把 src 目录名字改成 examples，这是用于展示组件示例的
在根目录下新建一个 packages 文件夹，这是用来放组件的

3,添加配置文件
修改目录后，项目运行不了，因为路径修改了，所以，在根目录下新建一个 vue.config.js 文件（新项目是没有这个文件的），并写入以下内容

const path = require('path')
module.exports = {
  // 修改 pages 入口
  pages: {
    index: {
      entry: 'examples/main.js', // 入口
      template: 'public/index.html', // 模板
      filename: 'index.html' // 输出文件
    }
  },
  // 扩展 webpack 配置
  chainWebpack: config => {
    // @ 默认指向 src 目录，这里要改成 examples
    // 另外也可以新增一个 ~ 指向 packages
    config.resolve.alias
      .set('@', path.resolve('examples'))
      .set('~', path.resolve('packages'))

    // 把 packages 和 examples 加入编译，因为新增的文件默认是不被 webpack 处理的
    config.module
      .rule('js')
      .include.add(/packages/).end()
      .include.add(/examples/).end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  }
}

4,编写组件

我们先在 packages 目录下新建一个 SwiftTable 文件夹，再在 SwiftTable 文件夹下下面新建一个 src 文件夹，在 src 文件夹下面新建一个 table.vue 组件

<template>
  <div @click="handleClick">{{ num }}</div>
</template>

<script>
export default {
  name: 'SwiftTable',
  data () {
    return {
      num: 0
    }
  },
  methods: {
    handleClick () {
      this.num++
    }
  }
}
</script>

<style>
</style>

备注： name 这个名字尤为重要，。首先它是必须要写的，你可以把它理解为 id，具有唯一标识组件的作用，将来我们可是要通过这个 name 来找到和判定这是什么组件，所以你写的所有组件应该是不重名的；其次这个 name 就是我们最终的标签名，比如这里我们的 name 是 SwiftTable，到时候我们写的标签就长这样 <swift-table></swift-tablet>，就像 Element 一样，name 是 ElButton，用的时候就是 <el-button></el-button>。

5,暴露组件

在 packages/SwiftTable 下面新建一个 index.js 文件，具体代码如下

// 对外提供对组件的引用，注意组件必须声明 name
import SwiftTable from './src/table'
// 为组件提供 install 安装方法，供按需引入
SwiftTable.install = Vue => {
  Vue.component(SwiftTable.name, SwiftTable)
}
export default SwiftTable

这是给组件扩展一个 install 方法，扩展这个方法的原因是 Vue.use()的需要，use 会默认调用 install 方法安装。接着在 packages 下面也新建一个 index.js 文件，注意和上面那个 index.js 区别开，上面那个是针对单个组件安装的，这个是针对所有组件全局安装的，先看代码：

import SwiftTable from './SwiftTable'
// 存储组件列表
const components = [
  SwiftTable
]

//import './static/css/index.css';       // 清新蓝色主题

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  install.installed = true
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component))
  // 下面这个写法也可以
  // components.map(component => Vue.use(component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  ...components
}

到此目录结构为：

6,组件测试

组件写完了，接下来我们就在 examples 下面测试一下，看看能不能引用成功。首先在 examples 下的 main.js 中引入刚刚写好的包，就像下面这样：

import SwiftTable from './../packages'
Vue.use(SwiftTable);

然后把 examples/components下面的 HelloWorld里面的内容删了，写入自己标签组件，代码如下

<template>
  <div class="hello">
    <swift-table :tableData = "tableData" :tableHeight = "200" @dbRowClick="handleDouble" ></swift-table>
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      tableData:{
        "id":"AB",
        "type":"dataObj",
        "title":"标题",
        "thead":{"num":"序号","id":"站点id","name":"站点名称"},
        "data":[{"num":"01","id":"001","name":"站点01"},{"num":"02","id":"002","name":"站点02"},{"num":"03","id":"002","name":"站点03"}]
      },
    }
  },
  watch:{
   
  },
  methods:{
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

最后让我们运行一下项目 npm run serve，看看效果

7,最关键的一步：库模式打包

在库模式中，打包出来的库中是不包含 Vue 的。然后我们修改一下 package.json 文件，就像下面这样：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name swift-table --dest lib packages/index.js"
  },

 "lib": "vue-cli-service build --target lib --name 组件名 --dest lib [entry 组件入口]"

接着执行 npm run lib 就能生成库啦，生成的左侧目录lib 文件夹，就是我们要发布的东西。

8,发布到npm

完善一下 README.md 文档，
修改一下 package.json 文件：

{ 
  "name": "swift-table",
  "version": "0.0.1",
  "description": "基于 vue-cli3 的 UI 组件库 可灵活配置表头，表的列数的table组件",
  "main": "lib/swift-table.umd.min.js",
  "keywords": "swift-table",
  "private": false,
  "license": "MIT"
}

在发布之前，一定要修改package.json文件，将 private 设置为 false，否则不能发布

在根目录下新建一个 .npmignore 文件，内容和 .gitignore 差不多

如果没有 .npmignore 文件 ,直接使用.gitignore 文件（针对mac OS）

# 这是复制 .gitignore 里面的
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

# 以下是新增的
# 要忽略目录和指定文件
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html

最后执行 npm login登入 npm 账号，再执行 npm publish发布即可，当然前提是你有个 npm 账号，没有的话去官网注册一个吧

如果不想发布到公网，可以，使用 sinopia搭建属于自己的npm服务，管理npm包。

自定义包的引入

新建一个项目，在项目中 npm install SwiftTable -S

然后在 main.js 引入：

import SwiftTable from './../packages'
Vue.use(SwiftTable);

在页面中可以使用啦

<swift-table></swift-table>

个人使用多过程中的借鉴和总结，希望能对各位有帮助，不足之处，请多多指正

初学 前端npm部署组件库