Vue3 + Vite 编写UI组件库并发布

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

1.前言

尤大大的vue3出来后迫不及待的用了起来，把之前公司项目重构了一遍，然后搭建了一个基于Vue3 + Vite的UI库，有不足的地方希望能一起探讨。

ds-design文档地址：Ds Design for Vue3 | ds-design

github地址：github.com/guanshundai…

2.搭建基本结构

我是用vite搭建的，用不用ts看个人选择，具体可以看官方文档

3.使用vitePress（编写markdown文档，会将你写的md文档转换成html）

不了解markdown怎么编写的可以看这里

1. 运行 npm i -D vitepress 进行安装 vitePress。
2. 在 项目根目录 新建 docs 文件夹，在docs文件夹下分别新建index.md、.vitepress文件夹、components文件夹，其中：index.md 编写项目文档、.vitepress下新建config.js配置文件、components里是你编写的vue组件。

config.js

module.exports = {
  // 网站标题
  title: 'ds-design',
  // 网站描述
  description: 'Interview with vitePress',
  // 打包目录
  dest: './dist',
  head: [
    // 添加图标
    ['link', { rel: 'icon', href: '/favicon.ico' }]
  ],
  themeConfig: {
    // 获取每个文件最后一次 git 提交的 UNIX 时间戳(ms)，同时它将以合适的日期格式显示在每一页的底部
    // lastUpdated: 'Last Updated', // string | boolean
    // 启动页面丝滑滚动
    smoothScroll: true,
    // 导航栏配置
    nav: [
      { text: '我的个人网站', link: 'https://daiguanshun.cn' },
      { text: 'Github', link: 'https://github.com/guanshundai' },
    ],
    // sidebar: 'auto'
    sidebar: {
      '/': getSidebar()
    },
  }
}

function getSidebar() {
  return [
    {
      text: '开始',
      link: '/',
    },
    {
      text: 'Button 按钮',
      link: '/Button',
    },
  ]
}

1. 修改 package.json 中的运行脚本。

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "docs:dev": "vitepress dev docs",
  "docs:build": "vitepress build docs"
}

现在基本的项目结构已经搭建完了，开始编写组件，这里我以Switch为例，其他的都差不多这个套路

先看一下项目基本目录结构

​

编辑

添加图片注释，不超过 140 字（可选）

4.编写Button组件

在components文件夹下新建Switch文件夹

Switch/index.vue

<template>
  <button
    class="ds-switch"
    :class="checked ? 'ds-switch-checked' : ''"
    @click="switchHandel"
    :style="{
      'background-color': checked ? '#338eff' : '#00000040',
      transform:
        size === 'small'
          ? 'scale(.7, .7)'
          : size === 'large'
          ? 'scale(1.3, 1.3)'
          : 'scale(1, 1)',
    }"
  >
    <div class="ds-switch-hendel"></div>
    <span
      class="ds-switch-text"
      :class="checked ? 'ds-switch-text-checked' : 'ds-switch-text-unchecked'"
      v-if="checkedText && uncheckedText"
      >{{ checked ? checkedText : uncheckedText }}</span
    >
  </button>
</template>

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

interface Prop {
  checkedText?: string;
  uncheckedText?: string;
  size?: string;
}
const props = withDefaults(defineProps<Prop>(), {
  checkedText: "",
  uncheckedText: "",
  size: "normal",
});

const emits = defineEmits(["switch"]);

const checked = ref<boolean>(false);

const switchHandel = () => {
  checked.value = !checked.value;
  emits("switch", checked.value);
  // console.log(checked.value);
};
</script>

<style scoped lang='less'>
@default-color: color('#338eff');
.ds-switch {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  min-width: 44px;
  height: 22px;
  line-height: 22px;
  border-radius: 100px;
  font-size: 14px;
  vertical-align: middle;
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 0 2px #00000020;
  overflow: hidden;

  &:hover {
    box-shadow: none;
  }
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.1%);
    transform: scale(10);
    opacity: 0;
    transition: all 0.6s;
  }
  &:active::after {
    transform: scale(0);
    opacity: 0.7;
    transition: 0s;
  }
}

.ds-switch-hendel {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.2s ease-in-out;
}

