自己写的vue组件怎么才能让其他人引用呢，或者是共用组件如何让其他项目引用。本文就粗细的介绍下，如有疑问欢迎共同讨论。在这里你能了解下如下知识点：
1. 如何发布一个包到npmjs仓库上
2.如何引用一个npm包，尤其是本地引用
3.vue组件的两种引用方案
npm adduser: 进入添加用户Username your name: 设置用户名Password your password: 设置密码Email youremail：设置邮箱登录信息都保存在用户目录下的.npmrc文件中（以token的方式保存）
执行npm publish这前，请切换到需要发包的项目根目录下。
示例使用的是本地安装一个npm包。因为把包发布到npmjs，然后再npm到项目中太过麻烦（由于我们要做来回调整和测试）。实现vue组件三步骤：
"main": "index.js"
主是main的这个节点，如果不配置，我们在其他项目中就不用import XX from ‘包名‘来引用了，只能以包名作为起点来指定相对的路径。
import VueTree from ‘./components/Hello‘ module.exports = { VueTree }
主要是导出可以让外部访问的组件，这里没有直接导出main.js，是因为我们所需要的是一些子组件，而根组件（因为他存在直接挂载到dom上的操作）。
var webpack = require(‘webpack‘) var path = require(‘path‘) var vueLoaderConfig = require(‘./vue-loader.conf‘) function resolve (dir) { return path.join(__dirname, ‘..‘, dir) } var opt = { entry: { ‘vue-tree-common‘: ‘./src/comp.js‘ }, output: { path: resolve(‘dist‘), filename: ‘[name].js‘, library: ‘vue-tree-common‘, libraryTarget: ‘commonjs2‘ //注意这里，打包的标准 }, resolve: { extensions: [‘.js‘, ‘.vue‘], modules: [ resolve(‘src‘), resolve(‘node_modules‘) ] }, module: { rules: [ { test: /\.vue$/, loader: ‘vue-loader‘, options: vueLoaderConfig }, { test: /\.js$/, loader: ‘babel-loader‘, include: [resolve(‘src‘), resolve(‘node_modules‘)] } ] } } var compiler = webpack(opt) compiler.run(function(err, state) { console.log(err) })
此种打包方式会将此组件的所有引用打包成一个文件，还是存在不合理的现象。
用命令模式进入开发项目文件夹，用命令安装包。npm install --save 本地路径 即可。
npm install --save D:\MyProject\vue2-tree
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
<VueTree></VueTree>
</div>
</template>
<script>
import Hello from ‘./components/Hello‘
import {VueTree} from ‘vue-tree/dist/vue-tree-common‘ //重点
export default {
name: ‘app‘,
components: {
Hello,
VueTree
}
}
</script>
<style>
#app {
font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
此处我用的是import {VueTree} from ‘vue-tree/dist/vue-tree-common这种方式引入的包，因为在原到用的package.json中main节点配置的index.js。
原文：http://www.cnblogs.com/cqhaibin/p/6701071.html