Skip to content

Latest commit

 

History

History
931 lines (726 loc) · 19.4 KB

README.zh-CN.md

File metadata and controls

931 lines (726 loc) · 19.4 KB
Raw

JSON Editor Vue version

JSON 编辑 & 预览工具，支持 Vue 2.6/2.7/3，支持 Nuxt 2/3。
English | 简体中文
🕹 试玩

build status minzipped size
jsdelivr downloads npm downloads
code style conventional commits PRs Welcome

dark theme table mode


特性

  • Vue 2.6/2.7/3 通用
  • 支持 SSR (Nuxt 2/3 通用)
  • 支持 Vite，Vue CLI，webpack，CDN……
  • 支持微前端 (wujie，qiankun，single-spa……)
  • 编辑模式双向绑定
  • 局部注册并传参，或全局注册并传参 (vue-global-config 提供技术支持)

安装

外置依赖

  • vue
  • vanilla-jsoneditor：svelte-jsoneditor (jsoneditor 的继任者) 提供的原生 JS 版本
  • @vue/composition-api：仅 Vue 2.6 或更早版本需要

Vue 3

npm i json-editor-vue vanilla-jsoneditor

局部注册

<template>
  <JsonEditorVue
    v-model="value"
    v-bind="{/* 局部 props & attrs */}"
  />
</template>

<script setup>
import JsonEditorVue from 'json-editor-vue'

const value = ref()
</script>

全局注册

import { createApp } from 'vue'
import JsonEditorVue from 'json-editor-vue'

createApp()
  .use(JsonEditorVue, {
    // 全局 props & attrs（单向数据流）
  })
  .mount('#app')

CDN + ESM

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
</head>

<body>
  <div id="app">
    <json-editor-vue v-model="value"></json-editor-vue>
  </div>

  <script type="importmap">
    {
      "imports": {
        "vue": "https://cdn.jsdelivr.net/npm/vue/dist/vue.esm-browser.prod.js",
        "vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi/lib/v3/index.mjs",
        "vanilla-jsoneditor": "https://cdn.jsdelivr.net/npm/vanilla-jsoneditor",
        "json-editor-vue": "https://cdn.jsdelivr.net/npm/json-editor-vue@0.10/dist/json-editor-vue.mjs"
      }
    }
  </script>
  <script type="module">
    import { createApp, ref } from 'vue'
    import JsonEditorVue from 'json-editor-vue'

    createApp({
      setup: () => ({
        value: ref()
      })
    }).use(JsonEditorVue)
      .mount('#app')
  </script>
</body>

</html>

CDN + IIFE

⚠ 暂不支持 (vanilla-jsoneditor 不提供 IIFE 或 UMD 导出)，如有需要请在这里留言。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
</head>

<body>
  <div id="app">
    <json-editor-vue v-model="value"></json-editor-vue>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
  <!-- TODO --> <script src="./vanilla-jsoneditor.umd.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/json-editor-vue@0.10"></script>
  <script>
    const { createApp, ref } = Vue

    createApp({
      setup: () => ({
        value: ref(),
      }),
    }).component('json-editor-vue', JsonEditorVue)
      .mount('#app')
  </script>
</body>

</html>

Vue 2.7

npm i json-editor-vue vanilla-jsoneditor

局部注册

<template>
  <JsonEditorVue
    v-model="value"
    v-bind="{/* 局部 props & attrs */}"
  />
</template>

<script setup>
import JsonEditorVue from 'json-editor-vue'

const value = ref()
</script>

全局注册

import Vue from 'vue'
import JsonEditorVue from 'json-editor-vue'

Vue.use(JsonEditorVue, {
  // 全局 props & attrs（单向数据流）
})

CDN + ESM

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
</head>

<body>
  <div id="app">
    <json-editor-vue v-model="value"></json-editor-vue>
  </div>

  <script type="importmap">
    {
      "imports": {
        "vue": "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.esm.browser.min.js",
        "vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi/lib/v2.7/index.mjs",
        "vanilla-jsoneditor": "https://cdn.jsdelivr.net/npm/vanilla-jsoneditor",
        "json-editor-vue": "https://cdn.jsdelivr.net/npm/json-editor-vue@0.10/dist/json-editor-vue.mjs"
      }
    }
  </script>
  <script type="module">
    import Vue from 'vue'
    import JsonEditorVue from 'json-editor-vue'

    new Vue({
      components: { JsonEditorVue },
      data() {
        return {
          value: undefined,
        }
      },
    }).$mount('#app')
  </script>
