code run下載 - code run源代碼下載

code run

其他資源

1.0.0

下載

code-run

一個代碼在線編輯預覽工具，類似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字段。

另外history模式下如果存在多級路徑，可能需要修改以下文件：

1.修改/public/index.html文件的prettier相關js資源的路徑；

打包命令

npm run build

項目主要技術

腳手架： Vue CLI

框架： Vue 3.X全家桶，通過script setup使用组合式API

UI庫： element-plus

代碼Monaco Editor Editor

界面截圖

界面截圖1

界面截圖2

界面截圖3

關於使用ESM

目前在JavaScript 、 TypeScript 、 CoffeeScript 、 Vue3 、 Vue2等模式下支持使用ESM ，默認情況下，如果你直接按下列方式導入模塊的話：

 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/开发人员:使用当前设置生成颜色主题，然後VSCode就會生成一份json數據，保存到項目的/scripts/vscodeThemes/目錄下。

2.然後命令行執行命令npm run convertTheme ，轉換後的主題會被輸出到項目的/public/themes目錄下，接下來再執行命令npm run createThemeList即可生成主題配置，接下來即可在设置->主题设置里看到所有主题，并可以切换使用。

編譯器更新指南

因為本項目是純前端項目，所以在使用less 、 sass 、 typescript等預處理語言或擴展語言時需要在線進行編譯，這個工作是由各個語言的編譯器處理的，這些編譯器你可以在/public/parses/目錄下找到，隨著時間的推移，肯定會落後於它們的新版本，所以你需要定期更新它們，獲取它們的瀏覽器使用版本並不是一件易事，所以在這裡將有些僅有的經驗分享給大家。

less

首先npm i less ，然後在node_modules找到less/dist/目錄，該目錄下的兩個文件都是umd格式的，可以直接使用。

sass

sass目前使用的是這個項目sass.js，但是這個項目已經三年沒有更新了。

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的瀏覽器使用版本可以直接去其官方倉庫下載browser，不過也兩年沒有更新了。

postcss

可以使用Browserify或webpack把它打包到一個文件中。

其他

stylus暫時沒有找到瀏覽器使用版本或編譯成功，知道的朋友歡迎提個issue 。

新增代碼模板

項目內置了幾個常用的代碼模板，可以根據需要進行增減，模板配置文件在src/config/templates.js 。

新增頁面佈局模板

教程

項目內置了幾個常用的頁面佈局模板，如果不滿足你的需求也可以新增佈局，一個佈局就是一個vue单文件，可以在src/pages/edit/layouts/目錄下找到所有佈局，每個佈局其實就是確定如何顯示编辑器、控制台、预览三部分，编辑器包含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 >

註釋已經解釋的很詳細，詳情可參考接下來的組件文檔。

佈局相關組件文檔

Drag組件

該組件相當於是一個容器，每個容器會實例化一個Resize尺寸拖動調整類，內部需要放置DragItem組件。

組件props ：

名稱	介紹	類型	預設值
dir	容器內部的`DragItem`組件排列方式，可選項：h（水平排列）、v（垂直排列）	String	h
number	內部的`DragItem`組件數量	Number	0
config	配置內部的`DragItem`組件的信息，數組類型，每一項都是一個對象，具體的屬性請看表1	Array	[]

表1

config數組每一項的對象的屬性：

名稱	介紹	類型	預設值
default	對應索引的`DragItem`組件默認顯示的尺寸， `dir`為`h`時指寬度，為`v`時指高度	Number	默認容器內的所有`DragItem`組件平分空間
min	對應索引的`DragItem`組件允許顯示的最小尺寸，當發生拖動時，如果該組件空間被擠壓，默認允許被壓縮到0，即完全不顯示，如果配置了該屬性，則縮小到配置的大小後不再變化	Number	0
max	對應索引的`DragItem`組件允許顯示的最大尺寸，當發生拖動時，如果該組件空間被增加，默認會增加到允許的最大尺寸，如果配置了該屬性，則增加到配置的大小後不再變化	Number	0

DragItem組件

該組件代表一個可拖動的塊，需要放置在Drag組件下，通過slot來傳入需要實際顯示的內容。 DragItem組件內可再嵌套Drag容器。

組件props ：

名稱	介紹	類型	預設值
disabled	是否禁止拖動	Boolean	false
touchBarSize	拖動條的尺寸， `dir`為`h`時指寬度，為`v`時指高度	Number	20
index	該組件在容器內的同級`DragItem`組件列表中的索引，從0開始	Number	0
showTouchBar	是否顯示拖動條	Boolean	true
title	標題	String
hide	是否隱藏該組件	Boolean	false

Editor組件

該組件目前包含js 、 css 、 html 、 vue四個編輯器，可以控制具體顯示哪幾個，以及它們的排列方式。

組件props ：

名稱	介紹	類型	預設值
hide	是否隱藏編輯器	Boolean	false
dir	排布方向，v（垂直）、h（水平）	String	h
showList	要顯示的編輯器列表，數組類型，每一項可以是數字也可以是一個對象，見表2	Array	['HTML', 'CSS', 'JS']

表2

showList數組的每一項可以是一個字符串，可選值為： HTML 、 CSS 、 JS 、 VUE ，代表四種編輯器，配置了哪幾個就顯示哪幾個。

如果需要再配置一些屬性，比如是否允許該編輯器拖動等等，可配置的屬性如下：

名稱	介紹	類型
title	編輯器名稱，可選項： `HTML` 、 `CSS` 、 `JS` 、 `VUE`	String
disableDrag	是否禁止拖動縮放該編輯器	Boolean
showTouchBar	是否顯示該編輯器的推動條	Boolean