创建属于自己的 Vue 3 组件库：主题切换与样式管理

构建一个主题化的 Vue 3 组件库需要多个步骤，包括项目的初始化、组件的创建、主题的实现和样式的管理。以下是详细的步骤和实现代码。

1. 初始化项目

使用 Vite 创建 Vue 3 项目：

npm create vite@latest my-vue3-component-library --template vue
cd my-vue3-component-library
npm install

如果执行 npm run dev 报错，可以检查 node 版本，保证版本 16+

2. 安装依赖

你可能需要安装一些额外的依赖，如 vue 和 vue-router（如果你打算添加路由支持）：

npm install vue@next

如果你还需要支持样式的预处理器（如 SCSS），可以安装 Sass：

下面代码已使用Sass，需要执行：

npm install -D sass

3. 项目结构

my-vue3-component-library/
├── node_modules/
├── public/
├── src/
│   ├── components/
│   │   ├── Button.vue
│   │   ├── Card.vue
│   │   └── ThemeSwitcher.vue
│   ├── styles/
│   │   ├── dark-theme.scss
│   │   └── theme.scss
│   ├── App.vue
│   ├── main.js
├── index.html
├── package.json
├── vite.config.js
└── ...

4. 创建基础组件

1.Button.vue

<template><button :class="`btn btn-${type}`" :disabled="isDisabled"><slot></slot></button>
</template><script>
export default {name: 'Button',props: {type: {type: String,default: 'primary',},isDisabled: {type: Boolean,default: false,},},
};
</script><style scoped>
.btn {padding: 0.5em 1em;border: none;border-radius: 5px;cursor: pointer;
}.btn-primary {background-color: #007bff;color: white;
}.btn-secondary {background-color: #6c757d;color: white;
}.btn:disabled {background-color: #ccc;cursor: not-allowed;
}
</style>

2.Card.vue

<template><div class="card"><h2>{{ title }}</h2><slot></slot></div>
</template><script>
export default {name: 'Card',props: {title: {type: String,required: true,},},
};
</script><style scoped>
.card {padding: 1em;border: 1px solid #ddd;border-radius: 5px;margin: 1em 0;
}
</style>

3.ThemeSwitcher.vue

<template><div><label><input type="checkbox" v-model="isDark" @change="toggleTheme" />切换主题</label></div>
</template><script>
export default {name: 'ThemeSwitcher',data() {return {isDark: false,};},methods: {toggleTheme() {this.isDark = !this.isDark;console.log('当前主题状态:', this.isDark);localStorage.setItem('isDark', this.isDark);document.body.classList.toggle('dark-theme', this.isDark);},},mounted() {const darkTheme = localStorage.getItem('isDark') === 'true';this.isDark = darkTheme;document.body.classList.toggle('dark-theme', darkTheme);},
};
</script><style scoped>
label {cursor: pointer;
}
</style>

4. 创建样式文件

1.theme.scss

body {background-color: #f8f9fa;color: #212529;transition: background-color 0.3s, color 0.3s;
}

2.dark-theme.scss

body.dark-theme {background-color: #343a40;color: white;
}

5. 更新 App.vue

<template><div id="app"><h1>主题化 Vue 组件库</h1><ThemeSwitcher /><Button type="primary">主按钮</Button><Button type="secondary">次按钮</Button><Button type="primary" :isDisabled="true">禁用按钮</Button><Card title="卡片标题"><p>这是卡片的内容。</p></Card></div>
</template><script>
import Button from './components/Button.vue';
import Card from './components/Card.vue';
import ThemeSwitcher from './components/ThemeSwitcher.vue';export default {name: 'App',components: {Button,Card,ThemeSwitcher,},
};
</script><style>
@import './styles/theme.scss';
@import './styles/dark-theme.scss';
</style>

6. 更新 main.js

import { createApp } from 'vue';
import App from './App.vue';
import './styles/theme.scss'; // 引入主题样式createApp(App).mount('#app');

7. 启动项目

现在可以启动项目：

npm run dev

8. 访问和测试

现在，你可以在浏览器中访问 http://localhost:3000，查看主题化的 Vue 组件库的效果。可以根据需要扩展组件和主题功能，添加更多样式和功能。你可以继续创建其他组件，并将它们添加到组件库中。

上一篇：
实战篇：（五）UniApp 中 Request 封装与使用全解析（避坑指南）
下一篇：
实战篇：（七）Vue2项目中使用 echarts（5.2.2）图表组件含代码