.ds-switch-checked .ds-switch-hendel {
  left: calc(100% - 20px);
}
.ds-switch-checked {
  box-shadow: 0 0 0 2px fade(@default-color, 70%);
}

.ds-switch-text {
  color: #fff;
  font-size: 12px;
  position: absolute;
  font-weight: 600;
}
.ds-switch-text-checked {
  &:extend(.ds-switch-text);
  left: 7px;
}
.ds-switch-text-unchecked {
  &:extend(.ds-switch-text);
  right: 7px;
}
</style>

5.编写index.ts

Switch/index.ts

import { App } from 'vue'
import Switch from './index.vue'

Switch.name = 'ds-switch'

Switch.install = (app: App) => {
  app.component(Switch.name, Switch)
}

export default Switch

​

编辑

添加图片注释，不超过 140 字（可选）

6.在Swicth同级目录下新建index.ts

import { App } from 'vue' //如果没用ts，这个可以去掉
import Switch from './Switch'

//按需引入
const components = [ Switch ]

//全局引入
const install = (app: App) => {
  components.map(item => {
    app.component(item.name, item)
  })
}

export default {
  install,
  ...components
}

先测试一下效果

<template>
  <ds-switch checkedText="开" uncheckedText="关" />
</template>

<script setup>
  import DsSwitch from '../components/Switch/index.vue'. //你自己的路径
</script>

​

添加图片注释，不超过 140 字（可选）

6.编写Switch.md

在docs文件夹下新建Switch.md，在docs下的components中把src下Switch组件复制过来，index.ts可以去掉

## 开关

**示例**

<ds-switch size="small" />
<ds-switch />
<ds-switch size="large" style="margin-left: 15px" /> <br><br>
<ds-switch checkedText="开" uncheckedText="关" size="small" />
<ds-switch checkedText="开" uncheckedText="关" />
<ds-switch checkedText="开" uncheckedText="关" size="large" style="margin-left: 15px" />

**代码**

```html
<template>
  <ds-switch size="small" />
  <ds-switch />
  <ds-switch size="large" />

  <ds-switch checkedText="开" uncheckedText="关" size="small" />
  <ds-switch checkedText="开" uncheckedText="关" />
  <ds-switch checkedText="开" uncheckedText="关" size="large" />
</template>
```

## API

| 属性           | 说明           | 类型  | 默认值  |
| ------------- |:-------------:| -----:| -----: |
| size       | 设置字体大小        | small/normal/large |  normal |
| checkedText| 开启状态的文字        | string |  开 |
| uncheckedText| 关闭状态的文字        | string |  关 |

**事件**

| 事件名称           | 说明           | 参数  |
| -------------     |:-------------:| -----:|
| switch             | 切换开关事件    | (value: boolean) => void |

<script setup>
  import DsSwitch from './components/Switch/index.vue'
</script>

效果可以看 开关 | ds-design

6.准备打包

vite.config.ts

import { resolve } from 'path'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/components/index.ts'),
      name: 'ds-design',
      fileName: (format) => `ds-design.${format}.ts`
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  },
})

package.json

  "name": "ds-design",
  "version": "0.0.4",
  "files": [
    "dist"
  ],
  "module": "./dist/ds-design.es.ts",
  "main": "./dist/ds-design.umd.ts",
  "exports": {
    ".": {
      "import": "./dist/ds-design.es.ts",
      "require": "./dist/ds-design.umd.ts"
    },
    "./dist/style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    }
  },

\

运行 yarn build 生成 dist文件夹

cd 到 dist 文件夹 运行 npm init -y ，生产 package.json

​

编辑

添加图片注释，不超过 140 字（可选）

{
  "name": "ds-design",   //你自己项目名称
  "version": "1.1.5",
  "description": "",
  "main": "ds-design.es.ts", //入口文件
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/daiguanshun/ds-design.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/daiguanshun/ds-design/issues"
  },
  "homepage": "https://github.com/daiguanshun/ds-design#readme"
}

7. 发布 (没有注册npm的自己去注册）

在 dist 文件夹下运行 npm publish , 没登陆过的会让你登陆一下

每次发布注意 版本 要不同

去npm官网看一下发布情况

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

8.测试

npm i ds-design

main.ts中引用

import DSDesign from 'ds-design'
import 'ds-design/style.css'


app.use(DSDesign)

完整的版地址 github.com/guanshundai…