</body>

</html>

CDN + IIFE

⚠ 暂不支持 (vanilla-jsoneditor 不提供 IIFE 或 UMD 导出)，如有需要请在这里留言。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
</head>

<body>
  <div id="app">
    <json-editor-vue v-model="value"></json-editor-vue>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
  <!-- TODO --> <script src="./vanilla-jsoneditor.umd.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/json-editor-vue@0.10"></script>
  <script>
    new Vue({
      components: { JsonEditorVue },
      data() {
        return {
          value: undefined,
        }
      },
    }).$mount('#app')
  </script>
</body>

</html>

Vue 2.6 或更早版本

npm i json-editor-vue vanilla-jsoneditor @vue/composition-api

局部注册

<template>
  <JsonEditorVue
    v-model="value"
    v-bind="{/* 局部 props & attrs */}"
  />
</template>

<script>
import Vue from 'vue'
import VCA from '@vue/composition-api'
import JsonEditorVue from 'json-editor-vue'

Vue.use(VCA)

export default {
  components: { JsonEditorVue },
  data() {
    return {
      value: undefined,
    }
  },
}
</script>

全局注册

import Vue from 'vue'
import VCA from '@vue/composition-api'
import JsonEditorVue from 'json-editor-vue'

Vue.use(VCA)
Vue.use(JsonEditorVue, {
  // 全局 props & attrs（单向数据流）
})

CDN + ESM

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
</head>

<body>
  <div id="app">
    <json-editor-vue v-model="value"></json-editor-vue>
  </div>

  <script>
    window.process = { env: { NODE_ENV: 'production' } }
  </script>
  <script type="importmap">
    {
      "imports": {
        "vue": "https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.esm.browser.min.js",
        "@vue/composition-api": "https://cdn.jsdelivr.net/npm/@vue/composition-api/dist/vue-composition-api.mjs",
        "@vue/composition-api/dist/vue-composition-api.mjs": "https://cdn.jsdelivr.net/npm/@vue/composition-api/dist/vue-composition-api.mjs",
        "vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi/lib/v2/index.mjs",
        "vanilla-jsoneditor": "https://cdn.jsdelivr.net/npm/vanilla-jsoneditor",
        "json-editor-vue": "https://cdn.jsdelivr.net/npm/json-editor-vue@0.10/dist/json-editor-vue.mjs"
      }
    }
  </script>
  <script type="module">
    import { createApp, ref } from '@vue/composition-api'
    import JsonEditorVue from 'json-editor-vue'

    const app = createApp({
      setup: () => ({
        value: ref(),
      }),
    })

    app.use(JsonEditorVue)
    app.mount('#app')
  </script>
</body>

</html>

CDN + IIFE

⚠ 暂不支持 (vanilla-jsoneditor 不提供 IIFE 或 UMD 导出)，如有需要请在这里留言。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
</head>

<body>
  <div id="app">
    <json-editor-vue v-model="value"></json-editor-vue>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
  <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
  <!-- TODO --> <script src="./vanilla-jsoneditor.umd.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/json-editor-vue@0.10"></script>
  <script>
    const { createApp, ref } = VueCompositionAPI

    const app = createApp({
      setup: () => ({
        value: ref(),
      }),
    })

    app.use(VueCompositionAPI)
    app.component('json-editor-vue', JsonEditorVue)
    app.mount('#app')
  </script>
</body>

</html>

Nuxt 3

npm i json-editor-vue vanilla-jsoneditor

局部注册

<!-- ~/components/JsonEditorVue.client.vue -->

<template>
  <JsonEditorVue v-bind="attrs" />
</template>

<script setup>
import JsonEditorVue from 'json-editor-vue'

