使用vite框架封装vue3插件，发布到npm

住在河边的程序猿

已于 2024-01-16 15:06:55 修改

阅读量2.5k

点赞数 24

分类专栏： vite 文章标签： npm 前端 vue 插件组件

于 2024-01-15 14:49:11 首次发布

本文链接：https://blog.youkuaiyun.com/sinat_36728518/article/details/135533479

版权

上一篇文章讲述使用vite《如何使用vite框架封装一个js库，并发布npm包》封装js库，本文将讲述使用vite框架封装vue3插件。基本环境的搭建，参见《如何使用vite框架封装一个js库，并发布npm包》。如下图所示，

一、vue环境搭建

基本环境搭建好以后，开始安装开发环境。注意，我们的目的是开发vue插件，不是开发vue项目。因此，vue的依赖应该安装在开发环境当中，而不是生产环境。命令行如下：

pnpm add vue@latest vue-tsc @vitejs/plugin-vue  @types/node -D

1、创建App.vue

安装完成后，在src目录下创建App.vue文件：

<script setup lang="ts">
//import { ref, reactive } from 'vue';
import typescriptLogo from './typescript.svg';
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="./vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://www.typescriptlang.org/" target="_blank">
      <img
        :src="`${typescriptLogo}`"
        class="logo vanilla"
        alt="TypeScript logo"
      />
    </a>
    <h1>Vite + TypeScript</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite and TypeScript logos to learn more
    </p>
  </div>
</template>

2、修改main.ts

修改src目录下的main.ts文件：

import './style.css';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

3、修改vite.config.ts

修改vite.config.ts配置文件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.ts'),
      name: 'Counter',
      fileName: 'counter'
    }
  },
  server: {
    host: '0.0.0.0',
    port: 3100,
    open: true,
    strictPort: true
  }
});