昨天,AI界自媒体和头部大佬@数字生命卡兹克
2025年08月07日
在工作中设计师不会写代码,懂代码的不会设计,2种不同工作互掐的情况屡见不鲜,那我们如何把这2项工作一并融合贯通呢?对于不懂代码的职场“小白”,我们可以利用一些零代码工具来完成。今天小编介绍几款在线开发设计工具,让你不懂代码就能轻松制作。
1、傻瓜式制作交互内容--vxplo工具
vxplo是一款基于云端的网页交互设计工具,用户无需编写代码,在线编辑功能可以通过拖动,释放,设置和其他多媒体元素可视化操作来实现。
2025年08月07日
A、安装
npm install ace-builds
B、在uniapp中使用
<template>
<view class="content">
<div id="editor">ssss</div>
<button v-on:click="bb">格式</button>
<button v-on:click="aa">压缩</button>
</view>
</template>
<script>
import ace from 'ace-builds/src-noconflict/ace';
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/mode-golang';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/mode-html';
import 'ace-builds/src-noconflict/theme-monokai';
import 'ace-builds/src-noconflict/theme-dracula';
import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/src-noconflict/ext-beautify';
export default {
data() {
return {
title: 'Hello'
}
},
mounted() {
this.initEditor();
},
onLoad() {
},
methods: {
initEditor() {
const editor = ace.edit('editor'); // 初始化Ace Editor
//editor.setTheme("ace/theme/dracula");
editor.setTheme("ace/theme/monokai"); //主题
editor.session.setMode("ace/mode/json"); //语言类型
//editor.session.setMode("ace/mode/golang");
//editor.session.setMode("ace/mode/javascript");
editor.setValue('{}'); // 设置初始代码值
},
bb(){
const editor = ace.edit('editor'); // 初始化Ace Editor
editor.session.setMode("ace/mode/json");
var code =editor.getValue();
JSON.stringify(JSON.parse(code), null, 2)
editor.setValue(JSON.stringify(JSON.parse(code), null, 2));
},
aa(){
const editor = ace.edit('editor'); // 初始化Ace Editor
editor.session.setMode("ace/mode/json");
var code =editor.getValue();
let ss = JSON.stringify(JSON.parse(code))
editor.setValue(ss);
}
}
}
</script>
<style>
#editor { width: 100%; height: 700px; font-size: 14px;line-height: 20px;}
</style>