vue3+vite+npm组件的封装与发布

置顶 lululu_

已于 2024-05-26 16:09:16 修改

阅读量1k

点赞数 27

文章标签： npm javascript 前端前端框架 vue.js html5

于 2024-05-26 16:07:05 首次发布

本文链接：https://blog.csdn.net/lululu_/article/details/139214451

版权

vue3+vite+npm组件的封装与发布

vue3+vite+npm组件的封装与发布

vue3+vite+npm组件的封装与发布

文中涉及到pnpm的命令，未安装pnpm，使用npm即可

一、搭建一个vite项目

pnpm create vue@latest

在这里插入图片描述
会生成初始化项目文件夹：

二、创建组件

用于测试，可以直接用初始化项目的组件进行封装
在这里插入图片描述
新建packages文件夹，将初始化项目src下的文件移动至packages文件夹中，并在packages文件夹中新建一个myTest.vue文件，用于引入初始化的一些vue文件，当作封装组件用于测试

三、修改组件代码，暴露方法并传值

修改myTest.vue文件代码，添加方法并暴露，同时添加组件传值，这样封装完成发布之后，可以自定义修改组件的值，并可根据自己的需求定义其它函数和操作

<script setup>
import HelloWorld from './/HelloWorld.vue'
import TheWelcome from './TheWelcome.vue'
import { ref } from 'vue'

// 定义父组件传过来的值，发布组件之后可以直接传值
defineProps({
  propMsg: {
    type: String,
    required: true
  }
})

const message = ref('南山彭于晏')

// 定义方法
const setMessage = (msg, time) => {
  setTimeout(() => {
    message.value = msg
  }, time);
}
// 并暴露出去，发布之后可以直接调用
defineExpose({
  setMessage
})
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="../assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld :msg="message" />
      {{ propMsg }}
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

四、添加组件入口文件

在packages文件夹下新建index.ts入口文件
在这里插入图片描述
引入myTest.vue组件并配置，然后暴露出去，这个就作为我们封装的组件，一会儿打包会从这个入口文件打包

import MyTest from './components/myTest.vue'

const myPlugin = {
  install(app) {
    // 配置此应用
    app.component('MyTest', MyTest)
  }
}

export default myPlugin

五、引入本地测试组件是否可用

在main.js文件中引入组件入口文件，并挂载
在这里插入图片描述
在App.vue文件中引用myTest组件

运行项目pnpm dev，测试页面，组件成功调用

六、配置打包脚本vite.config.js文件

因为我们最后发布的是打包后的文件，所以需要配置打包文件vite.config.js文件。项目初始化时会默认生成一个vite.config.js文件，在该文件中加入打包对象build即可
在这里插入图片描述
其中，./packages/index.ts就是刚刚建的组件入口文件，此时打包就是从该入口进行打包

import { fileURLToPath, URL } from 'node:url'
import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],

  build: {
		outDir: "dist", //输出文件名称
		lib: {
			entry: path.resolve(__dirname, "./packages/index.ts"), //指定组件编译入口文件
			name: "vue-dialog",
			fileName: "vue-dialog",
		}, //库编译模式配置
		rollupOptions: {
			// 确保外部化处理那些你不想打包进库的依赖
			external: ["vue"],
			output: {
				// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
				globals: {
					vue: "Vue",
				},
			},
		}, // rollup打包配置
	},

  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

七、打包组件并配置版本文件package.json

使用pnpm build对当前项目进行打包，打包成功生成dist文件夹(上一步在vite.config.js文件中配置的)
在这里插入图片描述
在dist文件夹下，使用npm init -y初始化并生成package.json文件，注意图中飘红部分即可

八、发布到npm

命令行运行npm login，没有npm账号先到npm官网注册
在这里插入图片描述
这里注意，如果注册账号之后报错：403 [FORBIDDEN] Public registration is not allowed
报错原因：NPM之前自己配置了淘宝镜像地址，需要配置回官网npm源地址
npm config set registry https://registry.npmmirror.com
然后再执行npm login即可，发布完组件之后记得改回!!!