Skip to content

Commit e97fa49

Browse files
committed
更新 README 文件,增加 Element Plus 集成说明,提供完整引入和按需引入的示例;将 package.json 版本号从 1.0.8 升级到 1.1.0。
1 parent 9117aa3 commit e97fa49

File tree

3 files changed

+78
-18
lines changed

3 files changed

+78
-18
lines changed

README.en.md

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -64,20 +64,44 @@ This component depends on:
6464
npm install vue-expression-editor
6565
```
6666

67-
3. Fully import Element Plus in your entry file (e.g., main.ts or main.js):
67+
### Element Plus Integration
6868

69-
```javascript
70-
import { createApp } from 'vue'
71-
import ElementPlus from 'element-plus'
72-
import 'element-plus/dist/index.css'
73-
import App from './App.vue'
69+
This component depends on Element Plus. There are several integration approaches depending on your project setup:
7470

75-
const app = createApp(App)
76-
app.use(ElementPlus)
77-
app.mount('#app')
78-
```
71+
#### 1. Existing Element Plus Project
72+
73+
If your project already has Element Plus fully imported, no additional configuration is needed. Just verify that your Element Plus version meets the requirement (>= 2.4.0).
74+
75+
#### 2. Full Import (Recommended)
76+
77+
If Element Plus is not yet in your project, you can opt for full import:
78+
79+
```bash
80+
npm install element-plus@^2.4.0
81+
```
82+
83+
Then in your entry file (e.g., main.ts or main.js), add:
84+
85+
```javascript
86+
import { createApp } from 'vue'
87+
import ElementPlus from 'element-plus'
88+
import 'element-plus/dist/index.css'
89+
import App from './App.vue'
90+
91+
const app = createApp(App)
92+
app.use(ElementPlus)
93+
app.mount('#app')
94+
```
7995

80-
If you're using on-demand importing, make sure to import the required components and their styles:
96+
#### 3. On-Demand Import
97+
98+
If you want to optimize bundle size, you can import only the required components:
99+
100+
```bash
101+
npm install element-plus@^2.4.0
102+
```
103+
104+
Then in your entry file:
81105

82106
```javascript
83107
import { createApp } from 'vue'
@@ -89,6 +113,7 @@ import {
89113
ElSwitch,
90114
ElTooltip
91115
} from 'element-plus'
116+
// Import component styles
92117
import 'element-plus/es/components/button/style/css'
93118
import 'element-plus/es/components/input/style/css'
94119
import 'element-plus/es/components/popover/style/css'
@@ -98,6 +123,7 @@ import 'element-plus/es/components/tooltip/style/css'
98123
import App from './App.vue'
99124

100125
const app = createApp(App)
126+
// Register components
101127
app.use(ElButton)
102128
app.use(ElInput)
103129
app.use(ElPopover)
@@ -107,6 +133,8 @@ app.use(ElTooltip)
107133
app.mount('#app')
108134
```
109135

136+
> Note: If using on-demand import, ensure all required components and styles above are imported, otherwise the component may display incorrectly.
137+
110138
## Basic Usage
111139

112140
```vue

README.md

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,24 +46,41 @@
4646
### 环境要求
4747

4848
本组件依赖以下库:
49+
4950
- Vue >= 3.3.0
5051
- Element Plus >= 2.4.0
5152

5253
### 安装步骤
5354

5455
1. 首先确保你的项目中已安装必需的依赖:
5556

56-
```bash
57-
npm install vue@^3.3.0 element-plus@^2.4.0
58-
```
57+
```bash
58+
npm install vue@^3.3.0 element-plus@^2.4.0
59+
```
5960

6061
2. 安装vue-expression-editor:
6162

63+
```bash
64+
npm install vue-expression-editor
65+
```
66+
67+
### Element Plus 集成说明
68+
69+
本组件依赖 Element Plus 组件库。根据你的项目情况,有以下几种集成方式:
70+
71+
#### 1. 项目中已有 Element Plus
72+
73+
如果你的项目已经完整引入了 Element Plus,无需额外配置,直接使用组件即可。建议确认你的 Element Plus 版本是否满足要求(>= 2.4.0)。
74+
75+
#### 2. 完整引入(推荐)
76+
77+
如果项目中还没有 Element Plus,可以选择完整引入:
78+
6279
```bash
63-
npm install vue-expression-editor
80+
npm install element-plus@^2.4.0
6481
```
6582

66-
3. 在你的项目入口文件(如main.ts或main.js)中完整引入Element Plus
83+
然后在你的入口文件(如 main.ts 或 main.js)中添加
6784

6885
```javascript
6986
import { createApp } from 'vue'
@@ -76,7 +93,15 @@ app.use(ElementPlus)
7693
app.mount('#app')
7794
```
7895

79-
如果你使用的是按需引入,请确保引入了组件使用的相关组件和样式:
96+
#### 3. 按需引入
97+
98+
如果你希望优化打包体积,可以选择按需引入必需的组件:
99+
100+
```bash
101+
npm install element-plus@^2.4.0
102+
```
103+
104+
然后在入口文件中添加:
80105

81106
```javascript
82107
import { createApp } from 'vue'
@@ -88,6 +113,7 @@ import {
88113
ElSwitch,
89114
ElTooltip
90115
} from 'element-plus'
116+
// 导入组件样式
91117
import 'element-plus/es/components/button/style/css'
92118
import 'element-plus/es/components/input/style/css'
93119
import 'element-plus/es/components/popover/style/css'
@@ -97,6 +123,7 @@ import 'element-plus/es/components/tooltip/style/css'
97123
import App from './App.vue'
98124

99125
const app = createApp(App)
126+
// 注册组件
100127
app.use(ElButton)
101128
app.use(ElInput)
102129
app.use(ElPopover)
@@ -106,6 +133,8 @@ app.use(ElTooltip)
106133
app.mount('#app')
107134
```
108135

136+
> 注意:如果使用按需引入,请确保引入了以上所有必需的组件和样式,否则可能导致组件显示异常。
137+
109138
### 基础用法
110139

111140
```vue
@@ -302,13 +331,15 @@ interface Variable {
302331
编辑器支持中文和英文两种界面语言:
303332

304333
1. 通过属性设置语言:
334+
305335
```vue
306336
<ExpressionEditor
307337
:language="'en'" <!-- 设置为英文界面 -->
308338
/>
309339
```
310340

311341
2. 动态切换语言:
342+
312343
```vue
313344
<script setup>
314345
const currentLang = ref('zh')
@@ -322,6 +353,7 @@ interface Variable {
322353
```
323354

324355
3. 在设置面板中切换:
356+
325357
- 点击设置按钮打开设置面板
326358
- 在语言设置中选择需要的语言
327359
- 设置会自动保存

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-expression-editor",
3-
"version": "1.0.8",
3+
"version": "1.1.0",
44
"description": "A powerful Vue 3 mathematical expression editor component",
55
"main": "dist/index.js",
66
"module": "dist/index.mjs",

0 commit comments

Comments
 (0)