npm包 - 发布vue3组件

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