使用npm安裝vite腳手架
npm create vite@latest
項(xiàng)目命名xikang，選擇vue+JavaScript，接下來??
cd xikang
npm install
npm run dev
修改相關(guān)文件
修改：./src -> ./examples（對(duì)開發(fā)的組件進(jìn)行測(cè)試）
新增：./packages（該文件夾用于存放開發(fā)的組件）
修改index.html引入的main.js文件的路徑
/src/main.js替換為/examples/main.js
組件開發(fā)
以button組件為例，添加packages/button/src/index.vue
//
<script setup name="XkButton">
import { createApp } from 'vue'
// 1\. 引入你需要的組件 這里用到了vant(npm i vant)
import { Button as VanButton } from 'vant';
// 2\. 引入組件樣式
import 'vant/lib/index.css';
const app = createApp();
app.use(VanButton)
</script>
<template>
<div>
<van-button type="primary">主要按鈕</van-button>
<van-button type="success">成功按鈕</van-button>
<van-button type="default">默認(rèn)按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險(xiǎn)按鈕</van-button>
</div>
</template>
<style scoped>
</style>
添加packages/button/index.js （組件導(dǎo)出）
import XkButton from './src/index.vue';
XkButton.install = (App) => {
App.component(XkButton.__name, XkButton);
// 因?yàn)閚ame在script標(biāo)簽上，所以獲取名字的形參是__name
};
export default XkButton;
所有組件導(dǎo)出
添加packages\index.js文件，用于導(dǎo)出所有的組件
import XkButton from './button';
//按需引入
export {XkButton };
const components = [XkButton];
const install = (App) => {
components.forEach((item) => {
App.component(item.__name, item);
});
};
export default {
install,
};
修改配置
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
plugins: [vue()],
build: {
outDir: 'lib', // 輸出內(nèi)容到lib文件夾
lib: {
entry: resolve(__dirname, 'packages/index.js'), //指定組件編譯入口文件
name: 'xkVue3Mobile',
fileName: 'xk-vue3-mobile',
},//庫(kù)編譯模式配置
rollupOptions: {
// 確保外部化處理那些你不想打包進(jìn)庫(kù)的依賴
external: ['vue', /vant.*/],
output: {
// 在 UMD 構(gòu)建模式下為這些外部化的依賴提供一個(gè)全局變量
globals: {
vue: 'Vue',
},
},
},// rollup打包配置
},
});
npm run build，生成lib文件 ，包括：
image.png
上傳npm之前，修改配置package.json文件
{
"name": "xk-vue3-mobile", // 庫(kù)名
"private": false,
"version": "0.0.2", // 每次升級(jí)，都要修改版本，不然npm上傳失敗
"type": "module",
"files": [
"lib"
],
"main": "lib/xk-vue3-mobile.umd.js",
"module": "lib/xk-vue3-mobile.js",
"exports": {
"./lib/style.css": "./lib/style.css",
".": {
"import": "./lib/xk-vue3-mobile.js",
"require": "./lib/xk-vue3-mobile.umd.js"
}
},
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vant": "^4.8.2",
"vue": "^3.3.11"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.2",
"vite": "^5.0.8"
}
}
如有不需要上傳的文件，在根目錄添加一個(gè).npmignore文件，將不上傳的文件添加即可
.vscode
examples/
packages/
public/
vite.config.js
*.map
*.html
node_modules
上傳npm私有庫(kù)
如沒有npm賬號(hào)，請(qǐng)注冊(cè)：https://www.npmjs.com
全局安裝 verdaccio
npm i -g verdaccio
- 輸入 verdaccio 命令啟動(dòng) verdaccio
verdaccio
在瀏覽器中輸入 http://localhost:4873/ 出現(xiàn)如??頁(yè)面就說明服務(wù)啟動(dòng)成功（不要關(guān)閉verdaccio命令，否則后續(xù)會(huì)失?。?/p>
image.png
登錄npm adduser --registry http://localhost:4873
輸入npm賬號(hào)用戶名、密碼和郵箱，登錄成功后如下：
image.png
- 進(jìn)入到我們工程根目錄，執(zhí)行npm publish --registry http://localhost:4873/（如出現(xiàn)下圖，則成功）
image.png
- 刷新http://localhost:4873/，就能看到我們發(fā)的包
image.png
image.png
npm引入
npm set registry http://localhost:4873
npm i xk-vue3-mobile
按需導(dǎo)入
import { createApp } from 'vue'
const app = createApp();
import { XkButton } from 'xk-vue3-mobile';
import 'xk-vue3-mobile/lib/style.css'
app.use(XkButton)
<xk-button></xk-button>
CDN引入
我們將lib文件夾放到我們的根目錄
// 根目錄 index.html
<link rel="stylesheet" href="/lib/style.css" />
按需引入組件
import { Slider, XkButton } from '../lib/xk-vue3-mobile'
<xk-button></xk-button>
