code runダウンロード - code runソースコードダウンロード

code run

その他のリソース

1.0.0

ダウンロード

コード実行

codepenと同様のコード編集プレビューツール。

オンライン例：https：//wanglin2.github.io/code-run-online/。

特性

ローカルビルド

git clone https://github.com/wanglin2/code-run.git

cd code-run

npm i

npm run serve

パック

アプリケーションのベースパスを変更します

まず、パッケージング後に適用されたベースパスを確認してください。プロジェクトのデフォルトのベースパスは/code-run/です。変更したい場合は、次のように変更できます。

1. vue.config.jsファイルのpublicPathフィールドを変更します。

2。SRC src/config/index.jsファイルのbaseフィールドを変更します。

ルーティングモードを変更します

デフォルトのルーティングモードはhash模式です。 historyモードを使用する必要がある場合は、 src/config/index.jsファイルのrouterModeフィールドを変更してください。

さらに、履歴モードにマルチレベルのパスがある場合、次のファイルが変更される場合があります。

1. /public/index.htmlファイルのprettier関連jsリソースのパスを変更します。

パッケージングコマンド

npm run build

プロジェクトメインテクノロジー

足場： Vue CLI

フレームワーク： Vue 3.Xファミリーバケット、 script setupを介した组合式APIを使用

UIライブラリ： element-plus

コードエディター： Monaco Editor

インターフェイススクリーンショット

インターフェイススクリーンショット1

インターフェイススクリーンショット2

インターフェイススクリーンショット3

ESMの使用について

現在、 ESMはJavaScript 、 TypeScript 、 CoffeeScript 、 Vue3 、 Vue2およびその他のモードでサポートされています。デフォルトでは、次の方法でモジュールを直接インポートする場合：

 import moment from 'moment'

最後に、次のように変換されます。

 import moment from 'https://unpkg.com/moment?module'

つまり、UNPKGを使用することですが、一部のモジュールunpkg ESMバージョンを取得できません。または、直接取得したバージョンは予想されるものではありません。たとえば、 vueをインポートするとき、必要なのはhttps://unpkg.com/[email protected]/dist/vue.esm-browser.jsですが、 https://unpkg.com/vue?module moduleはデフォルトで返されますhttps://unpkg.com/[email protected]/dist/vue.runtime.esm-bundler.js?module 。このバージョンはブラウザで実行できないため、ImportMapを手動で追加してインポートモジュールのソースを設定できます。

トピックに関する新しいチュートリアル

このチュートリアルは、移行VSCodeトピックを対象としています。

1.追加するテーマを決定し、最初にインストールしてローカルVSCodeのテーマに切り替えてから、 F1またはCommand/Control + Shift + Pを押すか、 Command Palette/命令面板VSCodeクリックしてから、 Developer:Generate Color Theme From Current Setting/开发人员:使用当前设置生成颜色主题/scripts/vscodeThemes/ jsonします。

2。その後、コマンドnpm run convertThemeと、変換されたテーマがプロジェクト/public/themesディレクトリに出力されます。次に、コマンドnpm run createThemeList実行して、テーマ構成を生成します。次に、设置->主题设置里看到所有主题，并可以切换使用。

コンパイラアップデートガイド

このプロジェクトは純粋なフロントエンドプロジェクトであるため、プリプロセシング言語またはless 、 sass 、 typescriptなどの拡張言語を使用する場合、オンラインでコンパイルする必要があります。この作業は、各言語のコンパイラーによって処理されます。これらのコンパイラは/public/parses/ directoryで見つけることができます。時間が経つにつれて、彼らは間違いなく新しいバージョンに遅れをとるので、定期的に更新する必要があります。ブラウザのバージョンを入手するのは簡単ではないので、ここで唯一の経験のいくつかを共有します。

less

最初にnpm i less 、次にnode_modulesでless/dist/ディレクトリを見つけます。このディレクトリの2つのファイルはumd形式で、直接使用できます。

sass

sassは現在、このプロジェクトSASS.JSを使用していますが、このプロジェクトは3年間更新されていません。

babel

babelブラウザバージョンを提供します。詳細については、公式文書 @babel/standaloneを参照してください。

typescript

typescript直接npm i typescriptし、 node_modules/typescript/lib/typescript.jsファイルを見つけます。これは、ブラウザでの直接使用もサポートしています。

coffeescript

coffeescriptは直接npm i coffeescriptあり、 node_modules/coffeescript/coffeescript-browser-compiler-legacy/coffeescript.jsファイルを見つけます。

livescript

livescriptのブラウザバージョンは、公式リポジトリから直接ダウンロードできますが、2年間更新されていません。

postcss

Browserifyまたはwebpackを使用して、ファイルにパッケージ化できます。

他の

stylus 、ブラウザバージョンやコンピレーションがまだ成功していることを発見していません。それを知っている友人は、 issueに言及することを歓迎します。

コードテンプレートを追加しました

このプロジェクトには、いくつかの一般的に使用されるコードテンプレートが組み込まれており、必要に応じて追加または減少できます。テンプレート構成ファイルはsrc/config/templates.jsにあります。

新しいページレイアウトテンプレートを追加しました

チュートリアル

