vue封装组件发布到npm,支持unplugin-vue-components按需引入

news2024/11/27 22:21:58

目的：vue封装组件发布到npm,支持unplugin-vue-components按需引入

  • vue组件 https://gitee.com/jiangzhuqingfeng/plugin-vue-componets.git
  • 工具类 https://gitee.com/jiangzhuqingfeng/plugin-validate.git
  • taro组件 https://gitee.com/jiangzhuqingfeng/plugin-taro-components.git

本篇文章只介绍plugin-vue-components组件，工具类和taro组件可直接看代码
先上效果：https://www.npmjs.com/package/plugin-vue-components

plugin-vue-componets

安装

npm i -S plugin-vue-components

引入

方式一 按需手动引入

main.ts引入样式

import "plugin-vue-components/dist/style.css"//引入样式

vue组件中使用

<template>
            <IoUpload>IoUpload</IoUpload>
            <IoList></IoList>
</template>
 import { Upload as IoUpload, List as IoList } from 'plugin-vue-components'

方式二 基于unplugin-vue-components按需引入

   npm install --save unplugin-vue-components

vite.config.ts文件中添加配置

import Components from 'unplugin-vue-components/vite'
plugins:[
    Components({
      resolvers: [
       (componentName) => {
          if (componentName.startsWith('Io'))
            return { name: componentName, from: 'plugin-vue-components' }
        },
      ],
]

方式三（推荐使用）基于unplugin-vue-components按需自动引入

   npm install -D unplugin-vue-components

vite.config.ts文件中添加配置

import Components from 'unplugin-vue-components/vite'
import IoUIResolver from 'plugin-vue-components/resolver'
plugins:[
    Components({
      resolvers: [
       IoUIResolver(),
      ],
]

废弃,在main.ts全局注册

import IoComponents from 'plugin-vue-components'
import "plugin-vue-components/dist/style.css"//引入样式
    
const app = createApp(App)
app.use(IoComponents)
app.mount('#app')

vue组件封装

项目结构

在这里插入图片描述

创建项目

npm create vite@latest

封装组件

src/packages/components/ 目录下封装组件 upload/upload.vue

<template>
    <div class="upload">上传图片
        <slot></slot>
    </div>
</template>
<style lang="css">
.upload {
    color: red;
    display: flex;
}
</style>

upload/index.ts 组件注册

import { App } from 'vue'
import Upload from './upload.vue'


Upload.install = (app: App) => {
    app.component(Upload.name, Upload)
}
export {
    Upload
}
export default Upload

组件注册

src/package/componets 目录下新建 index.ts用于组件注册

import Upload from './components/upload'
import List from './components/list'
import type { App } from 'vue'

const components = [
    Upload,
    List,
]
//注册
const install = (app: App) => {
    components.forEach((component) => {
        app.component(component.name, component)
    })
}
export {
    Upload,
    List
}
export default {
    install
}

配置组件名，入口，输出位置

根目录下新建 vite.config.build.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import dts from 'vite-plugin-dts'
// 打包后的目录
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {                                       // +++
    alias: {
      '@': resolve(__dirname, './src')         // +++
    }                                            // +++
  },
  plugins: [
    vue(),
    dts(),//使用的typescript，需要生成*.d.ts声明文件
  ],
  //配置打包入口 https://cn.vitejs.dev/guide/build.html#library-mode
  build: {
    lib: {
      entry: resolve(__dirname, 'src/packages/index.ts'),//入口
      name: 'plugin-vue-components',//组件名
      fileName: (format) => `plugin-vue-components.${format}.ts`
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
        },
        // dir: resolve(__dirname, 'dist') //打包输出目录
      },
    },
  },
})

配置兼容unplugin-vue-componets按需自动引入

  • src/resolver.ts 处理组件引入
import type { ComponentResolveResult, ComponentResolver } from 'unplugin-vue-components/types';

function getIoResolved(name: string): ComponentResolveResult {

    const packageName = 'plugin-vue-components';

    const style = `${packageName}/dist/style.css`;

    return {
        name,
        from: packageName,
        sideEffects: style
    };
}

const IoUIResolver = (): ComponentResolver => {
    return {
        type: 'component',
        resolve: (name) => {
            if (name.startsWith('Io')) {
                return getIoResolved(name.slice(2));
            }
        }
    };
}

export {
    IoUIResolver
}
export default IoUIResolver
  • 根目录vite.config.build.resolver.ts
