开发vue组件库——开发一个button（二）开发一个按钮先思考一下，vue组件应该怎么开发，需要什么插件？我就按照我

开发一个按钮

先思考一下，vue组件应该怎么开发，需要什么插件？我就按照我的习惯来写了，若有不足请指正我，谢谢🙏

vue
typescript
sass
unplugin-vue-macros，可以使用新特性，这里主要用到defineOptions，设置组件名。
@vitejs/plugin-vue
@vitejs/plugin-vue-jsx

pnpm add vue typescript sass unplugin-vue-macros @vitejs/plugin-vue @vitejs/plugin-vue-jsx -w -D

创建components包

我们在packages新建文件夹components，在components目录下执行pnpm init生成package.json，如下：

{
  "name": "@udesign-vue/components",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

在components下面创建button文件夹和index.ts，button文件夹下创建button.vue和index.ts.

button/button.vue

<template>
  <button><slot /></button>
</template>

<script setup lang="ts">
defineOptions({
  name: "UlButton",
});
</script>

<style scoped></style>

button/index.ts

import _button from "./buton.vue";

export const UlButton = _button;

export default UlButton;

到此简单的组件就开发好了

预览开发的组件

首先安装刚才开发组件，在跟目录下执行pnpm add @udesign-vue/components;@udesign-vue/components对应components/package.json的name
在play目录下执行pnpm init，生成package.json，然后安装vite

pnpm add vite -D

最后稍加修改得到的package.json如下：

{
  "name": "@udesign-vue/play",
  "private": "true",
  "scripts": {
    "dev": "vite"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vite": "^4.4.9"
  }
}

最后创建play/index.html、play/vite.config.ts、play/src/App.vue、play/src/main.ts

// index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试组组件</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

// vite.config.ts
import { defineConfig } from "vite";
import VueMacros from "unplugin-vue-macros/vite";
import Vue from "@vitejs/plugin-vue";
import VueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      VueMacros({
        plugins: {
          vue: Vue(),
          vueJsx: VueJsx(),
        },
      }),
    ],
  };
});

// App.vue
<template>
  <ul-button>测试</ul-button>
</template>

<script setup lang="ts">
import { UlButton } from "@udesign-vue/components";
</script>

<style scoped></style>

// main.ts
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");

启动

修改根目录下package.json，重点看一下scripts。

{
  "private": true,
  "scripts": {
    "dev": "pnpm -C play dev"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "sass": "^1.64.2",
    "typescript": "^5.1.6",
    "unplugin-vue-macros": "^2.4.4",
    "vue": "^3.3.4"
  },
  "dependencies": {
    "@udesign-vue/components": "workspace:^"
  }
}

最后执行pnpm run dev