Skip to content

Commit dbc100b

Browse files
cloydlaucloydlau
committed
docs: declare the support for Vue CLI 2 & 1
1 parent 768fda6 commit dbc100b

File tree

2 files changed

+93
-19
lines changed

2 files changed

+93
-19
lines changed

‎README.md‎

Lines changed: 46 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ English | [简体中文](./docs/README.zh-CN.md)
3030

3131
- Support Vue 2.6 / 2.7 / 3
3232
- Support SSR (Nuxt 2 / 3)
33-
- Support Vite, Vue CLI 3 / 4 / 5, CDN...
33+
- Support Vite, Vue CLI, webpack, CDN...
3434
- Support microfrontends ([wujie](https://github.com/Tencent/wujie), [qiankun](https://github.com/umijs/qiankun), [single-spa](https://github.com/single-spa/single-spa)...)
3535
- Edit mode two-way binding
3636
- Local registration + local configuration, or global registration + global configuration (Powered by [vue-global-config](https://github.com/cloydlau/vue-global-config))
@@ -50,7 +50,7 @@ English | [简体中文](./docs/README.zh-CN.md)
5050
### Vue 3
5151

5252
```shell
53-
npm add json-editor-vue vanilla-jsoneditor
53+
npm i json-editor-vue vanilla-jsoneditor
5454
```
5555

5656
#### Local Registration
@@ -162,7 +162,7 @@ createApp()
162162
### Vue 2.7
163163

164164
```shell
165-
npm add json-editor-vue vanilla-jsoneditor
165+
npm i json-editor-vue vanilla-jsoneditor
166166
```
167167

168168
#### Local Registration
@@ -274,7 +274,7 @@ Vue.use(JsonEditorVue, {
274274
### Vue 2.6 or Earlier
275275

276276
```shell
277-
npm add json-editor-vue vanilla-jsoneditor @vue/composition-api
277+
npm i json-editor-vue vanilla-jsoneditor @vue/composition-api
278278
```
279279

280280
#### Local Registration
@@ -408,7 +408,7 @@ Vue.use(JsonEditorVue, {
408408
### Nuxt 3
409409

410410
```shell
411-
npm add json-editor-vue vanilla-jsoneditor
411+
npm i json-editor-vue vanilla-jsoneditor
412412
```
413413

414414
#### Local Registration
@@ -492,7 +492,7 @@ const value = ref()
492492
### Nuxt 2 + Vue 2.7
493493

494494
```shell
495-
npm add json-editor-vue vanilla-jsoneditor
495+
npm i json-editor-vue vanilla-jsoneditor
496496
```
497497

498498
#### Local Registration
@@ -582,7 +582,7 @@ const value = ref()
582582
### Nuxt 2 + Vue 2.6 or Earlier
583583

584584
```shell
585-
npm add json-editor-vue vanilla-jsoneditor @vue/composition-api
585+
npm i json-editor-vue vanilla-jsoneditor @vue/composition-api
586586
```
587587

588588
#### Local Registration
@@ -739,7 +739,7 @@ module.exports = {
739739
Vite 4 (Rollup 3) uses ES2020 as compiler target by default, therefore Vite-4-built outputs should be transpiled in webpack 4.
740740

741741
```shell
742-
npm add @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining -D
742+
npm i @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining -D
743743
```
744744

745745
```js
@@ -771,6 +771,43 @@ module.exports = {
771771

772772
<br>
773773

774+
### Vue CLI 2 & 1 (webpack 3)
775+
776+
Vue CLI 2 & 1 pull the template from [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack).
777+
778+
```shell
779+
npm i @babel/core@latest @babel/preset-env@latest babel-loader@latest -D
780+
```
781+
782+
```js
783+
// babel.config.js
784+
785+
module.exports = {
786+
presets: [
787+
'@babel/preset-env',
788+
],
789+
}
790+
```
791+
792+
```js
793+
// webpack.base.conf.js
794+
795+
module.exports = {
796+
module: {
797+
rules: [
798+
// Getting webpack to recognize the `.mjs` file
799+
{
800+
test: /\.mjs$/,
801+
loader: 'babel-loader',
802+
include: [resolve('src'), resolve('test'), resolve('node_modules/json-editor-vue')],
803+
},
804+
],
805+
},
806+
}
807+
```
808+
809+
<br>
810+
774811
## Props
775812

776813
| Name | Description | Type | Default |
@@ -853,7 +890,7 @@ Detailed changes for each release are documented in the [release notes](https://
853890

854891
1. [Install Deno](https://deno.land/#installation)
855892

856-
2. `npm add pnpm @cloydlau/scripts -g; pnpm i`
893+
2. `npm i pnpm @cloydlau/scripts -g; pnpm i`
857894

858895
3. Start
859896

‎docs/README.zh-CN.md‎

Lines changed: 47 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@
2828

2929
- Vue 2.6 / 2.7 / 3 通用
3030
- 支持 SSR，Nuxt 2 / 3 通用
31-
- 支持 Vite，Vue CLI 3 / 4 / 5, CDN……
32-
- 支持微前端 ([wujie](https://github.com/Tencent/wujie), [qiankun](https://github.com/umijs/qiankun), [single-spa](https://github.com/single-spa/single-spa)……)
31+
- 支持 Vite，Vue CLI，webpack，CDN……
32+
- 支持微前端 ([wujie](https://github.com/Tencent/wujie)，[qiankun](https://github.com/umijs/qiankun)，[single-spa](https://github.com/single-spa/single-spa)……)
3333
- 编辑模式双向绑定
3434
- 局部注册 + 局部传参，也可以全局注册 + 全局传参 ([vue-global-config](https://github.com/cloydlau/vue-global-config) 提供技术支持)
3535

@@ -48,7 +48,7 @@
4848
### Vue 3
4949

5050
```shell
51-
npm add json-editor-vue vanilla-jsoneditor
51+
npm i json-editor-vue vanilla-jsoneditor
5252
```
5353

5454
#### 局部注册
@@ -160,7 +160,7 @@ createApp()
160160
### Vue 2.7
161161

162162
```shell
163-
npm add json-editor-vue vanilla-jsoneditor
163+
npm i json-editor-vue vanilla-jsoneditor
164164
```
165165

166166
#### 局部注册
@@ -272,7 +272,7 @@ Vue.use(JsonEditorVue, {
272272
### Vue 2.6 或更早版本
273273

274274
```shell
275-
npm add json-editor-vue vanilla-jsoneditor @vue/composition-api
275+
npm i json-editor-vue vanilla-jsoneditor @vue/composition-api
276276
```
277277

278278
#### 局部注册
@@ -406,7 +406,7 @@ Vue.use(JsonEditorVue, {
406406
### Nuxt 3
407407

408408
```shell
409-
npm add json-editor-vue vanilla-jsoneditor
409+
npm i json-editor-vue vanilla-jsoneditor
410410
```
411411

412412
#### 局部注册
@@ -490,7 +490,7 @@ const value = ref()
490490
### Nuxt 2 + Vue 2.7
491491

492492
```shell
493-
npm add json-editor-vue vanilla-jsoneditor
493+
npm i json-editor-vue vanilla-jsoneditor
494494
```
495495

496496
#### 局部注册
@@ -580,7 +580,7 @@ const value = ref()
580580
### Nuxt 2 + Vue 2.6 或更早版本
581581

582582
```shell
583-
npm add json-editor-vue vanilla-jsoneditor @vue/composition-api
583+
npm i json-editor-vue vanilla-jsoneditor @vue/composition-api
584584
```
585585

586586
#### 局部注册
@@ -737,7 +737,7 @@ module.exports = {
737737
Vite 4 (Rollup 3) 默认的编译目标为 ES2020，所以在 webpack 4 中需要对 Vite 4 打包的依赖进行转译。
738738

739739
```shell
740-
npm add @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining -D
740+
npm i @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining -D
741741
```
742742

743743
```js
@@ -769,6 +769,43 @@ module.exports = {
769769

770770
<br>
771771

772+
### Vue CLI 2 & 1 (webpack 3)
773+
774+
Vue CLI 2 & 1 从 [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack) 拉取模板。
775+
776+
```shell
777+
npm i @babel/core@latest @babel/preset-env@latest babel-loader@latest -D
778+
```
779+
780+
```js
781+
// babel.config.js
782+
783+
module.exports = {
784+
presets: [
785+
'@babel/preset-env',
786+
],
787+
}
788+
```
789+
790+
```js
791+
// webpack.base.conf.js
792+
793+
module.exports = {
794+
module: {
795+
rules: [
796+
// 让 webpack 识别 `.mjs` 文件
797+
{
798+
test: /\.mjs$/,
799+
loader: 'babel-loader',
800+
include: [resolve('src'), resolve('test'), resolve('node_modules/json-editor-vue')],
801+
},
802+
],
803+
},
804+
}
805+
```
806+
807+
<br>
808+
772809
## Props
773810

774811
| 名称 | 说明 | 类型 | 默认值 |
@@ -851,7 +888,7 @@ import JsonEditorVue from 'json-editor-vue'
851888

852889
1. [安装 Deno](https://x.deno.js.cn/#%E5%AE%89%E8%A3%85%E6%9C%80%E6%96%B0%E7%89%88)
853890

854-
2. `npm add pnpm @cloydlau/scripts -g; pnpm i`
891+
2. `npm i pnpm @cloydlau/scripts -g; pnpm i`
855892

856893
3. 启动
857894

0 commit comments

Comments
 (0)