开发流程
1.创建项目，(vue-cli/公司现有架构)
2.调整项目静态目录结构
3.使用webpack相关库模式打包编译
4.使用npm或者公司源地址发布到你需要的平台
步骤
  1. 创建项目，省略；
  2. 调整项目静态目录结构

在项目同级目录下创建lib文件夹 => assets / components / css / utils / index.js / UploadUi.vue (依据自己喜好而定)
lib => 存放组件相关依赖
src => main.js 我们本地调试组件入口
src => App.vue 我们本地调试组件使用地

├─build
│      build.js  // 用于执行构建
│      webpack.base.conf.js   // 通用配置
│      webpack.dev.conf.js   // 开发环境
│      webpack.prod.conf.js //  用于生成library的代码 -- upload-ui.js
│
├─dist
│     upload-ui.js // library 文件
│
├─lib    // example目录
│   └─ assets // 静态文件
│	└─ components  // 公共组件
│	└─ css // 组件内部公共样式依赖
│	└─ utils // 组件依赖公共方法
│      index.js // 全量引入公共组件，并暴露出来，包含install方法可供vue引入使用该插件
│      UploadUi.vue
│
├─src
│  │  App.vue  
│  └─ main.js // 组件本地调试入口
│
├─package.json  // 项目包依赖
开发
  1. 在lib文件下的UploadUi.vue文件开始开发
<template>
	<div class="upload-card-entry">我是upload-ui组件编写入口</div>
</template>
<script>
	export default {
		name: 'UploadUI' // 与组件注册名字必须保持一致
	}
</script>
  1. 在lib文件下的index.js文件进行注册组件或批量注册组件，暴露出去，
// 存在组件间循环引用的场景，因此在外部统一注册
import UploadUI from './UploadUI.vue';

const install = (Vue) => {
  Vue.component(UploadUI.name, UploadUI)
}

export default {
  install,
  version: '1.0.0'
}
  1. 在src下的main.js文件引入我们的组件，在src/App.vue中使用进行本地测试是否成功
import Vue from 'vue'
import App from './App.vue'
import UploadUi from '../lib/index';

Vue.use(UploadUi);

new Vue({
  el: '#app',
  render: h => h(App)
})
  1. 使用webpack相关库模式打包编译

修改打包入口、package.json文件;涉及到打包输入输出，编译上传发布

const webpackConfig = merge(baseWebpackConfig, {
  mode: 'production',
  module: {
    rules: cssLoader.styleLoaders({
      sourceMap: config.cssSourceMap
    })
  },
  devtool: false,
  
  entry: path.resolve(__dirname, '../lib/index.js'), // 打包入口文件地址

  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'upload-ui.js',
    library: 'upload-ui', //模块名称
    libraryTarget: 'umd', //输出格式
    umdNamedDefine: true //是否把模块名作为AMD输出的命名空间
  },

  externals: { // Vue组件库只提供组件，Vue文件自身需要组件库使用者在项目中自行引入，库中无需打包。所以我们可以把Vue加到externals中。
    vue: 'vue'
  },

  plugins: [
    // 设置默认环境变量
    new webpack.DefinePlugin({
      'process.env': env_build
    }),
  ]
})

package.json 文件配置，只显示了部分重要的

{
  "name": "vue-upload-ui",
  "version": "1.1.5", // 注意每次发布npm，版本号不能重复
  "description": "上传upload-ui层组件",
  "author": "",
  "private": false, // 是否私有，必须指定为false才能发布到npm
  "main": "./dist/upload-ui.js", // 编译后包的入口文件
  "scripts": {
    "dev": "webpack-dev-server --open 'Google Chrome' --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js build"
  },
  "dependencies": { // 业务依赖
  },
  "files": [ // 发布需上传的文件
    "lib",
    "dist"
  ],
  "devDependencies": { // 开发依赖
  },
}
  1. 发布到npm上
# 设置要发布的源，我发布的是公司搭建的私库
npm config set registry http://registry.npmjs.org
# 登录
npm login
# 发布
npm publish