import { defineConfig } from 'vite';
import path, { resolve } from 'path'
import vue from '@vitejs/plugin-vue';
import dts from 'vite-plugin-dts'

export default defineConfig({
  resolve: {                                       // +++
    alias: {
      '@': resolve(__dirname, './src')         // +++
    }                                            // +++
  },
  plugins: [
    vue(),
    dts(),
  ],
  build: {
    minify: true,
    lib: {
      entry: path.resolve(__dirname, './src/resolver.ts'),
      name: 'name',
      fileName: (format) => {
        if (format === 'es') {
          return 'resolver.mjs';
        } else {
          return 'resolver.js';
        }
      },
      formats: ['es', 'cjs']
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        dir: path.resolve(__dirname, './dist')
      }
    },
    emptyOutDir: false
  }
});

配置package.json

{
  "name": "plugin-vue-components",//插件名
  "private": false,//发布到npm 需要设置false
  "version": "0.1.13",//插件版本号
  "files": [//发布到npm 需要包含的目录和文件
    "dist"
  ],
  "type": "module",
  "style": "./dist/style.css",
  "main": "./dist/plugin-vue-components.umd.ts",//入口
  "module": "./dist/plugin-vue-components.es.ts",
  "typings": "./dist/packages/index.d.ts",//类型
  "exports": {
    ".": {
      "types": "./dist/packages/index.d.ts",// exports优先级高于main、module
      "import": "./dist/plugin-vue-components.es.ts",
      "require": "./dist/plugin-vue-components.umd.ts"
    },
    "./resolver": {//兼容unplugin-vue-components按需自动引入,路径必须一致
      "types": "./dist/resolver.d.ts",
      "import": "./dist/resolver.mjs",
      "require": "./dist/resolver.js"
    },
    "./*": [
      "./*",
      "./*.d.ts"
    ]
  },
  "typesVersions": {
    "*": {
      "*": [
        "./dist/*",
        "./*"
      ]
    }
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build && vite build --config vite.config.build.ts && vite build --config vite.config.build.resolver.ts ",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@types/node": "^20.2.5",
    "@vitejs/plugin-vue": "^4.2.3",
    "sass": "^1.62.1",
    "typescript": "^5.1.3",
    "unplugin-vue-components": "^0.25.0",
    "vite": "^4.3.9",
    "vite-plugin-dts": "^2.3.0",
    "vue-tsc": "^1.6.5"
  },
  "description": "### 安装 * npm install --save plugin-vue-components",
  "repository": {
    "type": "git",
    "url": "https://gitee.com/jiangzhuqingfeng/plugin-vue-componets.git"
  },
  "keywords": [
    "io"
  ],
  "author": "872235631@qq.com",
  "license": "ISC"
}

编译并发布到npm

  • npm run build 编译
  • npm publish 发布到npm

npm 常用命令

​

  • npm config get registry 查看npm镜像
  • npm config set registry https://registry.npmjs.org 设置镜像
  • 淘宝镜像 https://registry.npm.taobao.org
  • npm 镜像 https://registry.npmjs.org
  • npm login 登录
  • npm login --auth-type=legacy
  • npm whoami 查看当前用户是否已登录
  • npm logout https://registry.npmjs.org 退出镜像的登录
  • npm publish 发布

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/615498.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

4年测试经验面试要20K，简单问了一下，连基础都不会，我也是醉了····

4年测试经验面试要20K，简单问了一下，连基础都不会，我也是醉了····

现在招个合适的人可真难呀&#xff0c;不是这不会就是那不会&#xff0c;没有一个让我满意的 公司前段时间缺人&#xff0c;面试了不少的测试&#xff0c;结果居然没有一个符合要求的。一开始瞄准的就是中级测试工程师的水准&#xff0c;也没指望来技术大牛&#xff0c;提供的薪…
阅读更多...
谷歌二次验证 Google Authenticator

谷歌二次验证 Google Authenticator

后台登录要搞令牌&#xff0c;类似于steam令牌、企鹅令牌等等 开启Google的登陆二步验证&#xff08;即Google Authenticator服务&#xff09;后用户登陆时需要输入额外由手机客户端生成的一次性密码。 实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责…
阅读更多...
ChatGPT+Pandas 联手，打造智能数据分析助手PandasAI，数据分析师也要失业了？!

