Skip to content

Commit ad9ccdd

Browse files
ruojianllruojianll
committed
docs
1 parent 7c922d7 commit ad9ccdd

13 files changed

+52
-231
lines changed

‎docs/en/_sidebar.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
- [Attribute types](/en/tsx/attribute-types/attribute-types.md)
2424
- Custom Decorator
2525
- [Custom Decorator](/en/custom/custom.md)
26-
- Migrate from v2
27-
- [Migrate from v2](/en/migrate-from-v2/migrate-from-v2.md)
26+
- Migration
27+
- [Migrate from v2 to v3](/en/migration/from-v2-to-v3.md)
2828
- Stage3 decorators
2929
- [Stage3 decorators](/en/stage3-decorators/stage3-decorators.md)

‎docs/en/compatibility/-deprecated- reflect-metadata/code-usage.ts

-6
This file was deleted.

‎docs/en/compatibility/-deprecated- reflect-metadata/code-webpack-alias-vue-config.js

-7
This file was deleted.

‎docs/en/compatibility/-deprecated- reflect-metadata/code-webpack-alias-webpack-config.js

-11
This file was deleted.

‎docs/en/compatibility/-deprecated- reflect-metadata/reflect-metadata.md

-15
This file was deleted.

‎docs/en/migrate-from-v2/breaking-changes-classProperty.ts renamed to ‎docs/en/migration/from-v2-to-v3-breaking-changes-classProperty.ts

File renamed without changes.

‎docs/en/migrate-from-v2/breaking-changes-toNative.ts renamed to ‎docs/en/migration/from-v2-to-v3-breaking-changes-toNative.ts

File renamed without changes.

‎docs/en/migrate-from-v2/migrate-from-v2.md renamed to ‎docs/en/migration/from-v2-to-v3.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
## Migrate from v2
1+
## Migrate from v2 to v3
22

33
To migrate from v2, you need to change your project with some break changes.
44

@@ -10,13 +10,13 @@ In 3.x, decorator `Component` is same to `ComponentBase`, and you should cast cl
1010

1111
It is recommended to use `toNative` to transform a class component into a vue options API component, after that, the transformed component could be used as a native vue component in where vue accepts it.
1212

13-
[](./breaking-changes-toNative.ts ':include :type=code typescript')
13+
[](./from-v2-to-v3-breaking-changes-toNative.ts ':include :type=code typescript')
1414

1515
### Depreactate init class property despends on another in constructor
1616

1717
This is not allowed now.
1818

19-
[](./breaking-changes-classProperty.ts ':include :type=code typescript')
19+
[](./from-v2-to-v3-breaking-changes-classProperty.ts ':include :type=code typescript')
2020

2121
### Remove `index-return-cons`
2222

‎docs/en/quick-start/quick-start.md

+1-96
Original file line numberDiff line numberDiff line change
@@ -28,102 +28,7 @@ Enable `experimentalDecorators` in `tsconfig.json` in project root directory.
2828

2929
### In JavaScript projects
3030

