code run
1.0.0
Ein Codebeding -Vorschau -Tool, ähnlich wie codepen .
Online-Beispiel: https://wanglin2.github.io/code-run-online/.
Verwenden Sie Skypack, um ES -Module direkt in Ihren Browser zu importieren
Erstellen Sie schnell ein Codes -Online -Bearbeitungs -Vorschau -Tool
Wie kann man Vue -Einzeldatei manuell analysieren und eine Vorschau anstellen?
Unterrichten Sie Schritt für Schritt, um das VSCODE -Thema in Monaco Editor zu implementieren
Unterstützt mehrere Vorverarbeitungssprachen
Unterstützt zufällige Wechsel mehrerer Layouts
Unterstützt das Hinzufügen zusätzlicher css und js -Ressourcen
Integrierte mehrere gemeinsame Vorlagen
Unterstützen Sie den Export von zip
Support -Code -Formatierung
Eine schöne und kraftvolle Konsole
Unterstützt einzelne vue -Dateien (2.x, 3.x)
Unterstützt die direkte Portierung von VSCode -Themen und hat eine große Anzahl hochwertiger Themen eingebaut
Integrierte Unterstützung für Github Gist [Gist API], ist es sehr einfach, es zu ändern, um in Ihrem eigenen Speichersystem zu speichern.
Eingebaute Unterstützung zum Speichern von Änderungen an der URL ohne Github-Gist, damit Sie die URL problemlos mit anderen teilen können, um sie anzusehen.
Eingebaute Unterstützung, um so schöne und schöne Codebilder als Kohlenstoff zu erzeugen
Eingebaute UNPKG und Importmap zur Unterstützung der Verwendung der ES-Modulsyntax am Browser
Unterstützt den Einbettungsmodus, der für die Verwendung in Dokumentwebsites bequem ist, wodurch Dokumentbeispiele erleichtert werden
git clone https://github.com/wanglin2/code-run.git
cd code-run
npm i
npm run serve Bitte bestätigen Sie zunächst den nach Verpackung angewendeten Basispfad. Der Standard-Basispfad des Projekts ist /code-run/ . Wenn Sie es ändern möchten, können Sie es wie folgt ändern:
1. Ändern Sie das Feld publicPath in der Datei vue.config.js .
2. Ändern Sie das base der Datei src/config/index.js .
Der Standard -Routing -Modus ist hash模式. Wenn Sie den history verwenden müssen, ändern Sie bitte das Feld routerMode der Datei src/config/index.js .
Wenn im Verlaufsmodus mehrstufe Pfade vorhanden sind, können die folgenden Dateien geändert werden:
1. Ändern Sie den Pfad der prettier js -Ressourcen in der Datei /public/index.html ;
npm run build Gerüst: Vue CLI
Framework: Vue 3.X Family Bucket, verwendete组合式API über script setup
UI-Bibliothek: element-plus
Code Editor: Monaco Editor
Derzeit wird ESM in JavaScript , TypeScript , CoffeeScript , Vue3 , Vue2 und anderen Modi unterstützt. Wenn Sie standardmäßig Module auf folgende Weise direkt importieren:
import moment from 'moment'Schließlich wird es konvertiert zu:
import moment from 'https://unpkg.com/moment?module' Das heißt, UNPKG zu verwenden, aber einige Module unpkg können die ESM -Version nicht erhalten, oder die direkt erhaltene Version ist nicht das, was wir erwarten. Zum Beispiel beim Importieren vue sind wir https://unpkg.com/[email protected]/dist/vue.esm-browser.js , aber https://unpkg.com/vue?module returns by Default https://unpkg.com/[email protected]/dist/vue.runtime.esm-bundler.js?module ---Bundler.37/dist/vue.runtim. . Diese Version kann nicht im Browser ausgeführt werden, sodass Sie ImportMap manuell hinzufügen können, um die Quelle des Importmoduls festzulegen.
Dieses Tutorial richtet sich an das Migrations VSCode -Thema.
1. Bestimmen Sie das Thema, das Sie hinzufügen, zuerst installieren und zum Thema in der lokalen VSCode wechseln möchten, und drücken Sie dann F1 oder Command/Control + Shift + P oder klicken Sie mit der rechten Maustaste Command Palette/命令面板/scripts/vscodeThemes/ klicken Sie auf Developer:Generate Color Theme From Current Setting/开发人员:使用当前设置生成颜色主题VSCode json
2. Führen Sie dann den Befehl npm run convertTheme in der Befehlszeile aus, und das konvertierte Thema wird in das Verzeichnis des Projekts /public/themes ausgegeben. Führen Sie als Nächstes den Befehl npm run createThemeList , um die Themenkonfiguration zu generieren. Als nächstes können Sie设置->主题设置里看到所有主题，并可以切换使用.
npm run buildConsole : Die Datei /public/console/index.js des kompilierten Projekts ist ES5 -Syntax und die Ausgabe von compile.js im selben Verzeichnis. Die Datei wird im iframe der Seitenvorschau geladen. Bitte ändern Sie die Datei compile.js nicht direkt.
npm run buildMonacoWorker : Verpacken Sie die worker -Datei des Monaco Editor . Wenn die Version des Monaco Editor -Editors ändert, muss sie neu verpackt werden.
npm run convertTheme : Konvertiert die VSCode -Themendatei in die Monaco Editor -Themendatei.
npm run createThemeList : Generiert automatisch Konfigurationsdateien basierend auf der Themendateiliste.
npm run buildVueSFCCompiler : Paket @vue/compiler-sfc Datei für Vue3 .
Da es sich bei diesem Projekt um ein reines Front-End-Projekt handelt, müssen Sie online zusammenstellen, wenn Sie Vorverarbeitungssprachen oder erweiterte Sprachen wie less , sass , typescript usw. verwenden. Diese Arbeit wird von Compilern in jeder Sprache verarbeitet. Sie finden diese Compiler in /public/parses/ verzeichnis. Im Laufe der Zeit werden sie definitiv hinter ihren neuen Versionen zurückbleiben, sodass Sie sie regelmäßig aktualisieren müssen. Es ist nicht einfach, ihre Browserversion zu bekommen, daher werde ich hier einige meiner einzigen Erfahrungen mit Ihnen teilen.
less Zuerst npm i less und dann less/dist/ verzeichnis in node_modules . Die beiden Dateien in diesem Verzeichnis befinden sich im umd -Format und können direkt verwendet werden.
sass sass verwendet derzeit dieses Projekt Sass.js, dieses Projekt wurde jedoch seit drei Jahren nicht aktualisiert.
babel babel bietet eine Browserversion. Weitere Informationen finden Sie im offiziellen Dokument @Babel/Standalone.
typescript typescript direkt npm i typescript und dann die Datei node_modules/typescript/lib/typescript.js , die auch die direkte Verwendung im Browser unterstützt.
coffeescript coffeescript ist auch direkt npm i coffeescript und findet dann node_modules/coffeescript/coffeescript-browser-compiler-legacy/coffeescript.js , die die direkte Verwendung im Browser unterstützt.
livescript Die Browserversion von livescript kann direkt aus seinem offiziellen Repository heruntergeladen werden, aber seit zwei Jahren nicht aktualisiert.
postcss Sie können Browserify oder webpack verwenden, um es in eine Datei zu verpacken.
stylus hat die Browserversion nicht gefunden oder die Zusammenstellung war noch erfolgreich. Freunde, die es wissen, können ein issue erwähnen.
Das Projekt verfügt über mehrere häufig verwendete Codevorlagen, die bei Bedarf hinzugefügt oder verringert werden können. Die Vorlagenkonfigurationsdatei befindet sich in src/config/templates.js .
Das Projekt verfügt über mehrere häufig verwendete Seitenlayout-Vorlagen. Wenn es Ihren Anforderungen nicht entspricht, können Sie neue Layouts hinzufügen. Ein Layout ist eine vue单文件. Sie finden alle Layouts im src/pages/edit/layouts/ Verzeichnis. In jedem Layout wird tatsächlich festgestellt, wie die drei Teile编辑器,控制台und预览angezeigt werden.编辑器enthält vier Redakteure: js , css , html und vue Sie können konfigurieren, welche angezeigt werden sollen, welche Reihenfolge, ob Drag zulässig ist, usw. Die neu hinzugefügten Layouts müssen auch in diesem Verzeichnis platziert werden.
Nehmen Sie anschließend vue单文件的布局als Beispiel. Bestimmen Sie zunächst die Layout -Details. Wir möchten links einen vue -Editor anzeigen und预览und控制台rechts anzeigen.预览-Modul wird standardmäßig erweitert und控制台standardmäßig minimiert:
1. Erstellen wir zuerst eine VueSFC.vue im layouts -Verzeichnis.
2. Ändern Sie die Datei src/config/constants.js , stellen Sie die Komponente ein und fügen Sie das Layout zur layoutList und layoutMap -Konfigurationen hinzu:
import VueSFC from '../pages/edit/layouts/VueSFC.vue'
export const layoutList = [
// ...
{
name : 'Vue单文件' ,
value : 'vue' ,
}
]
export const layoutMap = {
// ...
vue : VueSFC
} Sie können ein Vorschau -Image des Layouts hinzufügen, es in die src/assets/layoutImgs/ Verzeichnis platzieren, es dann in die Datei constants.js importieren und schließlich in die previewImgMap -Konfiguration hinzufügen.
Nachdem Sie diese Weise geändert haben, können Sie die Option Neu hinzugefügt Vue单文件in der Dropdown-Liste der布局设置in设置Einstellungsfunktion der Seite sehen. Verbessern Sie als nächstes den Inhalt von VueSFC.vue .
3.. Sie können auf den Inhalt anderer Layoutstrukturen verweisen und sie kopieren, um sie zu ändern. Der endgültige Inhalt sollte wie folgt sein:
< template >
<!-- 该容器的直接DragItem直接数量为2，方向水平排列，第一个DragItem直接允许缩小到0，第二个DragItem组件最小允许缩小到20px -->
< Drag :number = " 2 " dir = " h " :config = " [{ min: 0 }, { min: 20 }] " >
<!-- 编辑器块，索引为0，禁止缩放该块，隐藏拖动条 -->
< DragItem :index = " 0 " :disabled = " true " :showTouchBar = " false " >
<!-- 编辑器增加，内部编辑器排列方向为垂直，配置了要显示的编辑器 -->
< Editor dir = " v " :showList = " showList " ></ Editor >
</ DragItem >
<!-- 预览&控制台，索引为1，允许拖动进行缩放 -->
< DragItem :index = " 1 " :disabled = " false " >
<!-- DragItem又嵌套了一个容器组件，该容器的直接DragItem直接数量为2，方向垂直排列，第一个DragItem直接允许缩小到0，第二个DragItem组件默认显示的高度为48px，且最小允许缩小到48px -->
< Drag :number = " 2 " dir = " v " :config = " [{ min: 0 }, { min: 48, default: 48 }] " >
< DragItem
:index = " 0 "
:disabled = " true "
:showTouchBar = " false "
title = "预览"
>
< Preview ></ Preview >
</ DragItem >
< DragItem :index = " 1 " :disabled = " false " title = "控制台" >
< Console ></ Console >
</ DragItem >
</ Drag >
</ DragItem >
</ Drag >
</ template >
< script setup>
import Editor from ' @/components/Editor.vue '
import Preview from ' @/components/Preview.vue '
import Console from ' @/components/Console.vue '
import Drag from ' @/components/Drag.vue '
import DragItem from ' @/components/DragItem.vue '
import { reactive } from ' vue '
// 配置只显示vue编辑器
const showList = reactive ([
{
title : ' VUE ' , // 编辑器名称
disableDrag : true , // 禁止拖动进行缩放
showTouchBar : false // 隐藏推动条
}
])
</ script >Die Kommentare wurden ausführlich erläutert. Weitere Informationen finden Sie in der folgenden Dokumentation der Komponenten.
Diese Komponente entspricht einem Container. Jeder Container instanziiert eine Größe der Resize der Größe der Größe der Größenänderung und der Größenänderung, und die DragItem -Komponente muss im Inneren platziert werden.
props :
| Name | einführen | Typ | Standardwert |
|---|---|---|---|
| Dir | DragItem -Komponentenanordnung im Container mit Optionen: H (horizontale Anordnung), V (vertikale Anordnung) | Saite | H |
| Nummer | Anzahl der internen DragItem -Komponenten | Nummer | 0 |
| Konfiguration | Die Informationen der internen DragItem -Komponente, des Array -Typs und der einzelnen Elemente sind ein Objekt. Für bestimmte Eigenschaften finden Sie in Tabelle 1. | Array | [] |
Eigenschaften des Objekts jedes Elements im config :
| Name | einführen | Typ | Standardwert |
|---|---|---|---|
| Standard | Die von der DragItem -Komponente des entsprechende Index angezeigte Größe ist die Standardeinstellung. Wenn dir h ist, bezieht es sich auf die Breite und wenn v auf die Höhe bezieht. | Nummer | Alle DragItem -Komponenten im Standardraum des Standardcontainers Splitter |
| min | Die minimale Größe darf durch die DragItem -Komponente des entsprechenden Index angezeigt werden. Wenn das Ziehen auftritt, darf der Komponentenraum zusammengedrückt werden, dh standardmäßig auf 0 komprimiert werden, dh er wird überhaupt nicht angezeigt. Wenn diese Eigenschaft konfiguriert ist, ändert sich sie nicht nach dem Schrumpfen auf die konfigurierte Größe. | Nummer | 0 |
| Max | Die maximale Größe darf durch die DragItem -Komponente des entsprechenden Index angezeigt werden. Wenn das Ziehen auftritt, wird die Standardeinstellung auf die zulässige maximale Größe erhöht, wenn der Komponentenraum erhöht wird. Wenn diese Eigenschaft konfiguriert ist, ändert sich sie nicht, nachdem sie die konfigurierte Größe erhöht hat. | Nummer | 0 |
Diese Komponente stellt einen draggierbaren Block dar, der unter die Drag -Komponente platziert werden muss, um den Inhalt zu übergeben, der tatsächlich über slot angezeigt werden muss. Drag können in der DragItem -Komponente verschachtelt werden.
props :
| Name | einführen | Typ | Standardwert |
|---|---|---|---|
| deaktiviert | Schleppt verboten | Boolean | FALSCH |
| Berührung | Die Größe der Widerstandsleiste bezieht sich, wenn dir h ist, auf die Breite und bezieht sich auf die Höhe von v | Nummer | 20 |
| Index | Der Index dieser Komponente in der Liste der DragItem -Komponenten im Container ab 0 | Nummer | 0 |
| Showtouchbar | Ob die Drag -Leiste angezeigt werden soll | Boolean | WAHR |
| Titel | Titel | Saite | |
| Verstecken | Ob Sie die Komponente verbergen sollen | Boolean | FALSCH |
Diese Komponente enthält derzeit vier Herausgeber: js , css , html und vue , die steuern können, welche angezeigt werden und wie sie angeordnet sind.
props :
| Name | einführen | Typ | Standardwert |
|---|---|---|---|
| Verstecken | Ob Sie den Herausgeber verbergen sollen | Boolean | FALSCH |
| Dir | Anordnungsrichtung, V (vertikal), h (horizontal) | Saite | H |
| Showlist | Liste der zu angezeigten Redakteure, Array -Typ, jedes Element kann eine Nummer oder ein Objekt sein, siehe Tabelle 2 | Array | ['Html', 'CSS', 'JS']] |
Jedes Element im showList -Array kann eine Zeichenfolge mit optionalen Werten sein: HTML , CSS , JS , VUE , repräsentieren vier Redakteure und Anzeigen, welche konfiguriert sind.
Wenn Sie einige Eigenschaften konfigurieren müssen, z. B. ob der Editor zu ziehen ist usw., sind die konfigurierbaren Eigenschaften wie folgt:
| Name | einführen | Typ | Standardwert |
|---|---|---|---|
| Titel | Editor Name, optional: HTML , CSS , JS , VUE | Saite | |
| Behinderung | Ist es verboten, den Herausgeber zu ziehen und zu zoomen? | Boolean | |
| Showtouchbar | Ob die Push -Leiste für diesen Editor angezeigt werden soll | Boolean |
1. Generieren Sie die Code -Bildfunktion Die generierte Bildhöhe überschreitet gelegentlich die tatsächliche Höhe des Codes, und es wurde noch kein Grund oder eine grundlegende Lösung gefunden. Eine der optionalen Methoden liefert die Funktion, das Bild nach der Erstellung des Bildes zu schneiden.
2. In seltenen Fällen tritt das Problem des Themas, das nicht wirksam wird, auf.
Der Kompilierungsteil der Vorverarbeitung/erweiterten Sprache in diesem Projekt und einige andere Details beziehen sich auf die Implementierung des Projekts Codepan.
MIT
