0.1.15 • Published 1 month ago
code-runs v0.1.15
code-runs
一个代码在线编辑预览工具
Installation
npm i code-runs
项目主要技术
脚手架: Vue CLI
框架:Vue 3.4.21
全家桶,通过script setup
使用组合式API
代码编辑器:Monaco Editor
项目引用
在main.js
中引用
import { createApp } from 'vue'
import App from './App.vue'
import codeRun from 'code-runs'
// import "code-runs/dist/style.css";
import '../node_modules/code-runs/dist/style.css' // 样式失效时查看相对路径
const app = createApp(App)
app.use(codeRun)
app.mount('#app')
在quasar项目中使用
创建文件coderun.ts src\boot\coderun.ts
import { boot } from 'quasar/wrappers'
import codeRun from 'code-runs'
import '../../node_modules/code-runs/dist/style.css' // 样式失效时查看相对路径
export default boot(({ app }) => {
app.use(codeRun)
})
export { codeRun }
在quasar.config.js
中配置
module.exports = configure(function (/* ctx */) {
// 其他配置...
boot: ['axios', 'boot', 'codeRun'],
// 其他配置...
}
教程
<script setup>
import { ref } from 'vue'
const pageOption = ref({
theme: 'vs-dark', // 要继承的基础主题,默认 'vs-dark''; 可选的三个:vs、vs-dark、hc-black
fontSize: 20, // 编辑区域字体大小, 默认16
content: '', // 初始化内容, 默认vue3模板
minimap: false, // 是否显示缩略图, 默认关闭
lineNumbers: 'off' // 是否显示行号, 默认开启
})
</script>
<template>
<codeRun :pageOption="pageOption" />
</template>
0.1.15
1 month ago
0.1.11
1 month ago
0.1.12
1 month ago
0.1.13
1 month ago
0.1.14
1 month ago
0.1.2
2 months ago
0.1.8
1 month ago
0.1.7
1 month ago
0.1.9
1 month ago
0.1.4
2 months ago
0.1.3
2 months ago
0.1.6
1 month ago
0.1.5
1 month ago
0.1.1
2 months ago
0.1.0
2 months ago
0.0.5
2 months ago
0.0.7
2 months ago
0.0.6
2 months ago
0.0.4
2 months ago
0.0.3
2 months ago
0.0.2
2 months ago
0.0.1
2 months ago