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

目录
  • 创建项目
  • 创建组件
  • 导出组件
  • 使用vite构建
  • 打包
  • 注册->登录npm
  • 发布前准备
  • 发布到npm
  • 参考:
  • 总结

创建项目

  • “vue”: “^3.2.8”
  • “vite”: “^2.5.2”

习惯用HB的直接用创建vue3项目即可 或

npm init vite@latest

创建组件

打开项目 在src/components文件夹下新增文件,我这里叫TestBtn.vue

<template>
  <button>我是测试要发布的按钮组件</button>
</template>

//导出组件名*
<script>
	export default{
		name:'test-btn'
	}
</script>
<script setup>

</script>

<style>

</style>

拿到当前项目里测试一下

//app.vue
<template>
	<div>
		<test-btn></test-btn>
	</div>
</template>

<script setup>
import TestBtn from './components/TestBtn.vue'
</script>

<style scoped>

</style>

导出组件

src下新建index.js

//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 } // 批量的引入*

使用vite构建

编辑vite.config.js文件,新增build属性,vite中文文档

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'
        }
      }
    }
  }
})

修改package.json文件

{
	"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"
	}
}

打包

生成dist文件

npm run build

注册->登录npm

按提示注册就可以 npm官网

发布前准备

在dist文件生成package.json文件,自定义组件名(唯一,重名报错重新起一个就行),版本号每次上传要高于前一次版本号

//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

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
<template>
	<test-btn></test-btn>
</template>

<script setup>

</script>

<style scoped>

</style>

参考:

总结

