使用vue的脚手架来搭建项目，这里使用webpack-simple模板

一、初始化项目

vue init webpack-simple vue-star-ui

出现提示直接Enter确认即可

? Target directory exists. Continue? Yes
? Project name vue-star-ui
? Project description A Vue.js project
? Author 夏荷塘 <xiahetang@lotus.net.cn>
? License MIT
? Use sass? Yes

   vue-cli · Generated "vue-star-ui".

   To get started:

     cd vue-star-ui
     npm install
     npm run dev

然后根据提示，运行上面后三行的命令，开始运行项目

二、修改目录结构

根据下图所示修改目录结构，主要有两处

1. 创建packages文件夹及文件夹下所有文件和文件夹
2. 将src修改为examples

|-- vue-star-ui
    |-- .babelrc
    |-- .editorconfig
    |-- .gitignore
    |-- index.html
    |-- package.json
    |-- README.md    // 说明文档
    |-- webpack.config.js
    |-- examples    // 示例，也是测试
    |   |-- App.vue
    |   |-- main.js
    |   |-- assets
    |       |-- logo.png
    |-- lib    // 打包生成的文件
    |-- packages    // 组件库的源码
        |-- index.js
        |-- button
            |-- index.js
            |-- src
                |-- button.vue

三、初始packages/index.js

这是一个最基本的Element-ui的入口文件，返回一个带有install方法的对象

// packages/index.js
const install = (Vue,opts = {}) => {
}
export default {
    version: '0.0.1',
    install
}

四、button组件

// packages/button/src/button.vue
<template>
  <div>button</div>
</template>
<script>
export default {
  // 组件的名称，因为再注册组件的时候是通过
  // Vue.component(button.name, button)这种方式的，
  // 所以当使用库中的组件的时候，就可以通过<star-button/>这种方式
  name: 'StarButton' 
}
</script>
<style>
</style>

// packages/button/index.js
import StarButton from './src/button'
StarButton.install = (Vue) => {
    Vue.component(StarButton.name, StarButton)
}
export default StarButton
// 这个文件有两个作用:
// 1.将button组件导出给src/index.js中的install方法使用
// 2.将button组件的install方法导出给Element，方便button单独使用

五、完善packages/index.js

// 返回一个带有install方法的对象
// packages/index.js
import Button from '../packages/button/index'
const components = [
    Button
]
const install = (Vue,opts = {}) => {
    // 将所有的 组件 挂载到全局资源
    components.map(component => {
        Vue.component(component.name,component)
    })
}
// 当检测到Vue是全局变量的时候，自动将 执行 `install` 方法
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    version: '0.0.1',
    install,
    Button  //单独暴露Button组件，方便单独引入
}
// 这是一个最基本的Element-ui的入口文件

六、配置发布文件

在按照 Element-ui的目录结构编写完一套最基本的框架后，现在开始配置打包发布的文件webpack.config.js。我们需要修改项目的入口文件以及输出配置

var path = require('path')
var webpack = require('webpack')
// 这里的入口文件 不仅是项目中 通过 npm run dev的进入文件
// 同时也是npm run build后的入口文件
module.exports = {
  entry: './examples/main.js',// 项目的示例运行入口文件
  // entry: './packages/index.js',// 项目的打包入口文件
  output: {
    path: path.resolve(__dirname, './lib'), // 打包输出文件的所在目录
    publicPath: '/lib/', // 打包输出的文件路径
    filename: 'vue-star-ui.js',// 打包后的 文件名称，这个文件名称与项目名称相对应
    // 指定 使用import 或者 require 时的模块名，这里为import xx from 'vue-star-ui' 或者 require('vue-star-ui')
    library: 'vue-star-ui',
    // 可以指定生成不同的umd的代码，可以只是commonjs标准的，也可以是amd标准的，也可以是只能通过script标签引入的
    libraryTarget: 'umd', 
    // 会对umd的构建过程中的 amd 模块进行命名，否则就使用 匿名的 define
    umdNamedDefine: true
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('packages') //自定义@指向的地址
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  ......
}

七、配置package.json

{
  "name": "vue-star-ui",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "夏荷塘 <xiahetang@lotus.net.cn>",
  "license": "MIT",// 许可证
  "private": true, 
  "main": "lib/vue-star-ui.js",// 这个超级重要！！！当import xxx from 'vue-star-ui'它默认就会去找lib下的vue-star-ui文件
  "files":["lib","examples"],// 用于发布忽略，当我们的包够复杂的时候，我们总不能把所有本地开发或者测试的组件全部都发布上去
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
"repository": {
    "type": "git",
    "url": "https://github.com/xxx/vue-star-ui"
  }, // 配置这个地址存放你项目在github上的位置 也尤为重要
  "dependencies": {
    ...
  },
  "browserslist": [
    ...
  ],
  "devDependencies": {
    ...
  }
}

version字段，代表了npm的当前版本，当我们改动了包的内容后，需要改变版本号才能重新打包上传。
版本号的说明如下：

• 主版本号：当你做了不兼容的API修改
• 次版本号：当你做了向下兼容的功能性新增
• 修订号：当你做了向下兼容的问题修正
  然后就可以走发布流程啦

八、本地测试组件

如果你想在发布之前简单测试一下组件库，可以进行如下操作：

1. 在main.js中引用组件

// examples/main.js
// import StarUi from 'vue-star-ui' // 引用安装的组件库
// import StarUi from '../lib/vue-star-ui' // 引用npm run build打包好的组件库
import StarUi from '../packages/index'  // 引用开发阶段的组件库
Vue.use(StarUi)

2. 在App.vue中使用组件

// examples/App.vue
<template>
  <div id="app">
    ...
    <star-button />
  </div>
</template>

3. 然后就可以运行npm run dev看效果了

参考文档

1. 搭建自己的 vue 组件库（三）—— npm 上面发布自己的组件库