ChatGPT+Pandas 联手，打造智能数据分析助手PandasAI，数据分析师也要失业了？!

文章目录 前言一、ChatGPT的介绍二、Pandas的介绍三、使用Pandas处理文本数据四、使用ChatGPT生成文本总结 笔记、Python学习资料戳链接直达获取>> 前言 自然语言处理&#xff08;NLP&#xff09;是人工智能领域中的一个重要分支&#xff0c;它涉及到计算机对人类语言的…
阅读更多...
Jedis使用教程详解

Jedis使用教程详解

目录 一、前言二、基本使用三、Jedis连接池四、连接池参数五、哨兵模式六、集群模式七、Springboot当中使用Jedis八、Springboot源码分析 一、前言 Jedis是Redis的一款Java语言的开源客户端连接工具&#xff0c;什么是客户端&#xff1f;就是真正使用者&#xff0c;像我们安装…
阅读更多...
【Web网站服务】Nginx优化

【Web网站服务】Nginx优化

Nginx网页优化 一、配置Nginx网页缓存时间1.1设置方法 二、隐藏Nginx版本号2.1方法一&#xff1a;修改配置文件2.2方法二&#xff1a;修改源码文件&#xff0c;重新编译 三、修改用户与组四、日志切割五、连接超时六、更改进程数七、网页压缩八、配置防盗链九、Linux内核参数优…
阅读更多...
音乐制作宿主软件有哪些，音乐制作宿主如何选择

音乐制作宿主软件有哪些，音乐制作宿主如何选择

音乐是我们抒发感情的一种方式&#xff0c;不同的音乐表达不同的情感。而正因为如此&#xff0c;很多人想创作表达自己情感的音乐。但创作音乐的难点在于普通人并不知道一些专业知识&#xff0c;也不知道专业的音乐编曲软件。那么今天我们就来说一说音乐制作宿主软件有哪些以及…
阅读更多...
电力能耗监测系统是如何运作的

电力能耗监测系统是如何运作的

电力能耗监测系统数据的采集主要通过多功能仪表、通讯管理机、通讯协议实现能耗数据的采集&#xff0c;能耗数据上传后经大数据计算实现能耗数据的展示&#xff0c;满足用户对能耗监测的需求。下面对电力能耗监测系统的是怎么采集数据的展开介绍&#xff1a; 1.多功能仪表 对高…
阅读更多...
【QQ聊天界面、拖拽界面、实现数据源方法 Objective-C语言】

【QQ聊天界面、拖拽界面、实现数据源方法 Objective-C语言】

一、那么，接下来，我们就先把控件给它拖一下， 1.打开Main.storyboard， 里面现在是不是有一个3.5英寸的控制器， 然后，看一下我们这个示例程序，上面整体是一个UITableView， 下面留出来，一条，44的高度，放一个UIView， 由两部分组成， 所以说，我们大体上，要放两个…
阅读更多...
人事管理项目-员工资料导出

人事管理项目-员工资料导出

人事管理项目-员工资料导出 后端接口实现前端实现 将员工资料导出为Excel是一个非常常见的需求&#xff0c;后端提供导出接口&#xff0c;前端下载导出数据即可。 后端接口实现 后端实现主要是将查询到的员工数据集合转为可以下载的ResponseEntity<byte[]>&#xff0c;代…
阅读更多...
Kali-linux破解操作系统用户密码

Kali-linux破解操作系统用户密码

当忘记操作系统的密码或者攻击某台主机时&#xff0c;需要知道该系统中某个用户的用户名和密码。本节将分别介绍破解Windows和Linux用户密码。 8.6.1 破解Windows用户密码 Windows系统的用户名和密码保存在SAM&#xff08;安全账号管理器&#xff09;文件中。在基于NT内核的W…
阅读更多...
使用Android Studio开发天气预报APP(使用sqlite数据库)

使用Android Studio开发天气预报APP(使用sqlite数据库)

使用Android Studio开发天气预报APP 今天我来分享一下如何使用Android Studio开发一个天气预报APP。在文中&#xff0c;我们将使用第三方接口获取实时天气数据&#xff0c;并显示在APP界面上。 步骤一&#xff1a;创建新项目 首先&#xff0c;打开Android Studio并创建一个新…
阅读更多...
c语言多线程间共享哪些数据

c语言多线程间共享哪些数据

