Skip to content

Commit b8ea646

Browse files
ruojianllruojianll
committed
docs
1 parent da77328 commit b8ea646

File tree

6 files changed

+207
-1
lines changed

6 files changed

+207
-1
lines changed

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

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ A sample example:
88

99
## Installation
1010

11+
### In TypeScript projects
12+
1113
Install `vue-facing-decorator` with your favorite package manager.
1214

1315
```
@@ -24,6 +26,105 @@ Enable `experimentalDecorators` in `tsconfig.json` in project root directory.
2426
}
2527
```
2628

29+
### In JavaScript projects
30+
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+
```
127+
27128
## How to use?
28129
29130
### Define a class component

‎docs/en/readme.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
Works on TypeScript and decorator.
88

99
* Community desired vue class component with typescript decorators.
10+
* Compatible with both stage3 and stage2 decorators.
11+
* Compatible with both TypeScript and JavaScript projects.
1012
* Safety. Transform es class to vue options api according to specifications.
1113
* Performance. Once transform on project loading, ready for everywhere.
1214
* Support ES class inherit, vue `extends` and vue `mixins`.

‎docs/readme.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
Works on TypeScript and decorator.
88

99
* Community desired vue class component with typescript decorators.
10+
* Compatible with both stage3 and stage2 decorators.
11+
* Compatible with both TypeScript and JavaScript projects.
1012
* Safety. Transform es class to vue options api according to specifications.
1113
* Performance. Once transform on project loading, ready for everywhere.
1214
* Support ES class inherit, vue `extends` and vue `mixins`.

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88

99
## 安装
1010

11+
### TypeScript 项目
12+
1113
使用你喜欢的包管理器来安装`vue-facing-decorator`。
1214

1315
```
@@ -24,6 +26,100 @@ npm install --save vue-facing-decorator
2426
}
2527
```
2628

29+
30+
### JavaScript 项目
31+
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+
```
122+
27123
## 如何使用?
28124
29125
### 定义一个类组件

‎docs/zh-cn/readme.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
基于TypeScript和装饰器。
88

99
* 通过类的方式来写vue组件。
10+
* 兼容 stage3 和 stage2 装饰器。
11+
* 兼容 TypeScript 和 JavaScript 项目。
1012
* 稳定、安全，根据vue规范将es 类转换成vue option api。
1113
* 高性能，项目加载时转换一次，随处可用。
1214
* 支持 ES 类 继承、vue `extends` 和 vue `mixins`。

‎readme.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,13 @@
55
Designed for vue 3, do the same work like [vue-class-component](https://github.com/vuejs/vue-class-component) and [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator).
66

77
* Community desired vue class component with typescript decorators.
8+
* Compatible with both stage3 and stage2 decorators.
9+
* Compatible with both TypeScript and JavaScript projects.
810
* Safety. Transform ES class to vue option api according to specifications.
911
* Performance. Once transform on project loading, ready for everywhere.
1012
* Support ES class inheritance, vue `extends` and vue `mixins`.
11-
* [Official recommended](https://class-component.vuejs.org)
13+
* [Official recommended](https://class-component.vuejs.org).
14+
1215

1316

1417
Welcome to suggest and contribute.

0 commit comments

Comments
 (0)