vite+vue3发布自己的npm组件+工具函数

记录一下个人最近一次发布npm组件的过程:

一、创建组件和工具函数

  1. 执行命令创建一个空项目: npm create vite 创建过程稍微有些慢,不知何故?其中选择vue , 个人暂时使用的JS 。
  2. 在 src 目录下面创建一个文件 package 存放组件和公共的JS方法

案例中 table 是放组件的, utils 是放方法的。

table组件 里面的主要内容就是个人业务组件,随便写点

<template>
  <input type="text" v-model="MyValue">
  <div>
    结果:{{ MyValue }}
  </div>
  <button @click="handelEvent"> 测试按钮 </button>
</template>

<script setup>
import { ref } from "vue";
const MyValue = ref("");
const emit = defineEmits(["testBtn"]);
const handelEvent = () => {
  emit("testBtn", MyValue.value);
};
</script>

<script>
export default {
  name: "eosBtn",
};
</script>

这里遇到一个疑问,组件名称的暴露:必须通过下面的方式。

export default {
  name: "eosBtn",
}; 

我最开始用的组合式api 直接暴露的,竟然无法使用,如有知道原因的,还请赐教一下。

<script setup name="eosBtn"> </script>

函数方法,utils文件 也随便写一个:

// indes.js
import { handleFirstUpperCase } from "./utils.js";
export default { handleFirstUpperCase };


// utils.js
/* 
* 首字母转大写
*/
export function handleFirstUpperCase(str) {
    return str.replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
}
  1. 开始暴露出去组件和方法,在package 下的index.js 写

    import eosBtn from './table/index.vue'
    import EUtils from './utils/index.js'

    const components = [eosBtn]
    const install = function (Vue) {
    components.map(el => {
    Vue.component(el.name, el) // 注册组件
    })
    }
    export default { install, EUtils }

  2. 本地自测,还是在当前的项目下,在main.js 里面引入和注册组件以及方法

    import { createApp } from 'vue'
    import './style.css'
    import App from './App.vue'
    import testUi from './package/index.js'
    const app = createApp(App)

    app.config.globalProperties.EUtils = testUi.EUtils; //公共方法
    console.log(testUi);
    app.use(testUi.install)
    app.mount('#app')

  3. 在app.vue 中使用组件进行测试

    <template> <eosBtn @testBtn="testBtn" /> </template> <script setup> import { getCurrentInstance, ref, defineComponent } from "vue"; const { proxy } = getCurrentInstance(); const testBtn = (val) => { console.log(proxy.EUtils.handleFirstUpperCase(val)); }; </script>

二、发布组件

  1. 设置包的名称,版本,导出路径等相关信息, 在package.json

    {
    "name": "eos-tms-base",
    "private": false,
    "version": "0.0.5",
    "type": "module",
    "files": [
    "dist/*",
    "eos-tms-base.d.js"
    ],
    "main": "dist/eos-tms-base.umd.js",
    "module": "dist/eos-tms-base.es.js",
    "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
    },
    "dependencies": {
    "vue": "^3.3.11"
    },
    "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.2",
    "vite": "^5.0.8"
    }
    }

  2. 设置vite.config.js

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

    // https://vitejs.dev/config/ https://juejin.cn/post/7257144279050403896
    export default defineConfig({
    plugins: [vue()],
    build: {
    rollupOptions: {
    // 请确保外部化那些你的库中不需要的依赖
    external: ['vue'],
    output: {
    // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
    globals: {
    vue: 'Vue',
    },
    },
    },
    lib: {
    entry: 'src/package/index.js',
    name: 'eos-tms-base',
    fileName: (format) => eos-tms-base.${format}.js,
    },
    },
    })

  3. 执行打包命令,打包发布:npm run build 打包后的文件

  4. 接着就是登录npm, 执行命令 npm login , 没有账户的自行注册,上传失败的,检查npm 代理路径是否为官方的,如果是淘宝镜像需要自行切换到官方才可使用,包名是否已经在插件市场存在。

设置 npm 的 registry 为官方源 npm config set registry https://registry.npmjs.org

  1. 到npm 官网查看是否发布成功。

最后就是创建一个空项目,自己下载插件,进行引入,自测。
npm i eos-tms-base

相关推荐
m0_748247552 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255023 小时前
前端常用算法集合
前端·算法
真的很上进3 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203983 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2343 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1234 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~5 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语5 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport5 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg5 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全