Vue 项目使用 json-editor (一)

Posted 2023-04-15

参考技术A json-editor 官方例子： http://jeremydorn.com/json-editor/

github 地址: https://github.com/jdorn/json-editor

官方安装方式 npm install json-editor

版本 "json-editor": "^0.7.28"

在 vue 项目中使用了一个 @json-editor/json-editor 包和官方提供的效果类似，因为这个包使用时最近有更新

第一步安装

npm install @json-editor/json-editor --save

版本如下

"@json-editor/json-editor": "^1.1.0-beta.4"

第二步 .vue 文件中引入

import '@json-editor/json-editor'

第三步 在 <template> 中使用

<div id="editor_holder"></div>

第四步 mounted() 中赋值

正确赋值后页面就可以显示 schema 配置了，但是，在 vue 项目中只能显示 html 标签默认样式   ╯︿╰

Vue项目搭建及原理一

一. Vue简介

 

Vue简介

Vue是近两年来比较火的一个前端框架（渐进式框架），与reactjs和angularjs三国鼎立,根据不完全统计，包括饿了么、稀土掘金、苏宁易购、美团、天猫、荔枝FM、房多多、Laravel、htmlBurger等国内外知名大公司都在使用vue进行新项目的开发和旧项目的前端重构工作。

vue + vuex+ vue-resource + vue-router + webpack + es6 + less的项目架构成为了越来越多公司的第一选择。(当然vuejs2.0已经不在维护vue-resource了，vuejs2.0 已经使用了axios了)

我对渐进式框架的理解就是框架做分层设计，每层都可选，不同层可以灵活接入其他方案。而当你都想用官方的实现时，会发现也早已准备好，各层之间包括配套工具都能比接入其他方案更便捷地协同工作。

运用响应式编程、声明式渲染、组件化开发、虚拟DOM、跨平台支持等提高你的生产力

 

Vue作者尤雨溪

他认为，未来App的趋势是轻量化和细化，能解决问题的应用就是好应用。而在移动互联网时代大的背景下，个人开发者的机遇在门槛低，成本低，跨设备和多平台四个方面。

Vue思想

Vue两大核心思想，组件化和数据驱动，组件化就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用，数据驱动是前端的未来发展方向，释放了对DOM的操作，让DOM随着数据的变化自然而然的变化，不必过多的关注DOM，只需要将数据组织好即可