问题描述 一个进程中的多个线程调用了共享库中的函数&#xff0c;共享库中定义了静态变量&#xff0c;该静态变量共享吗&#xff1f; 首先我们需要明确三个问题&#xff1a; 一个进程加载了共享库后&#xff0c;共享库的代码放在哪里&#xff1f;一个进程的多线程之间会共享…
阅读更多...
Appium + mitmProxy 实现APP接口稳定性测试

Appium + mitmProxy 实现APP接口稳定性测试

随着 App 用户量的不断增长&#xff0c;任何小的问题都可能放大成严重的线上事故&#xff0c;为了避免对App造成损害的任何可能性&#xff0c;我们必须从各个方面去思考 App 的稳定性建设&#xff0c;尽可能减少任何潜在的威胁。 1.背景介绍 为了保障 App 的稳定性&#xff0c…
阅读更多...
C#，码海拾贝（29）——求解“大型稀疏方程组”的“全选主元高斯－约去消去法”之C#源代码

C#，码海拾贝（29）——求解“大型稀疏方程组”的“全选主元高斯－约去消去法”之C#源代码

大型稀疏矩阵线性化方程组的数值求解问题 广泛存在于工程实践尤其是计算机仿真领域 如水力管网计算&#xff0c;电力系统的大型导纳矩阵计算&#xff0c;高阶偏微分方程的数值求解&#xff0c;以及铸件充型过程与凝固过程的数值模拟等。 经常出现在科学和工程计算中, 因此寻找…
阅读更多...
【spring源码系列-03】xml配置文件启动spring时refresh的前置工作

【spring源码系列-03】xml配置文件启动spring时refresh的前置工作

Spring源码系列整体栏目 内容链接地址【一】spring源码整体概述https://blog.csdn.net/zhenghuishengq/article/details/130940885【二】通过refresh方法剖析IOC的整体流程https://blog.csdn.net/zhenghuishengq/article/details/131003428【三】xml配置文件启动spring时refres…
阅读更多...
【科技素养题】少儿编程 蓝桥杯青少组科技素养题真题及解析第19套

【科技素养题】少儿编程 蓝桥杯青少组科技素养题真题及解析第19套

少儿编程 蓝桥杯青少组科技素养题真题及解析第19套 1、下列现象中有化学变化发生的是 A、蜡烛融化 B、冰块融化 C、电磁炉烧开水 D、铁生锈 答案：D 考点分析：主要考查小朋友们的物理和化学知识，题目问的是化学变化；区别物理变化和化学变化的唯一标志是有无新物质生成…
阅读更多...
公司来了个新的测试员，本以为是个菜鸡，没想到......

公司来了个新的测试员，本以为是个菜鸡，没想到......

最近公司来了个新同事&#xff0c;学历并不高&#xff0c;而且大学也不是计算机专业的&#xff0c;今年刚满30岁。。 本以为也是来干点基础的活混混日子的&#xff0c;结果没想到这个人上来就把现有项目的性能测试了一遍&#xff0c;直接给公司节省了不少成本&#xff0c;这种…
阅读更多...
C语言/C++新手入门学习经验资料分享

C语言/C++新手入门学习经验资料分享

一 学好C语言的运算符和运算顺序 这是学好《C程序设计》的基础&#xff0c;C语言的运算非常灵活&#xff0c;功能十分丰富&#xff0c;运算种类远多于其它程序设计语言。 在表达式方面较其它程序语言更为简洁&#xff0c;如自加、自减、逗号运算和三目运算使表达式更为简单&a…
阅读更多...
硅谷最爱的测试框架：详解PyTest

硅谷最爱的测试框架：详解PyTest

Python中有许多测试框架&#xff0c;但其中最受欢迎的就是PyTest。PyTest是一个强大而灵活的测试框架&#xff0c;它提供了许多先进的功能&#xff0c;可以让你的测试更加简洁、易读。 一、PyTest 简介 PyTest是一个开源的Python测试框架&#xff0c;用于编写简单而丰富的测试…
阅读更多...
FreeRTOS_任务基础知识

FreeRTOS_任务基础知识

目录 1. 什么是多任务系统&#xff1f; 2. FreeRTOS 任务与协程 2.1 任务 (Task) 的特性 2.2 协程&#xff08;Co - routine&#xff09;的特性 3. 任务状态 4. 任务优先级 5. 任务实现 6. 任务控制块 7. 任务堆栈 RTOS 系统的核心就是任务管理&#xff0c;FreeRTOS 也…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023