Слияние кода завершено, страница обновится автоматически
LCG-VCC
VCC — это независимый редактор кода компонентов Vue в Low Code Generator. Может работать автономно.
С его помощью можно быстро создать каркас кода компонента Vue методом перетаскивания. Подробнее см. в видео ниже.
Быстрый предварительный просмотр: https://vcc.sahadev.tech/
Прямое включение в HTML:
<meta charset="utf-8">
<title>vcc demo</title>
<script src="https://unpkg.com/vue"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- Обязательно включить следующим образом -->
<script src="https://static.imonkey.xueersi.com/vcc/vcc.umd.min.js"></script>
<div id="app">
<vcc :initCodeEntity="codeStructure" @updateCodeEntity="onCodeUpdate"></vcc>
</div>
<script>
// Инициализация компонента VCC с использованием структуры
const initCodeStr = '{"template":{"lc_id":"root","__children":[{"div":{"class":"container","style":"min-height: 100%; padding-bottom: 100px;","lc_id":"container","__text__":"Hello，欢迎使用LCG，请往此区域拖拽组件","__children":[{"el-button":{"lc-mark":"","type":"danger","lc_id":"COAAYXizyI","__children":[],"__text__":"危险按钮","@click":"onButtonClick","size":"small"}}]}}]}}'
new Vue({
components: {
vcc: vcc
},
data() {
return {
codeStructure: JSON.parse(initCodeStr),
}
},
methods: {
onCodeUpdate(newCodeEntity) {
// Обновлённый код после редактирования
}
}
}).$mount('#app')
</script>
Включение в файл Vue:
<template>
<vcc :initCodeEntity="codeStructure" @updateCodeEntity="onCodeUpdate"></vcc>
</template>
<script>
// Инициализация компонента VCC с использованием структуры
const initCodeStr = '{"template":{"lc_id":"root","__children":[{"div":{"class":"container","style":"min-height: 100%; padding-bottom: 100px;","lc_id":"container","__text__":"Hello，欢迎使用LCG，请往此区域拖拽组件","__children":[{"el-button":{"lc-mark":"","type":"danger","lc_id":"COAAYXizyI","__children":[],"__text__":"危险按钮","@click":"onButtonClick","size":"small"}}]}}]}}'
export default {
data() {
return {
codeStructure: JSON.parse(initCodeStr),
}
},
methods: {
onCodeUpdate(newCodeEntity) {
// Новый код после редактирования, можно сохранить
}
}
}
</script>
Обратите внимание, что компонент VCC не нужно специально импортировать в components, а нужно импортировать через script (как в примере 1). Это связано с тем, что компоненты VCC используют стратегию разделения пакетов, и дочерние пакеты зависят от основного пакета по относительному пути.
Также необходимо сделать Vue глобально доступным, например:
import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import APP from "./App.vue";
Vue.use(ElementUI);
// Внутренне также требуется настроить глобальный Vue
self.Vue = Vue;
new Vue({
el: "#app",
render: (h) => h(APP),
});
Обратите внимание, что также необходимо установить компонент ElementUI в проекте.
Сначала установите:
npm i
Затем запустите:
npm run serve
После завершения запуска вы можете получить доступ к предварительному просмотру по адресу http://localhost:8008/.
Ранее на Bilibili были записаны две видеодемонстрации. Вы можете узнать, как использовать его, посмотрев эти два видео: 【拖拽式Vue组件代码生成平台(LCG)介绍视频-哔哩哔哩】https://b23.tv/FInuZ8 【LCG近期功能更新介绍-哔哩哔哩】https://b23.tv/SAHwVq
git checkout -b my-new-feature)git commit -am 'Add some feature')git push origin my-new-feature)Если у вас есть предложения или вопросы, пожалуйста, задайте их в разделе issues на GitHub.
Этот репозиторий следует лицензии MIT.
Вы можете отправить мне электронное письмо по адресу sahadev@foxmail.com, и я отвечу вам как можно скорее.
Или присоединяйтесь к обсуждению в группе:
Если QR-код группы устарел, вы можете добавить меня в WeChat: SAHADEV-smile, и я добавлю вас в группу. При добавлении меня в WeChat укажите «VCC» в примечании.
Кроме того, я очень надеюсь, что мы сможем вместе поработать над этим проектом. В настоящее время этот проект ориентирован в основном на разработчиков переднего плана. Позже он может быть ориентирован на разработчиков заднего плана и продуктов с UE.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )