Skip to content

Commit ae06144

Browse files
akinocccakinoccc
committed
docs: update readme
1 parent fdfc257 commit ae06144

File tree

2 files changed

+42
-228
lines changed

2 files changed

+42
-228
lines changed

‎README.md

Lines changed: 22 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -26,37 +26,33 @@
2626

2727
</div>
2828

29-
## ✨Feature
29+
## ✨Features
3030

31-
✅ Style vue component or styled component
31+
✅ **Component Styling** - Style Vue components, styled components, and HTML elements
3232

33-
✅ Set default attrs
33+
✅ **Props & Attrs** - Pass props, set default attributes, and override attrs dynamically
3434

35-
✅ Passed props
35+
✅ **Theming System** - Built-in theme provider with nested theme support
3636

37-
✅ Support theming
37+
✅ **Performance Optimized** - Smart caching, batch updates, and async processing
3838

39-
✅ Generate keyframes
39+
✅ **CSS Features** - Keyframes, global styles, CSS mixins, and nesting support
4040

41-
✅ Generate css mixin
41+
✅ **Tailwind Integration** - Seamless Tailwind CSS class integration
4242

43-
✅ Create global style
43+
✅ **Plugin System** - Extensible plugin architecture with hooks
4444

45-
✅ Add or override attrs
45+
✅ **Developer Experience** - TypeScript support, performance monitoring, and auto-prefixing
4646

47-
✅ Support nesting css.
48-
49-
✅ Auto-prefix css.
50-
51-
...
47+
✅ **Production Ready** - Optimized for performance with configurable caching and batching
5248

5349
## 📖Documentation
5450