31-
#### Vite
32-
33-
1. Install the required dependencies:
34-
35-
```shell
36-
npm install @haixing_hu/vue3-class-component
37-
npm install @babel/core @babel/runtime @babel/preset-env
38-
npm install @babel/plugin-proposal-decorators @babel/plugin-transform-class-properties @babel/plugin-transform-runtime
39-
```
40-
41-
2. Configure [Babel] by using [@babel/plugin-transform-class-properties] and
42-
[@babel/plugin-proposal-decorators] plugins. A possible [Babel] configuration
43-
file `babelrc.json` is as follows:
44-
45-
```json
46-
{
47-
"presets": [
48-
["@babel/preset-env", { "modules": false }]
49-
],
50-
"plugins": [
51-
"@babel/plugin-transform-runtime",
52-
["@babel/plugin-proposal-decorators", { "version": "2023-05" }],
53-
"@babel/plugin-transform-class-properties"
54-
]
55-
}
56-
```
57-
58-
**Note:** When bundling with [vite], make sure to set the `modules` parameter
59-
of `@babel/preset-env` to `false`.
60-
61-
3. Configure [vite] by modifying the `vite.config.js` file to add support for
62-
[Babel]. A possible `vite.config.js` file is as follows:
63-
64-
```js
65-
import { fileURLToPath, URL } from 'node:url';
66-
import { defineConfig } from 'vite';
67-
import vue from '@vitejs/plugin-vue';
68-
import * as babel from '@babel/core';
69-
70-
// A very simple Vite plugin support babel transpilation
71-
const babelPlugin = {
72-
name: 'plugin-babel',
73-
transform: (src, id) => {
74-
if (/\.(jsx?|vue)$/.test(id)) { // the pattern of the file to handle
75-
return babel.transform(src, {
76-
filename: id,
77-
babelrc: true,
78-
});
79-
}
80-
},
81-
};
82-
83-
// https://vitejs.dev/config/
84-
export default defineConfig({
85-
plugins: [
86-
vue({
87-
script: {
88-
babelParserPlugins: ['decorators'], // must enable decorators support
89-
},
90-
}),
91-
babelPlugin, // must be after the vue plugin
92-
],
93-
resolve: {
94-
alias: {
95-
'@': fileURLToPath(new URL('./src', import.meta.url)),
96-
},
97-
},
98-
});
99-
```
100-
101-
#### Webpack
102-
103-
1. Install the required dependencies:
104-
105-
```shell
106-
npm install @haixing_hu/vue3-class-component
107-
npm install @babel/core @babel/runtime @babel/preset-env
108-
npm install @babel/plugin-proposal-decorators @babel/plugin-transform-class-properties @babel/plugin-transform-runtime
109-
```
110-
111-
2. Configure [Babel] by using the [@babel/plugin-transform-class-properties]
112-
and [@babel/plugin-proposal-decorators] plugins. A possible [Babel]
113-
configuration file `babelrc.json` is as follows:
114-
115-
```json
116-
{
117-
"presets": [
118-
"@babel/preset-env"
119-
],
120-
"plugins": [
121-
"@babel/plugin-transform-runtime",
122-
["@babel/plugin-proposal-decorators", { "version": "2023-05" }],
123-
"@babel/plugin-transform-class-properties"
124-
]
125-
}
126-
```
31+
`vue-facing-decorator` could be used in pure JavaScript Vue projects. you must enable decorator features manully(e.g. transform decorators by `babel`).
12732

12833
## How to use?
12934

‎docs/zh-cn/_sidebar.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,8 @@
2222
- [TSX](/zh-cn/tsx/tsx-render/tsx-render.md)
2323
- [属性类型](/zh-cn/tsx/attribute-types/attribute-types.md)
2424
- 自定义装饰器
25-
- [自定义装饰器](/zh-cn/custom/custom.md)
25+
- [自定义装饰器](/zh-cn/custom/custom.md)
26+
- 从旧版迁移
27+
- [v2迁移到v3](/zh-cn/migration/from-v2-to-v3.md)
28+
- Stage3装饰器
29+
- [Stage3装饰器](/zh-cn/stage3-decorators/stage3-decorators.md)

‎docs/zh-cn/migration/from-v2-to-v3.md

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
## v2迁移到v3
2+
3+
从v2迁移到v3，会对你的项目进行一些破坏性改变。
4+
5+
在3.x中, 装饰器`Component`和装饰器`ComponentBase`相同，并且你需要手动将类组件转换为vue options API组件。具体内容如下：
6+
7+
## 破坏性改变
8+
9+
### 转换class component为vue options API组件
10+
11+
建议使用`toNative`将类组件转换为vue options API组件，转换后的组件可以被用在任何使用vue原生组件的地方。
12+
13+
[](../../en/migration/from-v2-to-v3-breaking-changes-toNative.ts ':include :type=code typescript')
14+
15+
### 不可在声明类组件属性时直接使用其他属性或方法
16+
17+
下面的代码不允许：
18+
19+
[](../../en/migration/from-v2-to-v3-breaking-changes-classProperty.ts ':include :type=code typescript')
20+
21+
### 移除`index-return-cons`
22+
23+
移除`vue-facing-decorator/dist/index-return-cons`，因为现在有`toNative`了。

