vue3+ts创建私有组件库

精简版

项目目录

xuyan-ui 组件库项目

​ |__ packages – 存放开发的组件

​ |__ test-ui – 测试组件库

​ |__ node_modules – packages的依赖文件

​ |__ package.json – xuyan-ui的包信息

组件库实现逻辑

文件结构

packages
	|__ lib
		|__ compName
            |__ compName.vue
            |__ index.js -- 导出组件
    |__ index.js -- 注册组件
    |__ index.d.ts -- 类型标注
    |__ package.json -- 包信息
	

导出组件 compName/index.js

import compName from "./compName.vue"
export {compName}

注册组件 packages/index.js

//严格模式
'use strict';

//导入组件
import {xyTest} from "./lib/xy-test";


//导出\注册组件

const install = (app) =>{
    const components = [xyTest];
    components.forEach(item=>{
        const name = item.name || item.__name;
        app.component(name,item);
    })
}

export default {
    install
}

类型声明 packages/index.d.ts

export declare const install: (app: import("vue").App<any>) => void;

包信息 packages/package.json

{
  "name": "yanyan-ui",  //组件库名
  "version": "2.0.8", //版本号
  "private": false, //是否公共
  "description": "适用于vue3的前端xy组件库", //说明
  "main": "index.js", //入口文件
  "typings": "index.d.ts", //类型声明文件
  "keywords": ["yanyan-ui", "vue3", "xy", "组件库","ui"], //关键字
  "dependencies": {  //依赖
    "vue": "^3.4.26"
  }
}

发布

npm publish --registry=https://registry.npmjs.org/

测试组件库

test-ui

​ |__main.ts

test-ui/main.ts – 导入库

import xy from "../../packages/index.js"
app.use(xy)

详细版

提供示例代码

文件目录

组件库项目根
    |__ packages  -- 存放开发的组件
    |__ test-ui  -- 测试组件库
    |__ node_modules -- packages的依赖文件
    |__ package.json -- 依赖文件信息

1、安装packages的依赖 – vue

组件库项目根运行

yarn add vue

2、组件库开发

文件结构

packages
	|__ lib
		|__ xy-test
            |__ xy-test.vue
            |__ index.js -- 导出组件
    |__ index.js -- 注册组件
    |__ index.d.ts -- 类型标注
    |__ package.json -- 包信息

packsges/lib/xy-test.vue

<template>
  <div class="box">
    {{msg}}
    <slot></slot>
    再见
  </div>
</template>

<script lang="ts">
  import {defineComponent} from 'vue'

  export default defineComponent({
    name: "xyTest",
    props:{
      msg:{
        type: String,
        default: 'hello'
      }
    },
    setup(props,context){
      return {}
    }
  })
</script>

<style lang="scss">
.box{
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
}
</style>

packsges/lib/index.js

import xyTest from './xy-test.vue';
export {xyTest};

packages/index.d.ts

export declare const install: (app: import("vue").App<any>) => void;

packages/index.js

//严格模式
'use strict';

//导入组件
import {xyTest} from "./lib/xy-test";


//导出\挂载组件

const install = (app) =>{
    const components = [xyTest];
    components.forEach(item=>{
        const name = item.name || item.__name;
        app.component(name,item);
    })
}

export default {
    install
}

包信息 packages/package.json

{
  "name": "yanyan-ui",  //组件库名
  "version": "2.0.8", //版本号
  "private": false, //是否公共
  "description": "适用于vue3的前端xy组件库", //说明
  "main": "index.js", //入口文件
  "typings": "index.d.ts", //类型声明文件
  "keywords": ["yanyan-ui", "vue3", "xy", "组件库","ui"], //关键字
  "dependencies": {  //依赖
    "vue": "^3.4.26"
  }
}

发布

packages文件夹下运行

npm publish --registry=https://registry.npmjs.org/

3、测试组件库组件

新建一个vue3+ts+sass的项目

导入注册文件

test-ui/src/main.ts

import xy from "../../packages/index.js"

app.use(xy)

使用

当前页面显示的vue文件

<template>
  <div>nihao</div>
  <xy-test :msg="2024">你好</xy-test>
</template>

<script setup lang="ts">
import {reactive} from 'vue'

const props = defineProps({})
const state = reactive({})
</script>

<style lang="scss">

</style>