编写组件

新建组件 src/components/z-ui/z-time/ZTime.vue

<template>
    <div>
        {{ dayjs(props.data).format("YYYY-MM-DD HH:mm:ss") }}
    </div>
</template>

<script setup>
import  dayjs from "dayjs";

let props = defineProps({
    data: {
        type: [String, Date,Number],
        default: new Date()
    }
});

</script>

<style scoped>

</style>

dayjs 为第三方依赖，如需使用先npm install dayjs 进行安装

组件引入

新建按需引入 src/components/z-ui/z-time/index.js

import ZTime from './ZTime.vue'
export default {
    install(app) {
        app.component('ZTime', ZTime)
    }
}
export {ZTime}

新建全局引入 src/components/index.js

export * from './z-ui/z-time'


import ZTime from './z-ui/z-time/index.js'


const components = [
    ZTime
]
const ZUI = {
    install(app) {
        components.forEach((component) => {
            component.install(app)
        });
    },
};

export {
    ZUI
}

打包配置

新建 vite.config.prod.js

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

import * as path from 'path'

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

    plugins: [vue()],
    resolve: {
        alias: {
            '@': path.resolve(process.cwd(), './src'),
        },

    },

})

修改 package.json

增加配置

"scripts": {

    "build:com": "vite build --mode production --config ./vite.config.prod.js",

  },

"main": "z-ui/z-ui.js",
  "files": [
    "z-ui",
    "src"
  ],

完整如下

{
  "name": "z-ui",
  "private": false,
  "version": "0.0.1",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:com": "vite build --mode production --config ./vite.config.prod.js",
    "preview": "vite preview"
  },

  "type": "module",
  "main": "z-ui/z-ui.js",
  "files": [
    "z-ui",
    "src"
  ],
  "dependencies": {
    "@rollup/plugin-commonjs": "^24.1.0",
    "dayjs": "^1.11.7",
    "lodash": "^4.17.21",
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "vite": "^4.3.2"
  },
  "peerDependencies": {
    "dayjs": "^1.11.7"
  }
}

组件发布

配置npm远程仓库

（按具体仓库发布说明操作）

推送到仓库

npm run build:com

npm publish

使用组件

新建项目

安装依赖

npm install z-ui

全局引入

修改 main.js 增加引入

import "z-ui/z-ui/style.css"
import {ZUI} from 'z-ui'

使用案例

<script setup>

</script>

<template>


  <z-time></z-time>

</template>

局部引入

修改 main.js 增加引入

import "z-ui/z-ui/style.css"

使用案例

<script setup>

import {ZTime} from "z-ui";


</script>

<template>

  <z-time></z-time>

</template>