一，通过vite 搭建

通过参考官网搭建基础框架：vuejs.org/guide/quick…

npm init vue@latest

项目结构大概如下图：

二，在src下创建components文件夹，文件夹里放自己的组件

<template>
 <div class="eagleEmpty">
  待开发
 </div>
</template>
<script setup lang="ts">
const props = defineProps({
    title: {
      type: String,
      default: '标题',
    },
  });
</script>
<style lang="scss" scoped>
.eagleEmpty{
 
}
</style>

三，在src创建下packages文件夹 ； 在packages下创建 main.ts文件到处所封装好的组件

main.ts代码如下

import type { App } from 'vue'
import EagleContainer from '@/components/eagle-container.vue'
import EagleModel from '@/components/eagle-model.vue'
import EagleTitle from '@/components/eagle-title.vue'
import EagleContent from '@/components/eagle-content.vue'
import EagleTable from '@/components/eagle-table.vue'
import EagleTabs from '@/components/eagle-tabs.vue'
import EagleSearch from '@/components/eagle-search.vue'
import EagleInputBtn from '@/components/eagle-input-btn.vue'
import EaglePdf from '@/components/eagle-pdf.vue';
import EagleForm from '@/components/eagle-form.vue';
import EagleSelect from '@/components/eagle-select.vue';
import EagleCheckbox from '@/components/eagle-checkbox.vue';
import EagleRadio from '@/components/eagle-radio.vue';
import EagleDesc from '@/components/eagle-desc.vue';
import EaglePage from '@/components/eagle-page.vue';
import EagleEmpty from '@/components/eagle-empty.vue';
import EagleUpload from '@/components/eagle-upload.vue';
import EagleTree from '@/components/eagle-tree.vue';
import EagleCard from '@/components/eagle-card.vue';
import EagleDate from '@/components/eagle-date.vue';
import EagleInput from '@/components/eagle-input.vue';
import EagleMap from '@/components/eagle-map.vue';
import EagleVideo from '@/components/eagle-video.vue';
import EagleStep from '@/components/eagle-step.vue';
import EagleProgress from '@/components/eagle-progress.vue';
import EagleEditor from '@/components/eagle-editor.vue';
import EagleEsign from '@/components/eagle-esign.vue';
import EagleHooktable from '@/components/eagle-hooktable.vue'
const eagle = {
    install:  (app: App<Element>) =>{
        app.component('eagle-search', EagleSearch);
        app.component('eagle-tabs', EagleTabs);
        app.component('eagle-table', EagleTable);
        app.component('eagle-inputBtn', EagleInputBtn);
        app.component('eagle-container', EagleContainer);
        app.component('eagle-content', EagleContent);
        app.component('eagle-title', EagleTitle);
        app.component('eagle-model', EagleModel);
        app.component('eagle-pdf', EaglePdf);
        app.component('eagle-form', EagleForm);
        app.component('eagle-select', EagleSelect);
        app.component('eagle-checkbox', EagleCheckbox);
        app.component('eagle-radio', EagleRadio);
        app.component('eagle-desc', EagleDesc);
        app.component('eagle-card', EagleCard); 
        app.component('eagle-date', EagleDate); 
        app.component('eagle-editor', EagleEditor); 
        app.component('eagle-input', EagleInput);
        app.component('eagle-page', EaglePage); //TODO
        app.component('eagle-empty', EagleEmpty); //TODO
        app.component('eagle-upload', EagleUpload); //TODO
        app.component('eagle-tree', EagleTree); //TODO
        app.component('eagle-map', EagleMap); //TODO
        app.component('eagle-video', EagleVideo); //TODO
        app.component('eagle-step', EagleStep); //TODO
        app.component('eagle-progress', EagleProgress); //TODO
        app.component('eagle-esign', EagleEsign); // TODO
        app.component('eagle-hooktable', EagleHooktable); // TODO
    }
}
export default eagle

配置package.json导出

具体如下

{
  "name": "eagle-component",
  "version": "0.0.6",
  "description": "eagle component UI for eagle",
  "private":false,
  "main": "dist/lib.umd.js",
  "module": "dist/lib.es.js",
  "style": "dist/style.css",
  "type": "module",
  "exports": {
    ".": {
      "import": "dist/lib.es.js",
      "require": "dist/lib.umd.js"
    },
    "./*": "./*"
  },
  
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build ",
    "build:production": "vue-tsc --noEmit && vite build --mode production",
    "preview": "vite preview --port 5050",
    "typecheck": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "keywords": [
    "vue3",
    "vite",
    "component",
    "ui",
    "typescript"
  ],
  "engines": {
    "node": ">= 16"
  },
  
  "dependencies": {
    "@element-plus/icons-vue": "^0.2.7",
    "axios": "^0.26.0",
    "dayjs": "^1.10.7",
    "echarts": "^5.3.0",
    "element-plus": "^2.0.2",
    "file-saver": "^2.0.5",
    "jszip": "^3.7.1",
    "mockjs": "^1.1.0",
    "pinia": "^2.0.11",
    "screenfull": "^6.0.1",
    "vite-plugin-mock": "^2.9.6",
    "vue": "^3.2.29",
    "vue-i18n": "^9.2.0-beta.30",
    "vue-router": "^4.0.12",
    "wangeditor": "^4.7.12",
    "xlsx": "^0.18.2"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.0",
    "@types/file-saver": "^2.0.5",
    "@types/node": "^16.11.22",
    "@vitejs/plugin-vue": "^2.1.0",
    "@vitejs/plugin-vue-jsx": "^1.3.3",
    "@vue/eslint-config-typescript": "^10.0.0",
    "@vue/tsconfig": "^0.1.3",
    "eslint": "^8.5.0",
    "eslint-plugin-vue": "^8.2.0",
    "node-sass": "^7.0.1",
    "sass": "^1.49.7",
    "sass-loader": "^12.6.0",
    "typescript": "~4.5.5",
    "unplugin-auto-import": "^0.6.0",
    "unplugin-vue-components": "^0.17.18",
    "vite": "^2.7.13",
    "vue-tsc": "^0.31.1"
  }
}

配置vite打包，在vite.config.json添加如下代码

  build: {
    lib: {
        entry: path.resolve(__dirname, 'src/packages/main.ts'),
        name: 'eagle-UI',
        fileName: (format) => `lib.${format}.js`
    },
    rollupOptions: {
        external: ['vue'],
        output: {
            globals: {
                vue: 'Vue'
            }
        }
    }
 },

执行命令行构建包

npm run build 

二， 如何把包发布到npm

1, 去npm官网注册账号 2，登录npm ,输入用户名密码，邮箱

npm login 

3，发布包

npm publish

使用发布好的包

1，安装

npm i eagle-component

2, 引入发布好的包

import 'eagle-component/dist/style.css'
import eagleComponent from 'eagle-component'
const app = createApp(App);
app.use(eagleComponent)

3，使用封装好的组件

<eagle-title :title="'时间选择器示例'"></eagle-title>
<eagle-input v-model="inputValue" clearable></eagle-input>

4，页面呈现效果