場景：就是A項(xiàng)目的組件需要在B項(xiàng)目中使用
下面舉例的是把a(bǔ)項(xiàng)目pagination分頁組件上傳到npm，在b項(xiàng)目使用
采坑日記：封裝的組件一定要起name要不調(diào)用不成功
1.1 配置打包
1.1 首先在公用組件components文件夾下創(chuàng)建index.js文件，
?1.2 index.js
?1.3 vite.config.js
?1.4 package.json
?執(zhí)行npm run build打包，出現(xiàn)如圖文件夾則代表打包成功
?2.1 上傳npm官網(wǎng)
2.1 cd?lc-project 執(zhí)行npm init -y，我的配置如下圖
name：上傳后的名稱
description：版本描述
version：版本號(hào)
?2.2 上傳到npm，首先得注冊(cè)個(gè)npm賬號(hào) 官網(wǎng)?記住用戶名、密碼和郵箱，發(fā)布的時(shí)候會(huì)用到
?2.3 設(shè)置npm源，一般都是淘寶鏡像，需要切換官方鏡像
npm config set registry=https://registry.npmjs.org
?2.4?文件根目錄打開終端，輸入npm login
? ?2.5 在v3-o\lc-project目錄下執(zhí)行?npm publish 命令，出現(xiàn)? + lc-project@1.0.1 則代表上傳成功，可以官網(wǎng)查看下
?3.1 B項(xiàng)目中應(yīng)用
? 3.1 打開終端執(zhí)行npm i?lc-project
? 3.2然后在main.js中
import "../node_modules/lc-project/style.css"; //引入組件樣式
import { lcProject } from "lc-project"; //引入下載后的組件
app.use(lcProject);
app.mount("#app");? 3.3 在B項(xiàng)目組件中直接使用就行文章來源：http://www.zghlxwxcb.cn/news/detail-604892.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-604892.html
到了這里，關(guān)于Vue3+vite實(shí)現(xiàn)組件上傳npm并應(yīng)用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
