使用本地UI包

目录

├── apps
│   ├── web

安装

创建项目

• 在apps/web目录下创建一个新的vue3项目

安装本地依赖

• workspace下安装本地依赖, "@tscomponents/ui" 换成你自己的ui包里面package.json对应的name

  "dependencies": {
    "@tscomponents/ui": "workspace:*",
    "vue": "^3.5.24"
  },

执行命令

• cd 到apps/web目录下执行命令

pnpm install

使用

• main.ts 文件

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
// 全量引入
import YJComponent from "@tscomponents/ui";
import "@tscomponents/ui/dist/index.css";

const app = createApp(App);

app.use(YJComponent);

app.mount("#app");

• 组件里面

<template>
  <div>
    <YJButton :text="message" :type="type" :on-click="handleClick"></YJButton>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const message = ref("提交");
const type = ref("submit");
const handleClick = () => {
  window.alert("点击了按钮");
};
</script>

<style lang="scss" scoped></style>