前言：

最近在进行组件开发，为了方便组件的引用与维护，准备采用“npm本地文件file引入”的方式将组件从项目中解耦，并使用git进行组件的版本管理与协作开发。
file本地文件引入，会在项目中package.json文件添加依赖，但是不会在node_modules文件夹下安装组件库，组件会直接引用公用组件库中的的文件

---

步骤详述：

1.使用vue init webpack-simple demo-ui 创建Vue组件项目

不使用vue init webpack的原因是，组件开发中webpack安装会有大量依赖是无用的，webpack-simple对于组件来说已经足够了

2.src新增components文件夹用于存放组件文件

这里新增一个tooltip组件

3.根目录新增index.js文件，用于导出组件内容

//导出tooltip组件
import demoUI from './src/components/tooltip/tooltip'
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.component(demoUI.name, demoUI)
}
demoUI.install = function(Vue){
    Vue.component(demoUI.name, demoUI)
}
export default demoUI

4.package.json文件修改

// 权限设置，一定要为false 
private:false 
// 新增字段：main   require方法可以通过这个配置找到入口文件 
main:"./dist/demo-ui.js"

5.webpack.config.js文件修改

var path = require('path')
var webpack = require('webpack')
// 增加NODE_ENV常量，用于判断生产环境还是开发环境
const NODE_ENV = process.env.NODE_ENV
module.exports = {
	//生产环境下进入index.js文件   开发环境进入main.js    方便组件开发看效果
	entry: NODE_ENV == 'development' ? './src/main.js' : './index.js',
	output: {
	    path: path.resolve(__dirname, './dist'),
	    publicPath: '/dist/',
	    filename: 'demo-ui.js',		// 定义输出文件名
	    library: 'demo-ui',			// 定义require时的模块名
	    libraryTarget: 'umd',		// 指定输出格式
	    umdNamedDefine: true		// 对UMD构建过程中的AMD模块进行命名，否则使用匿名的define
	},
  devtool: '#eval-source-map'		//编译时是否生成map文件，不需要map文件，删掉该属性
	//其余配置默认即可
}

6.修改 index.html 文件

// 默认编译文件引入路径
<script src="/dist/build.js"></script>
// 这边编译文件定义为wafa-ui,路径修改为
<script src="/dist/demo-ui.js"></script>

7.配置完毕，webpack编译文件

运行 npm run build 编译文件
/dist/ 文件夹下生成 demo-ui.js 和 demo-ui.map.js 文件

8.其它项目使用该组件

1. “npm file引入” 安装公用组件库 npm install …/demo-ui        ps：wafa-ui需和其它项目在同一级目录下
2. main.js 文件全局引用组件

// 全局组件引入
import demoUI from "demo-ui"
Vue.use(demoUI)

3. 具体业务中使用
   <demoTooltip title=“这里是提示内容”> Tooltip内容 </demoTooltip>