Skip to content

Commit 573280d

Browse files
committed
docs
1 parent d71f8e2 commit 573280d

File tree

1 file changed

+1
-87
lines changed

1 file changed

+1
-87
lines changed

docs/ja/quick-start/quick-start.md

+1-87
Original file line numberDiff line numberDiff line change
@@ -28,93 +28,7 @@ npm install --save vue-facing-decorator
2828

2929
### JavaScript プロジェクト
3030

31-
#### Vite
32-
33-
1. 必要な依存パッケージをインストールしてください。
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. [@babel/plugin-transform-class-properties]および、[@babel/plugin-proposal-decorators]プラグインを使用して、[Babel] を設定してください。[Babel]の設定ファイル名は`babelrc.json`であることが多く、以下のような内容です。
42-
43-
```json
44-
{
45-
"presets": [["@babel/preset-env", { "modules": false }]],
46-
"plugins": [
47-
"@babel/plugin-transform-runtime",
48-
["@babel/plugin-proposal-decorators", { "version": "2023-05" }],
49-
"@babel/plugin-transform-class-properties"
50-
]
51-
}
52-
```
53-
54-
**Note:** [vite]が含まれている場合, 必ず`@babel/preset-env``modules` パラメーターを`false`に設定してください。
55-
56-
3. [Babel]を利用するため、`vite.config.js`で[vite]を設定してください。設定ファイル名は `vite.config.js` であることが多く、以下のような内容です。
57-
58-
```js
59-
import { fileURLToPath, URL } from 'node:url';
60-
import { defineConfig } from 'vite';
61-
import vue from '@vitejs/plugin-vue';
62-
import * as babel from '@babel/core';
63-
64-
// A very simple Vite plugin support babel transpilation
65-
const babelPlugin = {
66-
name: 'plugin-babel',
67-
transform: (src, id) => {
68-
if (/\.(jsx?|vue)$/.test(id)) {
69-
// the pattern of the file to handle
70-
return babel.transform(src, {
71-
filename: id,
72-
babelrc: true,
73-
});
74-
}
75-
},
76-
};
77-
78-
// https://vitejs.dev/config/
79-
export default defineConfig({
80-
plugins: [
81-
vue({
82-
script: {
83-
babelParserPlugins: ['decorators'], // must enable decorators support
84-
},
85-
}),
86-
babelPlugin, // must be after the vue plugin
87-
],
88-
resolve: {
89-
alias: {
90-
'@': fileURLToPath(new URL('./src', import.meta.url)),
91-
},
92-
},
93-
});
94-
```
95-
96-
#### Webpack
97-
98-
1. 必要な依存パッケージをインストールしてください。
99-
100-
```shell
101-
npm install @haixing_hu/vue3-class-component
102-
npm install @babel/core @babel/runtime @babel/preset-env
103-
npm install @babel/plugin-proposal-decorators @babel/plugin-transform-class-properties @babel/plugin-transform-runtime
104-
```
105-
106-
2. [@babel/plugin-transform-class-properties]および、[@babel/plugin-proposal-decorators]プラグインを使用して、[Babel] を設定してください。[Babel]の設定ファイル名は`babelrc.json`であることが多く、以下のような内容です。
107-
108-
```json
109-
{
110-
"presets": ["@babel/preset-env"],
111-
"plugins": [
112-
"@babel/plugin-transform-runtime",
113-
["@babel/plugin-proposal-decorators", { "version": "2023-05" }],
114-
"@babel/plugin-transform-class-properties"
115-
]
116-
}
117-
```
31+
`vue-facing-decorator` could be used in pure JavaScript Vue projects. you must enable decorator features manully(e.g. transform decorators by `babel`).
11832

11933
## 使用方法
12034

0 commit comments

Comments
 (0)