‎docs/zh-cn/quick-start/quick-start.md

+1-90
Original file line numberDiff line numberDiff line change
@@ -29,96 +29,7 @@ npm install --save vue-facing-decorator
2929

3030
### JavaScript 项目
3131

32-
#### Vite
33-
34-
1. 安装依赖:
35-
36-
```shell
37-
npm install @haixing_hu/vue3-class-component
38-
npm install @babel/core @babel/runtime @babel/preset-env
39-
npm install @babel/plugin-proposal-decorators @babel/plugin-transform-class-properties @babel/plugin-transform-runtime
40-
```
41-
42-
2. 配置`babel.config.json`文件：
43-
44-
```json
45-
{
46-
"presets": [
47-
["@babel/preset-env", { "modules": false }]
48-
],
49-
"plugins": [
50-
"@babel/plugin-transform-runtime",
51-
["@babel/plugin-proposal-decorators", { "version": "2023-05" }],
52-
"@babel/plugin-transform-class-properties"
53-
]
54-
}
55-
```
56-
57-
**Note:** `@babel/preset-env` 的 `modules` 选项必须为 `false`。
58-
59-
3. 配置 `vite.config.js` ：
60-
61-
```js
62-
import { fileURLToPath, URL } from 'node:url';
63-
import { defineConfig } from 'vite';
64-
import vue from '@vitejs/plugin-vue';
65-
import * as babel from '@babel/core';
66-
67-
// A very simple Vite plugin support babel transpilation
68-
const babelPlugin = {
69-
name: 'plugin-babel',
70-
transform: (src, id) => {
71-
if (/\.(jsx?|vue)$/.test(id)) { // the pattern of the file to handle
72-
return babel.transform(src, {
73-
filename: id,
74-
babelrc: true,
75-
});
76-
}
77-
},
78-
};
79-
80-
// https://vitejs.dev/config/
81-
export default defineConfig({
82-
plugins: [
83-
vue({
84-
script: {
85-
babelParserPlugins: ['decorators'], // 必须开启 decorators 支持
86-
},
87-
}),
88-
babelPlugin, // 在 vue plugin 之后
89-
],
90-
resolve: {
91-
alias: {
92-
'@': fileURLToPath(new URL('./src', import.meta.url)),
93-
},
94-
},
95-
});
96-
```
97-
98-
#### Webpack
99-
100-
1. 安装依赖：
101-
102-
```shell
103-
npm install @haixing_hu/vue3-class-component
104-
npm install @babel/core @babel/runtime @babel/preset-env
105-
npm install @babel/plugin-proposal-decorators @babel/plugin-transform-class-properties @babel/plugin-transform-runtime
106-
```
107-
108-
2. 配置`babel.config.json`文件：
109-
110-
```json
111-
{
112-
"presets": [
113-
"@babel/preset-env"
114-
],
115-
"plugins": [
116-
"@babel/plugin-transform-runtime",
117-
["@babel/plugin-proposal-decorators", { "version": "2023-05" }],
118-
"@babel/plugin-transform-class-properties"
119-
]
120-
}
121-
```
32+
`vue-facing-decorator`可以被用在纯粹的JavaScript项目中。你必须手动开启装饰器支持(例如通过`babel`来转换装饰器)。
12233

12334
## 如何使用?
12435

‎docs/zh-cn/stage3-decorators/stage3-decorators.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
## Stage3 装饰器
2+
3+
`vue-facing-decorator`对stage3装饰器兼容，但是一些第三方库目前还不支持(例如`esbuild`在编译 `.vue`文件时)。
4+
5+
因此目前建议在你的项目中仍然使用stage2装饰器。但是如果你想要尝试stage3装饰器，请看下面的文档。
6+
7+
## 配置
8+
9+
开启stage3装饰器，你需要：
10+
11+
1. 升级`typescript`到版本5。
12+
13+
2. 设置`compilerOptions.experimentalDecorators`为`false`，这会开启stage3装饰器。
14+
15+
## 重要
16+
17+
你必须使用`toNative`来将类组件转化为vue options API组件。

0 commit comments

Comments
 (0)