到此这篇关于vue3+vite自定义封装vue组件发布到npm包的文章就介绍到这了,更多相关vue3+vite封装组件发布npm包内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue3+Vite实现动态路由的详细实例代码

    项目基本目录 1.首先定义初始默认的路由routes(router.js文件),vue文件使用import引入可以按需加载 import { createRouter, createWebHashHistory } from "vue-router"; import store from '../store/index.js' const routes = [{ path: "/login", component: () => import("../

  • vue3+vite引入插件unplugin-auto-import的方法

    自动引入 composition api,不需要再手动引入.github地址:https://github.com/antfu/unplugin-auto-import 下载 npm i unplugin-auto-import -D 修改vite.config.ts文件 import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins: [vue(),AutoImport({ imp

  • vue3 Vite 进阶rollup命令行使用详解

    目录 rollup介绍 以命令行方式打包 Tree Shaking Rollup 的命令行使用 命令行 format 格式 rollup.config.js 设置/获取环境变量 插件 plugins rollup介绍 开源类库优先选择 以 ESM 标准为目标的构建工具 Tree Shaking 以命令行方式打包 安装 rollup npm install -g rollup 创建 index.js 文件 import path from "path"; console.log(&quo

  • vue3+vite中使用import.meta.glob的操作代码

    目录 前言: vue3中使用 import.meta.glob 具体方法: 前言: 在vue2的时候,我们一般引入多个js或者其他文件,一般使用  require.context 来引入多个不同的文件,但是vite中是不支持 require的,他推出了一个类似的功能,就是用import.meta.glob来引入多个,单个的文件. 这里说说他们的对比和区别: vue2 中使用  require 来引入多个不同的js文件 1.引入  modules 下的所有的js文件 const modulesFi

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

    目录 创建项目 创建组件 导出组件 使用vite构建 打包 注册->登录npm 发布前准备 发布到npm 参考: 总结 创建项目 “vue”: “^3.2.8” “vite”: “^2.5.2” 习惯用HB的直接用创建vue3项目即可 或 npm init vite@latest 创建组件 打开项目 在src/components文件夹下新增文件,我这里叫TestBtn.vue <template> <button>我是测试要发布的按钮组件</button> &l

  • 自定义vue组件发布到npm的方法

    本文介绍了自定义vue组件发布到npm的方法,分享给大家,具体如下: 为什么会有这个想法呢,主要是vue项目中自定义的组件在多个项目中使用.导致修改bug的时候,总是要在项目分支中修改,然后同步到主线上,这样容易导致分支修改后没有同步到主线,慢慢的就会导致组件版本不统一,而导致升级组件很繁琐,最后可能都要去维护多个组件的不同版本,这样不是我们想要的. 所以就打算将组件打包发布到npm上,每个项目中只需要在package.json中修改组件版本即可同步最新版本. 组件发布历程 1.开始对打包不是很

  • 基于vue如何发布一个npm包的方法步骤

    前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础,了解一点 webpack Are you ready? Go! 一.编写自己的npm包 1. 新建一个空文件夹 2. 进入文件夹,终端(cmd)运行 npm init 完成后会在目录下生成一个 package.json 文件 我们可以根据自己的需要补充文件内容 这是我的: { "name"

  • vue组件发布到npm简单步骤

    1.0 新建项目 1.1 初始化项目 输入npm init,之后需要填什么就写什么 新建src目录,并在src目录下新建alert.vue $ npm init $ mkdir src $ cd src $ touch alert.vue 最后的目录结构 1.2 修改入口文件 打开package.json,并修改 1.3 写组件内容 这个组件内容可以随便写,我们就先测试一下,我是这样写的 <template> <div class="alert"> <di

  • vue todo-list组件发布到npm上的方法

    前言 最近几个人合作完成了一个项目,发现有一些公用的基础业务组件,可以提取出来,不仅方便大家在各自模块直接引用,也可以在以后的项目中使用.想到了可不可以自己动手把组件打包发布到内部的npm上,避免以后小伙伴们的重复工作呢?于是乎,说干就干,在这里操练一下,写个todo-list的vue组件案例.案例源码:https://github.com/wuwhs/todoList 建立npm项目 1. 初始化npm项目 建一个文件夹(todoList),在这个文件夹路径下打开cmd窗口,输入指令npm i

  • vue如何自定义封装API组件

    目录 自定义封装API组件 1.创建vue组件 2.创建Alter.js生成组件 3.导入Vue 如何封装使用api形式调用的vue组件 子组件 父组件 自定义封装API组件 1.创建vue组件 <template>     <div >         <div class="alert">         <div class="alert-main" v-for="item in notices"

  • vue3 HighCharts自定义封装之径向条形图的实战过程

    目录 1.前言 2.先来看效果图 3.步骤详解 3.1vue3安装highcharts 3.2如何使用,如何按需引入 4.封装RadialBar组件,包括图表的点击事件 4.1RadialBar.vue思路 4.2RadialBar.vue完整代码 4.3使用RadialBar.vue 4.4css如何实现三角箭头的生成 5.总结 1.前言 目前正在做vue3的数据可视化项目,vue3的组合式api写法十分方便,可以有各种玩法,有兴趣的同学可以看我个人主页的其他文章.难点是在网上找了一圈的有关径

  • vue3.0手动封装分页组件的方法

    本文实例为大家分享了vue3.0手动封装分页组件的具体代码,供大家参考,具体内容如下 1.父组件引入 src/views/goods/components/goods-comment.vue <!-- page表示初始化分页时,默认显示第几页 --> <XtxPagination @change-page='changePage' :pagesize='reqParams.pageSize' :total='total' :page='1' /> //调接口 import {fin

  • Android自定义封装banner组件

    自定义封装 banner 组件,供大家参考,具体内容如下 1. 效果图预览  2.基本功能 一个简单方便的轮播图组件,基于viewpager 基础上进行的封装. 可设置 项目中图片,网络图片, View: 支持循环自动播放,手势滑动切换,item点击事件,可设置 点点的样式宽高.颜色.大小.位置 : 可设置蒙层:可设置 是否允许滑动:可设置 是否允许循环. 3.基本实现 1). 自定义属性 <declare-styleable name="BannerLayoutStyle"&g

  • 如何构建一个Vue插件并生成npm包

    vue的插件一般用来添加全局性的功能,具体可分为: 添加全局方法或者属性: 添加全局资源(指令.过滤器等): 通过全局 mixin 方法添加一些组件选项: 在 Vue.prototype 上 添加 Vue 实例方法: 创建一个库,提供自己的 API,同时提供上面提到的一个或多个功能: 一般来说我们在项目中倾向于第五种方式,可以通过创建一个js文件包含我们需要添加的多种全局性功能,指令.过滤器.实例方法之类的.这样的一个插件的构建也不难,主要就是使用vue提供的install 方法,传入Vue构造

随机推荐