5551
For detailed introduction and usage instructions, please refer to [the documentation website](https://vue-styled-components.com)
5652

57-
## 🚀Getting Start
53+
## 🚀Quick Start
5854

59-
### 📦Install
55+
### 📦Installation
6056

6157
```sh
6258
npm i @vue-styled-components/core
@@ -70,109 +66,19 @@ yarn add @vue-styled-components/core
7066
pnpm i @vue-styled-components/core
7167
```
7268

73-
### 💅Basic
74-
75-
```vue
76-
<script setup lang="ts">
77-
import { styled } from '@vue-styled-components/core';
78-
import OtherComponent from './VueComponent.vue';
79-
80-
const StyledDiv = styled('div')`
81-
width: 100px;
82-
height: 100px;
83-
background-color: #ccc;
84-
color: #000;
85-
`;
86-
const StyledStyledDiv = styled(StyledDiv)`
87-
width: 100px;
88-
height: 100px;
89-
background-color: #000;
90-
color: #fff;
91-
`;
92-
const StyledOtherComponent = styled(OtherComponent)`
93-
width: 100px;
94-
height: 100px;
95-
background-color: red;
96-
color: #fff;
97-
`;
98-
</script>
99-
100-
<template>
101-
<StyledDiv>Styled Div</StyledDiv>
102-
<StyledStyledDiv>Styled Styled Div</StyledStyledDiv>
103-
<StyledOtherComponent>Styled Other Vue Component</StyledOtherComponent>
104-
</template>
105-
```
69+
### 💡Usage
10670

107-
### 🔧Attrs Setting
108-
109-
```vue
110-
<script setup lang="ts">
111-
import { styled } from '@vue-styled-components/core';
112-
113-
const StyledDiv = styled.div.attrs({
114-
class: 'styled-div'
115-
})`
116-
width: 100px;
117-
height: 100px;
118-
background-color: #ccc;
119-
color: #000;
120-
`;
121-
</script>
122-
123-
<template>
124-
<StyledDiv>Styled Div</StyledDiv>
125-
<!-- <div class="styled-div">Styled Div</div> -->
126-
</template>
127-
```
71+
Get started quickly with our comprehensive documentation and examples:
12872

129-
### 🕹️Control Dynamic Style by Props
130-
131-
You must define the props in the `styled` function if you want to use them in the style. Because Vue components
132-
require explicit props declaration so that Vue knows what external props passed to the component should be treated as
133-
fallthrough attributes.(see [Props Declaration](https://vuejs.org/guide/components/props.html#props-declaration))
134-
135-
```vue
136-
<script setup lang="ts">
137-
import { styled } from '@vue-styled-components/core';
138-
139-
const StyledDiv = styled('div', {
140-
color: String
141-
})`
142-
width: 100px;
143-
height: 100px;
144-
background-color: #ccc;
145-
color: ${(props) => props.color};
146-
`;
147-
</script>
148-
149-
<template>
150-
<StyledDiv color="red">Styled Div</StyledDiv>
151-
</template>
152-
```
153-
154-
### 🧙Theming
155-
156-
```vue
157-
<script setup lang="ts">
158-
import { styled, ThemeProvider } from '@vue-styled-components/core';
159-
160-
const StyledDiv = styled.div`
161-
width: 100px;
162-
height: 100px;
163-
background-color: #ccc;
164-
color: ${(props) => props.theme.color};
165-
`;
166-
</script>
167-
168-
<template>
169-
<ThemeProvider :theme="{ color: '#fff' }">
170-
<StyledDiv>Styled Div</StyledDiv>
171-
</ThemeProvider>
172-
</template>
173-
```
73+
**👉 [Visit Documentation Website](https://vue-styled-components.com) 👈**
17474

175-
**More details see [docs site](https://v-vibe.github.io/vue-styled-components/)**
75+
The documentation includes:
76+
- 📚 Complete API reference
77+
- 🎯 Step-by-step tutorials
78+
- 💡 Best practices and patterns
79+
- 🔧 Configuration options
80+
- 🎨 Advanced theming guide
81+
- ⚡ Performance optimization tips
17682

17783
## 🧑‍🤝‍🧑Contributors
17884

‎README.zh_CN.md

Lines changed: 20 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -27,33 +27,29 @@
2727

2828
## ✨特性
2929

30-
✅ 样式化 Vue 组件或原生组件
30+
✅ **组件样式化** - 支持 Vue 组件、样式化组件和 HTML 元素的样式定制
3131

32-
✅ 设置默认 Attributes
32+
✅ **Props 和属性** - 动态传递 props，设置默认属性，灵活覆盖属性
3333

34-
✅ 传递 Props
34+
✅ **主题系统** - 内置主题提供器，支持嵌套主题配置
3535

36-
✅ 支持主题化
36+
✅ **性能优化** - 智能缓存、批量更新和异步处理机制
3737

38-
✅ 生成 keyframes
38+
✅ **CSS 功能** - 关键帧动画、全局样式、CSS mixins 和嵌套支持
3939

40-
✅ 生成可复用 CSS 片段
40+
✅ **Tailwind 集成** - 无缝集成 Tailwind CSS 类名
4141

42-
✅ 创建全局样式
42+
✅ **插件系统** - 可扩展的插件架构和钩子机制
4343

44-
✅ 添加或覆盖 Attributes
44+
✅ **开发体验** - TypeScript 支持、性能监控和自动前缀
4545

46-
✅ 支持嵌套 CSS 写法
47-
48-
✅ 自动添加浏览器私有前缀
49-
50-
...
46+
✅ **生产就绪** - 可配置缓存和批处理的性能优化
5147

5248
## 文档
5349

5450
详细的介绍和使用方法，请参考[官方文档](https://vue-styled-components.com)
5551

56-
## 快速开始
52+
## 🚀快速开始
5753

5854
### 📦安装
5955

@@ -69,107 +65,19 @@ yarn add @vue-styled-components/core
6965
pnpm i @vue-styled-components/core
7066
```
7167

72-
### 💅基本使用
73-
74-
```vue
75-
<script setup lang="ts">
76-
import { styled } from '@vue-styled-components/core';
77-
import OtherComponent from './VueComponent.vue';
78-
79-
const StyledDiv = styled('div')`
80-
width: 100px;
81-
height: 100px;
82-
background-color: #ccc;
83-
color: #000;
84-
`;
85-
const StyledStyledDiv = styled(StyledDiv)`
86-
width: 100px;
87-
height: 100px;
88-
background-color: #000;
89-
color: #fff;
90-
`;
91-
const StyledOtherComponent = styled(OtherComponent)`
92-
width: 100px;
93-
height: 100px;
94-
background-color: red;
95-
color: #fff;
96-
`;
97-
</script>
98-
99-
<template>
100-
<StyledDiv>Styled Div</StyledDiv>
101-
<StyledStyledDiv>Styled Styled Div</StyledStyledDiv>
102-
<StyledOtherComponent>Styled Other Vue Component</StyledOtherComponent>
103-
</template>
104-
```
105-
106-
### 🔧Attributes 设置
107-
108-
```vue
109-
<script setup lang="ts">
110-
import { styled } from '@vue-styled-components/core';
111-
112-
const StyledDiv = styled.div.attrs({
113-
class: 'styled-div'
114-
})`
115-
width: 100px;
116-
height: 100px;
117-
background-color: #ccc;
118-
color: #000;
119-
`;
120-
</script>
121-
122-
<template>
123-
<StyledDiv>Styled Div</StyledDiv>
124-
<!-- <div class="styled-div">Styled Div</div> -->
125-
</template>
126-
```
127-
128-
### 🕹️通过 Props 动态控制样式
68+
### 💡使用指南
12969

130-
如果要在样式中传递 props，则必须在 styled 函数中定义这些属性。因为 Vue 组件需要显式声明 props，以便 Vue 知道应如何处理传递给组件的外部 props（请参阅 [Props Declaration](https://vuejs.org/guide/components/props.html#props-declaration)）
70+
通过我们的完整文档和示例快速上手：
13171

132-
```vue
133-
<script setup lang="ts">
134-
import { styled } from '@vue-styled-components/core';
135-
136-
const StyledDiv = styled('div', {
137-
color: String
138-
})`
139-
width: 100px;
140-
height: 100px;
141-
background-color: #ccc;
142-
color: ${(props) => props.color};
143-
`;
144-
</script>
145-
146-
<template>
147-
<StyledDiv color="red">Styled Div</StyledDiv>
148-
</template>
149-
```
150-
151-
### 🧙主题
152-
153-
```vue
154-
<script setup lang="ts">
155-
import { styled, ThemeProvider } from '@vue-styled-components/core';
156-
157-
const StyledDiv = styled.div`
158-
width: 100px;
159-
height: 100px;
160-
background-color: #ccc;
161-
color: ${(props) => props.theme.color};
162-
`;
163-
</script>
164-
165-
<template>
166-
<ThemeProvider :theme="{ color: '#fff' }">
167-
<StyledDiv>Styled Div</StyledDiv>
168-
</ThemeProvider>
169-
</template>
170-
```
72+
**👉 [访问文档网站](https://vue-styled-components.com) 👈**
17173

172-
**更多细节请查看 [官方文档](https://vue-styled-components.com)**
74+
文档包含：
75+
- 📚 完整的 API 参考
76+
- 🎯 分步教程指南
77+
- 💡 最佳实践和模式
78+
- 🔧 配置选项说明
79+
- 🎨 高级主题化指南
80+
- ⚡ 性能优化技巧
17381

17482
## 🧑‍🤝‍🧑贡献者
17583

0 commit comments

Comments
 (0)