const attrs = useAttrs()
</script>
<template>
  <client-only>
    <JsonEditorVue
      v-model="value"
      v-bind="{/* 局部 props & attrs */}"
    />
  </client-only>
</template>

<script setup>
const value = ref()
</script>

全局注册为 Module

// nuxt.config.ts

export default defineNuxtConfig({
  modules: ['json-editor-vue/nuxt'],
})
<template>
  <client-only>
    <JsonEditorVue v-model="value" />
  </client-only>
</template>

<script setup>
const value = ref()
</script>

全局注册为 Plugin

// ~/plugins/JsonEditorVue.client.ts

import JsonEditorVue from 'json-editor-vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(JsonEditorVue, {
    // 全局 props & attrs（单向数据流）
  })
})
<template>
  <client-only>
    <JsonEditorVue v-model="value" />
  </client-only>
</template>

<script setup>
const value = ref()
</script>

Nuxt 2 + Vue 2.7

npm i json-editor-vue vanilla-jsoneditor

局部注册

// nuxt.config.js

export default {
  build: {
    // Vite 4 (Rollup 3) 默认的编译目标为 ES2020
    // 所以在 webpack 4 中需要对 Vite 4 打包的依赖进行转译
    transpile: ['json-editor-vue'],
    extend(config) {
      // 让 webpack 识别 `.mjs` 文件
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      })
    },
  },
}
<template>
  <client-only>
    <JsonEditorVue
      v-model="value"
      v-bind="{/* 局部 props & attrs */}"
    />
  </client-only>
</template>

<script setup>
import { ref } from 'vue'

const JsonEditorVue = () => process.client
  ? import('json-editor-vue')
  : Promise.resolve({ render: (h) => h('div') })

const value = ref()
</script>

全局注册

// nuxt.config.js

export default {
  plugins: ['~/plugins/JsonEditorVue.client'],
  build: {
    // Vite 4 (Rollup 3) 默认的编译目标为 ES2020
    // 所以在 webpack 4 中需要对 Vite 4 打包的依赖进行转译
    transpile: ['json-editor-vue'],
    extend(config) {
      // 让 webpack 识别 `.mjs` 文件
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      })
    },
  },
}
// ~/plugins/JsonEditorVue.client.js

import Vue from 'vue'
import JsonEditorVue from 'json-editor-vue'

Vue.use(JsonEditorVue, {
  // 全局 props & attrs（单向数据流）
})
<template>
  <client-only>
    <JsonEditorVue v-model="value" />
  </client-only>
</template>

<script setup>
import { ref } from 'vue'

const value = ref()
</script>

Nuxt 2 + Vue 2.6 或更早版本

npm i json-editor-vue vanilla-jsoneditor @vue/composition-api

局部注册

// nuxt.config.js

export default {
  build: {
    // Vite 4 (Rollup 3) 默认的编译目标为 ES2020
    // 所以在 webpack 4 中需要对 Vite 4 打包的依赖进行转译
    transpile: ['json-editor-vue'],
    extend(config) {
      // 让 webpack 识别 `.mjs` 文件
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      })
    },
  },
}
<template>
  <client-only>
    <JsonEditorVue
      v-model="value"
      v-bind="{/* 局部 props & attrs */}"
    />
  </client-only>
</template>

<script>
import Vue from 'vue'
import VCA from '@vue/composition-api'
Vue.use(VCA)

export default {
  components: {
    JsonEditorVue: () => process.client
      ? import('json-editor-vue')
      : Promise.resolve({ render: (h) => h('div') }),
  },
  data() {
    return {
      value: undefined,
    }
  },
}
</script>

全局注册

// nuxt.config.js

export default {
  plugins: ['~/plugins/JsonEditorVue.client'],
  build: {
    // Vite 4 (Rollup 3) 默认的编译目标为 ES2020
    // 所以在 webpack 4 中需要对 Vite 4 打包的依赖进行转译
    transpile: ['json-editor-vue'],
    extend(config) {
      // 让 webpack 识别 `.mjs` 文件
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      })
    },
  },
}
// ~/plugins/JsonEditorVue.client.js

import Vue from 'vue'
import VCA from '@vue/composition-api'
import JsonEditorVue from 'json-editor-vue'

