vue3+vite自定义封装vue组件发布到npm包的全过程_vue.js_

npm init vite@latest 

 //导出组件名* 

//app.vue 

//index.js import TestBtn from "./components/TestBtn.vue"; // 引入封装好的组件 export { TestBtn } //实现按需引入* const components = [TestBtn]; const install = function(App, options) { components.forEach((component) => { App.component(component.name,component); }); }; export default { install } // 批量的引入* 

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], build: { lib: { entry: path.resolve(__dirname, 'src/index.js'), name: 'TestBtn', fileName: (format) => `test-btn.${format}.js` }, rollupOptions: { // 确保外部化处理那些你不想打包进库的依赖 external: ['vue'], output: { // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 globals: { vue: 'Vue' } } } } }) 

{ "name": "test-btn-ui", "version": "0.0.1", "scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview" }, "files": ["dist"], "main": "./dist/test-btn.umd.js", "module": "./dist/test-btn.es.js", "exports": { ".": { "import": "./dist/test-btn.es.js", "require": "./dist/test-btn.umd.js" } }, "dependencies": { "vue": "^3.2.8" }, "devDependencies": { "@vitejs/plugin-vue": "^1.6.0", "@vue/compiler-sfc": "^3.2.6", "vite": "^2.5.2" } } 

npm run build

//dist文件下 npm init -y //package.json { "name": "test-btn-ui", "version": "1.0.4", "description": "", "main": "test-btn.es.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } 

npm publish

npm i test-btn-ui //main.js import { createApp } from 'vue' import App from './App.vue' import TestBtnUI from 'test-btn-ui' import 'test-btn-ui/style.css' createApp(App).use(TestBtnUI).mount('#app') //页面.vue