一、首先新建一個(gè)vue2cli項(xiàng)目。
1、在想要新建項(xiàng)目的文件夾中，打開powershell，依次輸入如下命令:
安裝Vue CLI
npm install -g @vue/cli
創(chuàng)建一個(gè)新項(xiàng)目
vue create my-project
然后，會(huì)提示選擇vue3還是vue2，我們選擇vue2。
按回車后，大概需要5分鐘，甚至更久，才會(huì)新建成功，慢慢等待。。
成功之后，繼續(xù)在終端輸入下面命令
進(jìn)入項(xiàng)目目錄
cd my-project
運(yùn)行開發(fā)服務(wù)器
npm run serve
這時(shí)候，項(xiàng)目就成功啟動(dòng)起來了，打開鏈接 http://localhost:8080 ，就可以看到我們的項(xiàng)目了
二、在src/components中新建vue文件，比如：FirstComponent.vue，注意一定要寫name屬性，后面將組件往外暴露會(huì)用到，在其他項(xiàng)目中引用組件也要用到name
<template>
<div >
<span>這是要打包的第一個(gè)組件</span>
</div>
</template>
<script>
export default {
name: 'FirstComponent',
}
</script>
<style scoped>
</style>
SecondComponent.vue
<template>
<div >
<span>這是要打包的第二個(gè)組件</span>
</div>
</template>
<script>
export default {
name: 'SecondComponent'
}
</script>
<style scoped>
</style>
三、假設(shè)兩個(gè).vue文件就是我們想要打包的組件，我們要先將他們暴露出去，在項(xiàng)目的根目錄（src同級(jí)）或src/components文件夾中新建一個(gè)文件index.js
index.js的文件位置并不強(qiáng)制，大家都習(xí)慣新建的位置是這樣。 文件名也不強(qiáng)制，隨便取，不要和其他文件沖突、混淆即可。
目錄截圖
index.js中插入代碼
替換你的vue文件的name和路徑，需要暴露幾個(gè)組件，就寫幾個(gè)。
//import vue文件的name from 路徑
import FirstComponent from "./src/components/chat-langchatchat/index.vue";
import SecondComponent from "./src/components/chat-flowise/index.vue";
const components = [
FirstComponent,
SecondComponent
];
const install = function (Vue) {
if (install.installed) return;
install.installed = true;
components.forEach(component => Vue.component(component.name, component));
};
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
// 暴露安裝方法和組件
const ChatRobotPlugin = {
install,
FirstComponent,
SecondComponent
};
export default ChatRobotPlugin;
export { FirstComponent, SecondComponent };
四、在src/main.js中進(jìn)行導(dǎo)入，在app.vue中引用組件。
這一步是為了測(cè)試組件是否暴露成功，如果本地引用都不成功，發(fā)布之后，別的項(xiàng)目也是無法引用成功的。
main.js:從index.js導(dǎo)入組件，而不是components中
// main.js
import Vue from 'vue'
import App from './App.vue'
import FirstComponent from '../index.js'
import SecondComponent from '../index.js'
Vue.config.productionTip = false
Vue.use(FirstComponent)
Vue.use(SecondComponent)
new Vue({
render: h => h(App),
}).$mount('#app')
app.vue
<template>
<div id="app">
<FirstComponent />
<SecondComponent />
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>
當(dāng)在頁面中看到我們的組件被正常的顯示出來，說明組件被成功暴露出來了。
五、在package.json文件中scripts 部分插入lib的腳本命令：
"lib": "vue-cli-service build --target lib ./index.js --name your-project-name --dest your-project-floder-name"
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib ./index.js --name your-project-name --dest your-project-floder-name"
},
其中，你只需要根據(jù)你的項(xiàng)目改三個(gè)位置,
1、./index.js 是第三步我們新建的js文件，不管你新建的名稱是什么，路徑是什么，正確填寫即可，注意這里不單是文件名，而是文件路徑?。?br>
2、your-project-name
3、your-project-floder-name
注意：your-project-name和your-project-floder-name最好一樣，避免混淆
六、都準(zhǔn)備好之后，我們Ctrl+~打開powershell，輸入命令：
npm run lib
AI生成項(xiàng)目
javascript
運(yùn)行
1
等待運(yùn)行完成后，項(xiàng)目中會(huì)自動(dòng)生成一個(gè)文件夾your-project-floder-name（我們之前自己定義的名字）
七、想要在其他項(xiàng)目使用我們的組件的，有兩個(gè)方法
1、直接復(fù)制我們打包好的your-project-floder-name包，粘貼到其他項(xiàng)目的node_modules文件夾中。（2025.2.11親測(cè)這種方法無效，建議用方法2，百試不爽）
2、發(fā)布到npm官網(wǎng)，然后在其他項(xiàng)目中install使用。
第一種不用多說，引用方式拉到最下面看。
我們來介紹第二種方法：發(fā)布npm包。
（1）進(jìn)入到我們打包好的your-project-floder-name包中，初始化一個(gè)package.json包
這個(gè)package.json是要發(fā)布的，和根目錄的package.json用途不一樣，別混淆，當(dāng)然也可以直接用根目錄的package.json發(fā)布，不過得設(shè)置一些需要忽略的包，有點(diǎn)麻煩，新手的話就用這個(gè)方法，以后懂了再慢慢..
cd your-project-floder-name
npm init -y
{
"name": "your-project-floder-name",
"version": "1.0.0",
"description": "",
"private":false,
"main": "your-project-name.common.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
初始化的package.json中“name”參數(shù)就是要發(fā)布的npm包的名字，必須是唯一的，可以去npm官網(wǎng)搜一搜有沒有重名的；version是版本號(hào)，確保每次發(fā)布的版本不一樣，如果一樣會(huì)發(fā)布失敗； “private”:false（一般默認(rèn)就是false，不需要再操作了）
（2）然后就準(zhǔn)備發(fā)布了，首先去npm官網(wǎng)注冊(cè)一個(gè)賬號(hào)https://www.npmjs.com/
（3）注冊(cè)好后，回到我們的powershell。
修改鏡像
npm config set registry https://registry.npmjs.org/
登錄npm
npm login --auth-type=legacy
輸入npm的賬號(hào)和密碼，還有一個(gè)郵箱驗(yàn)證碼
登錄成功后，發(fā)布
npm publish
沒有報(bào)錯(cuò)的話，我們的包就已經(jīng)成功發(fā)布了，可以去npm官網(wǎng)搜一下。
八：在新項(xiàng)目中引用，
1、新建一個(gè)vue2cli項(xiàng)目。
2、安裝我們發(fā)布的npm包
npm install your-project-floder-name
AI生成項(xiàng)目
javascript
運(yùn)行
1
2、在main.js文件中導(dǎo)入：
import Vue from 'vue'
import App from './App.vue'
import FirstComponent from 'your-project-floder-name'
import SecondComponent from 'your-project-floder-name'
Vue.config.productionTip = false
Vue.use(FirstComponent)
Vue.use(SecondComponent)
new Vue({
render: h => h(App),
}).$mount('#app')
3、然后就可以在項(xiàng)目中引用啦！!
比如，在app.vue中
<template>
<div id="app">
<FirstComponent />
<SecondComponent />
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>