Vue.use(VCA)
Vue.use(JsonEditorVue, {
  // 全局 props & attrs（单向数据流）
})
<template>
  <client-only>
    <JsonEditorVue v-model="value" />
  </client-only>
</template>

<script>
export default {
  data() {
    return {
      value: undefined,
    }
  },
}
</script>

Vite

开箱即用。


Vue CLI 5 (webpack 5)

开箱即用。


Vue CLI 4 (webpack 4)

≥ v4.5.15

// vue.config.js

module.exports = {
  // Vite 4 (Rollup 3) 默认的编译目标为 ES2020
  // 所以在 webpack 4 中需要对 Vite 4 打包的依赖进行转译
  transpileDependencies: ['json-editor-vue'],
}

＜ v4.5.15

// vue.config.js

module.exports = {
  // Vite 4 (Rollup 3) 默认的编译目标为 ES2020
  // 所以在 webpack 4 中需要对 Vite 4 打包的依赖进行转译
  transpileDependencies: ['json-editor-vue'],
  configureWebpack: {
    module: {
      rules: [
        // 让 webpack 识别 `.mjs` 文件
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto',
        },
      ],
    },
  },
}

Vue CLI 3 (webpack 4)

npm i @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining -D
// babel.config.js

module.exports = {
  plugins: [
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining',
  ],
}
// vue.config.js

module.exports = {
  // Vite 4 (Rollup 3) 默认的编译目标为 ES2020
  // 所以在 webpack 4 中需要对 Vite 4 打包的依赖进行转译
  transpileDependencies: ['json-editor-vue'],
  chainWebpack(config) {
    // 让 webpack 识别 `.mjs` 文件
    config.module
      .rule('mjs')
      .include.add(/node_modules/)
      .type('javascript/auto')
      .end()
  },
}

Vue CLI 2 & 1 (webpack 3)

Vue CLI 2 & 1 从 vuejs-templates/webpack 拉取模板。

npm i @babel/core@latest @babel/preset-env@latest babel-loader@latest -D
// babel.config.js

module.exports = {
  presets: [
    '@babel/preset-env',
  ],
}
// webpack.base.conf.js

module.exports = {
  module: {
    rules: [
      // 让 webpack 识别 `.mjs` 文件
      {
        test: /\.mjs$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/json-editor-vue')],
      },
    ],
  },
}

属性

名称 说明 类型 默认值
v-model /
modelValue (Vue 3) /
value (Vue 2)		 绑定值 any
mode /
v-model:mode (Vue 3) /
:mode.sync (Vue 2)		 编辑模式 Mode 'tree'
... svelte-jsoneditor 的属性

svelte-jsoneditor 与 json-editor-vue 中绑定值的差异

  • svelte-jsoneditor：一个包含 “stringified JSON” 或 “parsed JSON” 的对象，当作为 “stringified JSON” 传入时，会经过 JSON.parse 解析。
  • json-editor-vue：JSON 本身，所见即所得。

如果你更倾向于 svelte-jsoneditor 的行为：

<JsonEditorVue
  :content="content"
  :onChange="(updatedContent) => {
    content = updatedContent
  }"
/>

详情见 https://github.com/josdejong/svelte-jsoneditor/pull/166。

布尔类型属性

仅写上 svelte-jsoneditor 的布尔类型属性如 readOnly 但不传值，会隐式转换为 true：

  • ✔️ <JsonEditorVue readOnly />

  • ✔️ <JsonEditorVue :readOnly="true" />

通过 CDN 使用时，标签、属性名称都必须使用短横线命名。


Expose

名称 说明 类型
jsonEditor JSONEditor 实例 object

类型

type Mode = 'tree' | 'text' | 'table'

暗色主题

<template>
  <JsonEditorVue class="jse-theme-dark" />
</template>

<script setup>
import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
import JsonEditorVue from 'json-editor-vue'
</script>

更新日志

各版本详细改动请参考 release notes。


开发

  1. 安装 Deno
  2. 执行 npm i -g @cloydlau/scripts
  3. 执行 cl i 并选择 pnpm
  4. 执行 cl dev3/cl dev2.7/cl dev2.6