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/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 기본적으로 https://unpkg.com/[email protected]/dist/vue.runtime.esm-bundler.js?module . 이 버전은 브라우저에서 실행될 수 없으므로 가져 오기 모듈의 소스를 설정하기 위해 수동으로 importMap을 추가 할 수 있습니다.

주제에 대한 새로운 튜토리얼

이 튜토리얼은 마이그레이션 VSCode 주제를 목표로합니다.

1. 로컬 VSCode 의 테마를 먼저 설치하고 전환 한 다음 F1 또는 Command/Control + Shift + P 를 누르거나 Command Palette/命令面板오른쪽 버튼으로 클릭 한 다음 Developer:Generate Color Theme From Current Setting/开发人员:使用当前设置生成颜色主题/scripts/vscodeThemes/ VSCode json 데이터를 생성합니다.

2. 그런 다음 명령 줄에서 npm run convertTheme 명령을 실행하면 변환 된 테마가 프로젝트 /public/themes 디렉토리로 출력됩니다. 다음으로 npm run createThemeList 테마 구성을 생성하십시오. 다음으로设置->主题设置里看到所有主题，并可以切换使用.

컴파일러 업데이트 안내서

이 프로젝트는 순수한 프론트 엔드 프로젝트이기 때문에 전처리 언어 나 less , sass , typescript 등과 같은 확장 언어를 사용할 때 온라인으로 컴파일해야합니다.이 작업은 각 언어의 컴파일러로 처리됩니다. 이 컴파일러는 /public/parses/ directory에서 찾을 수 있습니다. 시간이 지남에 따라 새로운 버전보다 뒤쳐 질 것이므로 정기적으로 업데이트해야합니다. 브라우저 버전을 얻는 것은 쉽지 않으므로 여기에서 유일한 경험을 공유하겠습니다.

less

첫 번째 npm i less 다음 node_modules 에서 less/dist/ Directory를 찾으십시오. 이 디렉토리의 두 파일은 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 입니다.

새 페이지 레이아웃 템플릿을 추가했습니다

지도 시간

이 프로젝트에는 일반적으로 사용되는 몇 개의 페이지 레이아웃 템플릿이 내장되어 있습니다. 필요에 맞지 않으면 새로운 레이아웃을 추가 할 수 있습니다. 하나의 레이아웃은 vue单文件입니다. src/pages/edit/layouts/ Directory에서 모든 레이아웃을 찾을 수 있습니다. 각 레이아웃은 실제로编辑器,控制台및预览의 세 부분을 표시하는 방법을 결정하는 것입니다.编辑器에는 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/ 디렉토리에 배치 한 다음 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 (수직 배열)	끈	시간
숫자	내부 `DragItem` 구성 요소 수	숫자	0
구성	내부 `DragItem` 구성 요소, 배열 유형 및 각 항목의 정보는 객체입니다. 특정 속성은 표 1을 참조하십시오.	정렬	[]

표 1

config 배열에서 각 항목의 객체의 속성 :

이름	소개하다	유형	기본값
기본	해당 인덱스의 `DragItem` 구성 요소에 의해 표시되는 크기는 기본입니다. `dir` 가 `h` 인 경우 너비를 나타냅니다. `v` 는 높이를 나타냅니다.	숫자	기본 컨테이너 분할 공간의 모든 `DragItem` 구성 요소
최소	최소 크기는 해당 인덱스의 `DragItem` 구성 요소에 의해 표시 될 수 있습니다. 드래그가 발생하면 구성 요소 공간이 압착되면 기본적으로 0으로 압축 할 수 있습니다. 즉, 전혀 표시되지 않습니다. 이 속성이 구성되면 구성된 크기로 수축 한 후에는 변경되지 않습니다.	숫자	0
맥스	해당 인덱스의 `DragItem` 구성 요소에 의해 표시 될 수있는 최대 크기. 드래그가 발생하면 구성 요소 공간이 증가하면 기본값이 허용되는 최대 크기로 증가합니다. 이 속성이 구성되면 구성된 크기로 증가한 후에도 변경되지 않습니다.	숫자	0

Dragitem 구성 요소

이 구성 요소는 실제로 slot 통해 표시 해야하는 컨텐츠를 전달하기 위해 Drag 구성 요소 아래에 배치 해야하는 드래그 가능한 블록을 나타냅니다. Drag 컨테이너는 DragItem 구성 요소에 중첩 될 수 있습니다.

구성 요소 props :

이름	소개하다	유형	기본값
장애가 있는	금지 된 드래그하고 있습니다	부울	거짓
터치 바 크기	드래그 막대의 크기는 `dir` 인 경우 h가 너비를 말하고 `v` 인 경우 v `h` 높이를 나타냅니다.	숫자	20
색인	컨테이너의 `DragItem` 구성 요소 목록 에서이 구성 요소의 인덱스는 0부터 시작합니다.	숫자	0
ShowTouchbar	드래그 바를 표시할지 여부	부울	진실
제목	제목	끈
숨다	구성 요소를 숨길지 여부	부울	거짓

편집기 구성 요소

이 구성 요소에는 현재 js , css , html 및 vue 의 4 가지 편집자가 포함되어 있으며, 어떤 편집자가 표시되는지, 어떻게 배열되는지를 제어 할 수 있습니다.

구성 요소 props :

이름	소개하다	유형	기본값
숨다	편집자를 숨길지 여부	부울	거짓
멍청이	배열 방향, V (수직), H (수평)	끈	시간
쇼리스트	표시 할 편집자 목록, 배열 유형, 각 항목은 숫자 또는 객체 일 수 있습니다 (표 2 참조)	정렬	[ 'html', 'css', 'js']

표 2

showList 배열의 각 항목은 HTML , CSS , JS , VUE , 4 개의 편집자를 나타내는 값의 선택적 값을 가진 문자열 일 수 있습니다.

편집기가 드래그 할 수 있는지 등과 같은 일부 속성을 구성 해야하는 경우 구성 가능한 속성은 다음과 같습니다.

이름	소개하다	유형
제목	편집기 이름, 선택 사항 : `HTML` , `CSS` , `JS` , `VUE`	끈
비활성화	편집기를 끌고 확대하는 것이 금지되어 있습니까?	부울
ShowTouchbar	이 편집기의 푸시 바를 표시할지 여부	부울