小編給大家分享一下vue組件怎么被其他項(xiàng)目引用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
自己寫的vue組件怎么才能讓其他人引用呢，或者是共用組件如何讓其他項(xiàng)目引用。本文就粗細(xì)的介紹下，如有疑問歡迎共同討論。在這里你能了解下如下知識(shí)點(diǎn)：
1. 如何發(fā)布一個(gè)包到npmjs倉庫上
2.如何引用一個(gè)npm包，尤其是本地引用
3.vue組件的兩種引用方案
一、發(fā)布一個(gè)包到npm的步驟
在npmjs.org上注冊(cè)一個(gè)賬號(hào)
然后進(jìn)入命令提示窗口輸入：
npm adduser: 進(jìn)入添加用戶
Username your name: 設(shè)置用戶名
Password your password: 設(shè)置密碼
Email youremail：設(shè)置郵箱
登錄信息都保存在用戶目錄下的.npmrc文件中（以token的方式保存）
npm publish：發(fā)布包
執(zhí)行npm publish這前，請(qǐng)切換到需要發(fā)包的項(xiàng)目根目錄下。
npm unpublish --force：移除一個(gè)發(fā)布包（也可以移除指定版本的包）
注意：
發(fā)包前必須要在npmjs上注冊(cè)一個(gè)賬號(hào)
每次發(fā)布的時(shí)候都需要重新更新版本
也可以用npm logout登出用戶，用npm login登錄用戶
二、build方式引用vue組件
示例使用的是本地安裝一個(gè)npm包。因?yàn)榘寻l(fā)布到npmjs，然后再npm到項(xiàng)目中太過麻煩（由于我們要做來回調(diào)整和測試）。實(shí)現(xiàn)vue組件三步驟：
1. 配置組件（被引用的組件），可以省略
配置package.json，主要是增加main節(jié)點(diǎn)
"main": "index.js"
主是main的這個(gè)節(jié)點(diǎn)，如果不配置，我們?cè)谄渌?xiàng)目中就不用import XX from '包名'來引用了，只能以包名作為起點(diǎn)來指定相對(duì)的路徑。
導(dǎo)出可供外部訪問的組件
重慶分公司
重慶分公司
import VueTree from './components/Hello'
module.exports = {
VueTree
}主要是導(dǎo)出可以讓外部訪問的組件，這里沒有直接導(dǎo)出main.js，是因?yàn)槲覀兯枰氖且恍┳咏M件，而根組件（因?yàn)樗嬖谥苯訏燧d到dom上的操作）。
編寫打包成為一個(gè)組件的腳本
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' //注意這里，打包的標(biāo)準(zhǔn)
},
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)
})此種打包方式會(huì)將此組件的所有引用打包成一個(gè)文件，還是存在不合理的現(xiàn)象。
生成包 通過上述三個(gè)步驟的配置，只需要運(yùn)行打包成組件的腳本就可以生成發(fā)布包了。
2、本地如何引用npm包（安裝發(fā)布好的包）
用命令模式進(jìn)入開發(fā)項(xiàng)目文件夾，用命令安裝包。npm install --save 本地路徑 即可。
npm install --save D:\MyProject\vue2-tree
3、根據(jù)包名直接定位組件