このプロジェクトには、いくつかの一般的に使用されるページレイアウトテンプレートが組み込まれています。ニーズを満たしていない場合は、新しいレイアウトを追加できます。 1つのレイアウトはvue单文件です。すべてのレイアウトはsrc/pages/edit/layouts/ディレクトリで見つけることができます。各レイアウトは、実際には编辑器、控制台、预览の3つの部分を表示する方法を決定するためです。编辑器には、 js 、 css 、 html 、およびvue表示するもの、順序、ドラッグが許可されているかどうかなどを構成できます。新しく追加されたレイアウトもこのディレクトリに配置する必要があります。

次に、例としてvue单文件的布局を実行します。最初に、レイアウトの詳細を決定します。左側にvueエディターを表示し、右側に预览と控制台を表示します。预览モジュールはデフォルトで拡張され、デフォルトでは控制台が最小化されます。

1.最初にlayoutsディレクトリにVueSFC.vueを作成します。

2. src/config/constants.jsファイルを変更し、コンポーネントを導入し、レイアウトをlayoutListとlayoutMap構成に追加します。

 import VueSFC from '../pages/edit/layouts/VueSFC.vue'

export const layoutList = [
	// ...
	{
		name : 'Vue单文件' ,
		value : 'vue' ,
	}
]

export const layoutMap = {
	// ...
	vue : VueSFC
}

レイアウトのプレビューイメージを追加し、 src/assets/layoutImgs/ Directoryに配置してから、 constants.jsファイルにインポートし、最後にpreviewImgMap構成に追加できます。

この方法で変更した後、ページの设置関数のレイアウト布局设置のドロップダウンリストに、新しく追加されたVue单文件オプションを確認できます。次に、 VueSFC.vueの内容を改善します。

3.他のレイアウト構造のコンテンツを参照して、それらをコピーしてそれらを変更できます。最終コンテンツは次のとおりです。

< 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 >

コメントは詳細に説明されています。詳細については、次のコンポーネントドキュメントを参照してください。

レイアウト関連コンポーネントドキュメント

ドラッグコンポーネント

このコンポーネントは、コンテナに相当します。各コンテナは、サイズResizeサイズのドラッグとサイズのクラスをインスタンス化し、 DragItemコンポーネントを内部に配置する必要があります。

コンポーネントのprops ：

名前	導入	タイプ	デフォルト値
監督	コンテナ内の`DragItem`コンポーネント配置方法、オプションを備えた：H（水平方向の配置）、V（垂直配置）	弦	h
番号	内部`DragItem`コンポーネントの数	番号	0
config	内部`DragItem`コンポーネント、配列タイプ、および各アイテムの情報はオブジェクトです。特定のプロパティについては、表1を参照してください。	配列	[]

表1

config内の各アイテムのオブジェクトのプロパティ：

名前	導入	タイプ	デフォルト値
デフォルト	対応するインデックスの`DragItem`コンポーネントによって表示されるサイズはデフォルトです。 `dir`が`h`の場合、それは幅を指し、 `v`が高さを指します。	番号	デフォルトのコンテナの分割スペースのすべての`DragItem`コンポーネント
分	対応するインデックスの`DragItem`コンポーネントによって表示される最小サイズ。ドラッグが発生すると、コンポーネントスペースが絞られている場合、デフォルトでは0に圧縮されます。つまり、まったく表示されません。このプロパティが構成されている場合、構成されたサイズに縮小しても変更されません。	番号	0
マックス	対応するインデックスの`DragItem`コンポーネントによって表示される最大サイズ。ドラッグが発生すると、コンポーネントスペースが増加すると、デフォルトが許容される最大サイズに増加します。このプロパティが構成されている場合、構成されたサイズに増加しても変更されません。	番号	0

Dragitemコンポーネント

このコンポーネントは、 slotを介して実際に表示する必要があるコンテンツを渡すために、 Dragコンポーネントの下に配置する必要があるドラッグ可能なブロックを表します。 Dragコンテナは、 DragItemコンポーネントにネストできます。

コンポーネントのprops ：

名前	導入	タイプ	デフォルト値
無効	ドラッグは禁止されています	ブール	間違い
TouchBarsize	ドラッグバーのサイズは、 `dir`が`h`の場合、幅を指し、vが`v`の場合、高さを指します	番号	20
索引	0から始まるコンテナ内の`DragItem`コンポーネントのリストにあるこのコンポーネントのインデックス	番号	0
showtouchbar	ドラッグバーを表示するかどうか	ブール	真実
タイトル	タイトル	弦
隠れる	コンポーネントを非表示にするかどうか	ブール	間違い

エディターコンポーネント

このコンポーネントには現在、 js 、 css 、 html 、およびvueの4つのエディターが含まれています。これらのエディターは、表示されているものと配置方法を制御できます。

コンポーネントのprops ：

名前	導入	タイプ	デフォルト値
隠れる	編集者を隠すかどうか	ブール	間違い
監督	配置方向、V（垂直）、H（水平）	弦	h
ショーリスト	表示される編集者のリスト、配列タイプ、各アイテムは数字またはオブジェクトになります。表2を参照してください	配列	['html'、 'css'、 'js']

表2

showList配列の各アイテムは、 HTML 、 CSS 、 JS 、 VUE 、4つのエディターを表すオプションの値を持つ文字列にすることができます。

エディターがドラッグできるようにするかどうかなど、いくつかのプロパティを構成する必要がある場合、構成可能なプロパティは次のとおりです。

名前	導入	タイプ
タイトル	編集者名、オプション： `HTML` 、 `CSS` 、 `JS` 、 `VUE`	弦
disabledRag	エディターをドラッグしてズームすることは禁止されていますか？	ブール
showtouchbar	この編集者のプッシュバーを表示するかどうか	ブール