study/vue-component-creater-ui
1
0
Fork 0
mirror of https://github.com/sahadev/vue-component-creater-ui.git synced 2025-06-08 14:34:05 +08:00
Code Issues Releases Wiki Activity

编辑器跑通,增加axios

Browse Source
This commit is contained in:
shangbin 2021-09-08 20:22:52 +08:00
parent 5eb5bfb365
commit e07dc3542b
4 changed files with 724 additions and 1283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

215
package-lock.json generated
View File

@ -1931,16 +1931,6 @@
"integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=", "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
"dev": true "dev": true
}, },
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"big.js": { "big.js": {
"version": "3.2.0", "version": "3.2.0",
"resolved": "https://registry.npm.taobao.org/big.js/download/big.js-3.2.0.tgz", "resolved": "https://registry.npm.taobao.org/big.js/download/big.js-3.2.0.tgz",
@ -1973,23 +1963,6 @@
"unique-filename": "^1.1.1" "unique-filename": "^1.1.1"
} }
}, },
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
"dev": true,
"optional": true
},
"emojis-list": { "emojis-list": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-2.1.0.tgz", "resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-2.1.0.tgz",
@ -2028,13 +2001,6 @@
"universalify": "^0.1.0" "universalify": "^0.1.0"
} }
}, },
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1618559744568&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
"dev": true,
"optional": true
},
"html-webpack-plugin": { "html-webpack-plugin": {
"version": "3.2.0", "version": "3.2.0",
"resolved": "https://registry.npm.taobao.org/html-webpack-plugin/download/html-webpack-plugin-3.2.0.tgz?cache=0&sync_timestamp=1608278250985&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhtml-webpack-plugin%2Fdownload%2Fhtml-webpack-plugin-3.2.0.tgz", "resolved": "https://registry.npm.taobao.org/html-webpack-plugin/download/html-webpack-plugin-3.2.0.tgz?cache=0&sync_timestamp=1608278250985&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhtml-webpack-plugin%2Fdownload%2Fhtml-webpack-plugin-3.2.0.tgz",
@ -2132,16 +2098,6 @@
"minipass": "^3.1.1" "minipass": "^3.1.1"
} }
}, },
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1622293670728&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"terser-webpack-plugin": { "terser-webpack-plugin": {
"version": "2.3.8", "version": "2.3.8",
"resolved": "http://npm.xesv5.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz", "resolved": "http://npm.xesv5.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@ -2168,67 +2124,6 @@
"define-properties": "^1.1.2", "define-properties": "^1.1.2",
"object.getownpropertydescriptors": "^2.0.3" "object.getownpropertydescriptors": "^2.0.3"
} }
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.2.0",
"resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.2.0.tgz?cache=0&sync_timestamp=1620717857145&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.2.0.tgz",
"integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"big.js": {
"version": "5.2.2",
"resolved": "https://registry.nlark.com/big.js/download/big.js-5.2.2.tgz",
"integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
"dev": true,
"optional": true
},
"chalk": {
"version": "4.1.1",
"resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995384030&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
"integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"emojis-list": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-3.0.0.tgz",
"integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang=",
"dev": true,
"optional": true
},
"json5": {
"version": "2.2.0",
"resolved": "https://registry.npm.taobao.org/json5/download/json5-2.2.0.tgz",
"integrity": "sha1-Lf7+cgxrpSXZ69kJlQ8FFTFsiaM=",
"dev": true,
"optional": true,
"requires": {
"minimist": "^1.2.5"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
}
}
} }
} }
}, },
@ -2966,6 +2861,21 @@
"integrity": "sha1-4eguTz6Zniz9YbFhKA0WoRH4ZCg=", "integrity": "sha1-4eguTz6Zniz9YbFhKA0WoRH4ZCg=",
"dev": true "dev": true
}, },
"axios": {
"version": "0.21.4",
"resolved": "https://r.cnpmjs.org/axios/download/axios-0.21.4.tgz",
"integrity": "sha1-xnuQ3AVo5cHPKwuFjEO6KOLtpXU=",
"requires": {
"follow-redirects": "^1.14.0"
},
"dependencies": {
"follow-redirects": {
"version": "1.14.3",
"resolved": "https://r.cnpmjs.org/follow-redirects/download/follow-redirects-1.14.3.tgz",
"integrity": "sha1-atp4EY2NJMruWVWVrM3ArGq9Ai4="
}
}
},
"babel-eslint": { "babel-eslint": {
"version": "10.1.0", "version": "10.1.0",
"resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz", "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz",
@ -4813,7 +4723,7 @@
}, },
"de-indent": { "de-indent": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/de-indent/download/de-indent-1.0.2.tgz", "resolved": "https://r.cnpmjs.org/de-indent/download/de-indent-1.0.2.tgz",
"integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=", "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
"dev": true "dev": true
}, },
@ -12916,9 +12826,9 @@
"dev": true "dev": true
}, },
"vue": { "vue": {
"version": "2.6.12", "version": "2.6.14",
"resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1600188494896&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz", "resolved": "https://r.cnpmjs.org/vue/download/vue-2.6.14.tgz",
"integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM=" "integrity": "sha1-5RqlJQJQ1Wmj+606ilpofWA24jU="
}, },
"vue-codemirror": { "vue-codemirror": {
"version": "4.0.6", "version": "4.0.6",
@ -13004,6 +12914,87 @@
} }
} }
}, },
"vue-loader-v16": {
"version": "npm:vue-loader@16.5.0",
"resolved": "https://r.cnpmjs.org/vue-loader/download/vue-loader-16.5.0.tgz",
"integrity": "sha1-CcTgcSRmiZ40uZpoZSTxkWX7KJI=",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://r.cnpmjs.org/ansi-styles/download/ansi-styles-4.3.0.tgz",
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://r.cnpmjs.org/chalk/download/chalk-4.1.2.tgz",
"integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://r.cnpmjs.org/color-convert/download/color-convert-2.0.1.tgz",
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://r.cnpmjs.org/color-name/download/color-name-1.1.4.tgz",
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://r.cnpmjs.org/has-flag/download/has-flag-4.0.0.tgz",
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://r.cnpmjs.org/loader-utils/download/loader-utils-2.0.0.tgz",
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://r.cnpmjs.org/supports-color/download/supports-color-7.2.0.tgz",
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-nestable": { "vue-nestable": {
"version": "2.6.0", "version": "2.6.0",
"resolved": "https://r.cnpmjs.org/vue-nestable/download/vue-nestable-2.6.0.tgz", "resolved": "https://r.cnpmjs.org/vue-nestable/download/vue-nestable-2.6.0.tgz",
@ -13042,9 +13033,9 @@
} }
}, },
"vue-template-compiler": { "vue-template-compiler": {
"version": "2.6.12", "version": "2.6.14",
"resolved": "https://registry.npm.taobao.org/vue-template-compiler/download/vue-template-compiler-2.6.12.tgz?cache=0&sync_timestamp=1597927307972&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-template-compiler%2Fdownload%2Fvue-template-compiler-2.6.12.tgz", "resolved": "https://r.cnpmjs.org/vue-template-compiler/download/vue-template-compiler-2.6.14.tgz",
"integrity": "sha1-lH7XGWdEyKUoXr4SM/6WBDf8xX4=", "integrity": "sha1-ovDn2YVnDULJye4NBE/tdpD092M=",
"dev": true, "dev": true,
"requires": { "requires": {
"de-indent": "^1.0.2", "de-indent": "^1.0.2",

5
package.json
View File

@ -23,6 +23,7 @@
"@babel/parser": "^7.11.5", "@babel/parser": "^7.11.5",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"ant-design-vue": "^1.7.2", "ant-design-vue": "^1.7.2",
"axios": "^0.21.4",
"copy-to-clipboard": "^3.3.1", "copy-to-clipboard": "^3.3.1",
"core-js": "^3.6.4", "core-js": "^3.6.4",
"crypto-random-string": "^3.3.0", "crypto-random-string": "^3.3.0",
@ -50,7 +51,7 @@
"stringify-object": "^3.3.0", "stringify-object": "^3.3.0",
"vant": "^2.10.7", "vant": "^2.10.7",
"view-design": "^4.3.2", "view-design": "^4.3.2",
"vue": "^2.6.11", "vue": "^2.6.14",
"vue-codemirror": "^4.0.6", "vue-codemirror": "^4.0.6",
"vue-nestable": "^2.6.0", "vue-nestable": "^2.6.0",
"vue-router": "^3.4.9", "vue-router": "^3.4.9",
@ -71,7 +72,7 @@
"lint-staged": "^9.5.0", "lint-staged": "^9.5.0",
"sass": "^1.25.0", "sass": "^1.25.0",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.12" "vue-template-compiler": "^2.6.14"
}, },
"eslintConfig": { "eslintConfig": {
"root": true, "root": true,

286
src/components/CodeEditor.vue
View File

@ -1,171 +1,173 @@
<template> <template>
<div class="example"> <div class="codemirror">
<div class="codemirror"> <codemirror v-model="code" :options="cmOption" @cursorActivity="onCmCursorActivity" @ready="onCmReady"
<codemirror @focus="onCmFocus" @blur="onCmBlur" />
v-model="code"
:options="cmOption"
@cursorActivity="onCmCursorActivity"
@ready="onCmReady"
@focus="onCmFocus"
@blur="onCmBlur"
/>
</div>
</div> </div>
</template> </template>
<script> <script>
import dedent from 'dedent' import dedent from 'dedent'
import { codemirror } from 'vue-codemirror' import { codemirror } from 'vue-codemirror'
// base style // base style
import 'codemirror/lib/codemirror.css' import 'codemirror/lib/codemirror.css'
// theme css // theme css
import 'codemirror/theme/monokai.css' import 'codemirror/theme/monokai.css'
// language // language
import 'codemirror/mode/vue/vue.js' import 'codemirror/mode/vue/vue.js'
// active-line.js // active-line.js
import 'codemirror/addon/selection/active-line.js' import 'codemirror/addon/selection/active-line.js'
// styleSelectedText // styleSelectedText
import 'codemirror/addon/selection/mark-selection.js' import 'codemirror/addon/selection/mark-selection.js'
import 'codemirror/addon/search/searchcursor.js' import 'codemirror/addon/search/searchcursor.js'
// highlightSelectionMatches // highlightSelectionMatches
import 'codemirror/addon/scroll/annotatescrollbar.js' import 'codemirror/addon/scroll/annotatescrollbar.js'
import 'codemirror/addon/search/matchesonscrollbar.js' import 'codemirror/addon/search/matchesonscrollbar.js'
import 'codemirror/addon/search/searchcursor.js' import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/match-highlighter.js' import 'codemirror/addon/search/match-highlighter.js'
// keyMap // keyMap
import 'codemirror/mode/clike/clike.js' import 'codemirror/mode/clike/clike.js'
import 'codemirror/addon/edit/matchbrackets.js' import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/addon/comment/comment.js' import 'codemirror/addon/comment/comment.js'
import 'codemirror/addon/dialog/dialog.js' import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/dialog/dialog.css' import 'codemirror/addon/dialog/dialog.css'
import 'codemirror/addon/search/searchcursor.js' import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/search.js' import 'codemirror/addon/search/search.js'
import 'codemirror/keymap/sublime.js' import 'codemirror/keymap/sublime.js'
// foldGutter // foldGutter
import 'codemirror/addon/fold/foldgutter.css' import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/brace-fold.js' import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/comment-fold.js' import 'codemirror/addon/fold/comment-fold.js'
import 'codemirror/addon/fold/foldcode.js' import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js' import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/indent-fold.js' import 'codemirror/addon/fold/indent-fold.js'
import 'codemirror/addon/fold/markdown-fold.js' import 'codemirror/addon/fold/markdown-fold.js'
import 'codemirror/addon/fold/xml-fold.js' import 'codemirror/addon/fold/xml-fold.js'
require(['axios'], axios => {
axios.defaults.baseURL = '';
self.axios = axios;
});
export default {
name: 'code-editor',
title: 'Mode: text/x-vue & Theme: monokai',
components: {
codemirror
},
data() {
return {
code: dedent`
// 以下代码中的方法会被注入到最终的代码中，如果命名与源代码有相同的，则会替换源代码
// 内部集成了axios，开发者可以直接通过axios发起网络请求，不过接口需要允许跨域。
// axios官方文档：https://www.npmjs.com/package/axios
export default { export default {
name: 'codemirror-example-vue', props: [],
title: 'Mode: text/x-vue & Theme: monokai', components: {},
components: {
codemirror
},
data() {
return {
code: dedent`
<template>
<h1>Hello World!</h1>
<codemirror v-model="code" :options="cmOption" />
</template>
<script> data() {
// import 'some-codemirror-resource' return {
export default {
data() {
return {
code: 'const A = 10',
cmOption: {
tabSize: 4,
styleActiveLine: true,
lineNumbers: true,
line: true,
foldGutter: true,
styleSelectedText: true,
mode: 'text/javascript',
keyMap: "sublime",
matchBrackets: true,
showCursorWhenSelecting: true,
theme: "monokai",
extraKeys: { "Ctrl": "autocomplete" },
hintOptions:{
completeSingle: false
}
}
}
}
}
${'<\/script>'}
<style lang="scss"> };
@import './sass/mixins'; },
@import './sass/variables'; watch: {
main {
position: relative; },
}
</style> computed: {
`,
cmOption: { },
tabSize: 4,
foldGutter: true, methods: {
styleActiveLine: true, request(){
lineNumbers: true, axios.get('https://www.baidu.com').then(res => console.info(res), err => console.error(err));
line: true, }
keyMap: "sublime", },
mode: 'text/x-vue',
theme: 'monokai', // 生命周期 start
extraKeys: { beforeCreate() {},
'F11'(cm) { created() {},
cm.setOption("fullScreen", !cm.getOption("fullScreen"))
}, beforeMount() {},
'Esc'(cm) { mounted() {},
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false)
} beforeUpdate() {},
updated() {},
beforeDestory() {},
destoryed() {},
// 生命周期 end
fillter: {},
};
`,
cmOption: {
tabSize: 4,
foldGutter: true,
styleActiveLine: true,
lineNumbers: true,
line: true,
keyMap: "sublime",
mode: 'text/javascript',
theme: 'monokai',
extraKeys: {
'F11'(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"))
},
'Esc'(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false)
} }
} }
} }
}
},
methods: {
onCmCursorActivity(codemirror) {
}, },
methods: { onCmReady(codemirror) {
onCmCursorActivity(codemirror) { },
console.debug('onCmCursorActivity', codemirror) onCmFocus(codemirror) {
}, },
onCmReady(codemirror) { onCmBlur(codemirror) {
console.debug('onCmReady', codemirror)
},
onCmFocus(codemirror) {
console.debug('onCmFocus', codemirror)
},
onCmBlur(codemirror) {
console.debug('onCmBlur', codemirror)
}
} }
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.example { .codemirror,
display: flex; .pre {
height: 100%; width: 50%;
height: 100%;
margin: 0;
overflow: auto;
}
.codemirror, .pre {
.pre { display: block;
width: 50%; padding: 1rem;
height: 100%; font-size: 14px;
margin: 0; line-height: 1.6;
overflow: auto; word-break: break-all;
} word-wrap: break-word;
}
</style>
.pre { <style>
display: block; .CodeMirror {
padding: 1rem; height: 100% !important;
font-size: 14px; }
line-height: 1.6;
word-break: break-all; .vue-codemirror {
word-wrap: break-word; height: 100% !important;
} }
}
</style> </style>

1501
yarn.lock
View File

File diff suppressed because it is too large Load Diff