npm包 - 发布vue3组件
1. 创建VUE3项目
npm create vue
2. 在项目中创建 packages 文件夹,创建 index.js , 创建 components 文件夹,创建 PanelCard1.vue
编辑 PanelCard1.vue
<template> <div style="width: 200px; height: 200px; background: grey"> <button class="btn" @click="handleClick">ssssss</button> </div> </template> <script> import { defineComponent } from "vue"; export default defineComponent({ setup() { const handleClick = () => { alert("sssssssssss,我被点击了,ssssssssssss"); }; return { handleClick, }; }, }); </script> <style scoped> .btn { background: darkgoldenrod; } </style>
编辑 index.js
import PanelCard1 from './components/PanelCard1.vue' const myPlugin = { install(app) { // 配置此应用 app.component('PanelCard1', PanelCard1) } } export default myPlugin
3. 创建 build 文件夹,创建 lib.config.js 文件
import {defineConfig} from "vite"; import {resolve} from 'path'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ build: { outDir: 'dist', lib: { entry: resolve(__dirname, "../packages/index.js"), name: 'v3tt', fileName: (format) => `v3tt-${format}.js`//umd es }, rollupOptions: { //打包 external: ['vue'],//不打包项 output: { //UMD模式下为那些外部化的依赖提供一个全局变量 globals: { vue: 'Vue' } } } }, plugins: [ vue({ include: [/\.vue$/], //必须打包 包含.vue文件 }) ] })
4. 修改src/main.ts
import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const app = createApp(App) app.use(createPinia()) import myPlugin from "../packages/index.js"; app.use(myPlugin) app.mount('#app')
修改 App.vue
<template> <div> <PanelCard1></PanelCard1> </div> </template> <script> import {defineComponent} from 'vue'; export default defineComponent({ setup() { } }) </script>
5. 修改 package.json
{ "name": "v3tt", "version": "1.0.0", "private": true, "type": "module", "author": "lihongyuan", "description": "封装vue3组件库", "keywords": [ "vue3", "封装组件库" ], "main": "dist/v3tt-es.js", "style": "dist/style.css", "files": [ "dist" ], "scripts": { "dev": "vite", "build": "run-p type-check \"build-only {@}\" --", "preview": "vite preview", "build-only": "vite build", "type-check": "vue-tsc --build --force", "build:lib": "vite build --config ./build/lib.config.js" },
6. 编译
npm run build:lib
7. 测试
可使用 本地link方式测试,参考:https://www.cnblogs.com/1285026182YUAN/p/17097318.html
8. 发布
参考:https://www.cnblogs.com/1285026182YUAN/p/17097318.html
9. 其他项目引用
npm install v3tt
main.ts中使用
import v3tt from "v3tt"; import "v3tt/dist/style.css"; app.use(v3tt);
页面中使用
<template> <div>
<PanelCard1></PanelCard1>
</div> </template>
end
引用:https://blog.csdn.net/qq_19650329/article/details/136910074
标签:npm,vue,v3tt,app,js,build,vue3,组件,import From: https://www.cnblogs.com/1285026182YUAN/p/18519790