@lx-frontend/wrap-element-ui 1.0.0-beta → 1.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -29
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,40 +1,30 @@
|
|
|
1
|
+
### 介绍
|
|
1
2
|
|
|
2
|
-
|
|
3
|
+
`wrap-element-ui` 是一款基于 `element-UI` 二次封装的前端组件库，主要用于快速开发 PC 网站中后台产品
|
|
3
4
|
|
|
4
|
-
|
|
5
|
+
### 使用 npm 安装
|
|
5
6
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
实际项目中，往往会使用 `webpack`，`rollup` 或者 `gulp` 的工作流，大多可以做到按需加载页面用到的组件，所以不推荐直接使用 `<script>` 标签全局引入的方式使用。
|
|
9
|
-
|
|
10
|
-
### 全局组件使用
|
|
11
|
-
|
|
12
|
-
可以在项目的入口文件中引入所有组件或所需组件
|
|
13
|
-
|
|
14
|
-
```js
|
|
15
|
-
import WrapEle from '@lx-frontend/wrap-element-ui' // 引入组件库
|
|
16
|
-
import 'wrap-element-ui/packages/theme-default/lib/index.css' // 引入样式库
|
|
17
|
-
|
|
18
|
-
Vue.use(WrapEle)
|
|
7
|
+
```bash
|
|
8
|
+
pnpm i wrap-element-ui
|
|
19
9
|
```
|
|
20
10
|
|
|
21
|
-
###
|
|
11
|
+
### 组件使用
|
|
22
12
|
|
|
23
13
|
可以局部注册所需的组件，适用于与其他框架组合使用的场景
|
|
24
14
|
|
|
25
15
|
```js
|
|
26
|
-
import { DemoComponent } from
|
|
16
|
+
import { DemoComponent } from "@lx-frontend/wrap-element-ui";
|
|
27
17
|
|
|
28
18
|
export default {
|
|
29
19
|
components: {
|
|
30
|
-
DemoComponent
|
|
31
|
-
}
|
|
32
|
-
}
|
|
20
|
+
DemoComponent,
|
|
21
|
+
},
|
|
22
|
+
};
|
|
33
23
|
```
|
|
34
24
|
|
|
35
25
|
在模板中，用 `<DemoComponent></DemoComponent>` 自定义标签的方式使用组件
|
|
36
26
|
|
|
37
|
-
```
|
|
27
|
+
```xml
|
|
38
28
|
<template>
|
|
39
29
|
<div>
|
|
40
30
|
<DemoComponent>这是一个 demo 组件</DemoComponent>
|
|
@@ -42,13 +32,14 @@ export default {
|
|
|
42
32
|
</template>
|
|
43
33
|
```
|
|
44
34
|
|
|
45
|
-
|
|
35
|
+
### 开发指南
|
|
46
36
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
37
|
+
新增或修改组件时，使用 `pnpm sb:dev` 可以实时预览 stories。
|
|
38
|
+
|
|
39
|
+
开发完成后，可以使用 `pnpm sb:dist` 预览打包后的组件是否能正常工作。与 `pnpm sb:dev` 的区别在于，该命令修改了组件的引用地址，指向了打包后的组件。该命令不能实时预览修改。
|
|
40
|
+
|
|
41
|
+
`build:lib`命令用于打包组件库，生成组件代码及类型定义文件。
|
|
42
|
+
|
|
43
|
+
`build:sb` 用于生成 stories 静态预览文件。
|
|
54
44
|
|
|
45
|
+
`pnpm preview` 用于预览`build:sb`生成的静态文件。
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lx-frontend/wrap-element-ui",
|
|
3
|
-
"version": "1.0.0-beta",
|
|
3
|
+
"version": "1.0.0-beta.2",
|
|
4
4
|
"description": "wrap-element-ui",
|
|
5
5
|
"author": "",
|
|
6
6
|
"main": "dist/index.mjs",
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
"files": [
|
|
20
20
|
"dist",
|
|
21
21
|
"README.md",
|
|
22
|
+
"package.json",
|
|
22
23
|
"src/components"
|
|
23
24
|
],
|
|
24
25
|
"dependencies": {
|