mirror of
https://github.com/sahadev/vue-component-creater-ui.git
synced 2025-06-07 13:44:06 +08:00
将主要逻辑收拢在Main.vue中，可以跑通
This commit is contained in:
Shangbin
parent
e87ebafdcb
commit
e5a2ed4484
30
Main.vue
30
Main.vue
@ -1,30 +0,0 @@
|
||||
<template lc_id="4gMSvJvKY0">
|
||||
<div class="container" lc_id="4HMe28N4r8">
|
||||
<div lc_id="A3EjTeZmpk">{{msg}}</div>
|
||||
<div lc-mark lc_id="N1sFlpXGo5">{{propData}}</div>
|
||||
<el-button lc-mark @click="onClick('Hi')" lc_id="y8Isu+jsv9">我是一个按钮</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Welcome to Your Vue.js App'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick(value) {
|
||||
console.info(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
980
package-lock.json
generated
980
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -15,11 +15,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.11.5",
|
||||
"@monkey/SSOLogin": "^1.2.9",
|
||||
"ali-oss": "^6.10.0",
|
||||
"animate.css": "^4.1.1",
|
||||
"ant-design-vue": "^1.7.2",
|
||||
"axios": "^0.21.1",
|
||||
"copy-to-clipboard": "^3.3.1",
|
||||
"core-js": "^3.6.4",
|
||||
"crypto-random-string": "^3.3.0",
|
||||
@ -42,9 +39,7 @@
|
||||
"prettier": "^2.0.5",
|
||||
"prismjs": "^1.20.0",
|
||||
"query-string": "^6.13.7",
|
||||
"random-color-generator2": "^1.2.0",
|
||||
"register-service-worker": "^1.6.2",
|
||||
"sa-sdk-javascript": "^1.15.21",
|
||||
"split.js": "^1.6.2",
|
||||
"stringify-object": "^3.3.0",
|
||||
"vant": "^2.10.7",
|
||||
|
||||
@ -50,16 +50,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ElementUI from "element-ui";
|
||||
import Vue from "vue";
|
||||
import AntdUI from "ant-design-vue";
|
||||
|
||||
Vue.use(AntdUI);
|
||||
Vue.use(ElementUI);
|
||||
|
||||
import('element-ui/lib/theme-chalk/index.css');
|
||||
import('ant-design-vue/dist/antd.css');
|
||||
|
||||
import RawComponents from "../components/RawComponents";
|
||||
import { splitInit } from "../libs/split-init";
|
||||
import { MainPanelProvider } from "../libs/main-panel";
|
||||
@ -67,6 +57,16 @@ import ToolsBar from "./ToolsBar";
|
||||
import { initContainerForLine } from "@/utils/lineHelper";
|
||||
const keymaster = require('keymaster');
|
||||
|
||||
import styleData from "../map/style.index.js";
|
||||
import methodData from "../map/method.index.js";
|
||||
import dataData from "../map/data.index.js";
|
||||
import templateData from "../map/template.index.js";
|
||||
|
||||
window.templateSourceMap = templateData;
|
||||
window.dataSourceMap = dataData;
|
||||
window.methodSourceMap = methodData;
|
||||
window.styleSourceMap = styleData;
|
||||
|
||||
export default {
|
||||
name: "vcc_ui",
|
||||
props: [],
|
||||
@ -105,7 +105,6 @@ export default {
|
||||
},
|
||||
beforeCreate() { },
|
||||
created() {
|
||||
this.appInit();
|
||||
this.mainPanelProvider = new MainPanelProvider();
|
||||
// 方便调试追踪
|
||||
window.mainPanelProvider = this.mainPanelProvider;
|
||||
@ -121,13 +120,6 @@ export default {
|
||||
destoryed() { },
|
||||
methods: {
|
||||
|
||||
async appInit() {
|
||||
window.templateSourceMap = await(await import("../map/template.index.js")).default;
|
||||
window.dataSourceMap = await(await import("../map/data.index.js")).default;
|
||||
window.methodSourceMap = await(await import("../map/method.index.js")).default;
|
||||
window.styleSourceMap = await(await import("../map/style.index.js")).default;
|
||||
},
|
||||
|
||||
initShortcut() {
|
||||
keymaster('⌘+z, ctrl+z', () => {
|
||||
this.undo();
|
||||
@ -233,8 +225,7 @@ export default {
|
||||
/* =============== 以下结果追加于: 2020/3/23 上午10:03:02 =============== */
|
||||
.main-main {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
@ -357,4 +348,51 @@ export default {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.mark-element-unit {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.in-element {
|
||||
outline: 2px solid #4dba87 !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mark-element {
|
||||
outline: 2px solid #4dba87 !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mark-element::before {
|
||||
content: attr(lc-component-name) !important;
|
||||
background: #4dba87;
|
||||
color: white;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
padding: 1px 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.light-mark {
|
||||
outline: 2px solid #4dba87;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.light-mark::before {
|
||||
content: attr(lc-component-name) !important;
|
||||
background: #4dba87;
|
||||
color: white;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
padding: 1px 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -59,7 +59,6 @@
|
||||
// import vant from "../rawComponents/vant";
|
||||
// import iview from "../rawComponents/iview";
|
||||
// import quasar from "../rawComponents/quasar";
|
||||
const { generateColor } = require('random-color-generator2');
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -170,7 +169,6 @@ export default {
|
||||
surprise() {
|
||||
const that = this;
|
||||
function color() {
|
||||
that.$refs.help.style = `color:${that.colorPointer.next().value};font-size: 24px;`;
|
||||
window.requestAnimationFrame(color);
|
||||
}
|
||||
|
||||
@ -178,7 +176,7 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
created() { this.colorPointer = generateColor(true, 2); },
|
||||
created() { },
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
|
||||
15
src/main.js
Normal file
15
src/main.js
Normal file
@ -0,0 +1,15 @@
|
||||
import Vue from "vue";
|
||||
import ElementUI from "element-ui";
|
||||
import "element-ui/lib/theme-chalk/index.css";
|
||||
|
||||
import AntdUI from "ant-design-vue";
|
||||
import "ant-design-vue/dist/antd.css";
|
||||
import Main from "./components-v2/Main.vue";
|
||||
|
||||
Vue.use(ElementUI);
|
||||
Vue.use(AntdUI);
|
||||
|
||||
new Vue({
|
||||
el: "#app",
|
||||
render: (h) => h(Main),
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
export default {"onClick":"function (value) {\n console.info(value);\n}"}
|
||||
export default {"handleClose":"function (done) {\n this.$confirm('确认关闭\\uFF1F').then(_ => {\n done();\n }).catch(_ => {\n });\n}","handleDrawerClose":"function (done) {\n this.$confirm('确认关闭\\uFF1F').then(_ => {\n done();\n }).catch(_ => {\n });\n}","load":"function () {\n this.count += 2;\n}","handleChange":"function (value) {\n}","handleRemove":"function (file, fileList) {\n console.log(file, fileList);\n}","handlePreview":"function (file) {\n console.log(file);\n}","handleExceed":"function (files, fileList) {\n this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${ files.length } 个文件，共选择了 ${ files.length + fileList.length } 个文件`);\n}","beforeRemove":"function (file, fileList) {\n return this.$confirm(`确定移除 ${ file.name }？`);\n}","handleAvatarSuccess":"function (res, file) {\n this.imageUrl = URL.createObjectURL(file.raw);\n}","beforeAvatarUpload":"function (file) {\n}","next":"function () {\n}","goBack":"function () {\n console.log('go back');\n}","onSubmit":"function () {\n console.log('submit!');\n}","onReset":"function () {\n console.log('submit!');\n}","submitForm":"function () {\n console.log('submit!');\n}","resetForm":"function () {\n console.log('submit!');\n}","format":"function (percentage) {\n return percentage === 100 ? '满' : `${ percentage }%`;\n}","handleNodeClick":"function () {\n}","handleSelect":"function () {\n}","handleClick":"function () {\n}","goBack2":"function () {\n}","handleChange3":"function (val) {\n console.log(val);\n}","handleSizeChange":"function () {\n}","handleCurrentChange":"function () {\n}","onLoad":"function () {\n}","onSubmit6":"function (values) {\n console.log('submit', values);\n}","onConfirm":"function (value, index) {\n}","onChange":"function (picker, value, index) {\n}","onCancel":"function () {\n}","afterRead":"function (file) {\n console.log(file);\n}","formatDate":"function (date) {\n return `${ date.getMonth() + 1 }/${ date.getDate() }`;\n}","onConfirm8":"function (date) {\n this.show = false;\n this.date = this.formatDate(date);\n}","checkAll":"function () {\n this.$refs.checkboxGroup.toggleAll(true);\n}","toggleAll":"function () {\n this.$refs.checkboxGroup.toggleAll();\n}","onClickIcon":"function () {\n Toast('点击图标');\n}","onClickButton":"function () {\n Toast('点击按钮');\n}","onAdd":"function () {\n Toast('新增地址');\n}","onEdit":"function (item, index) {\n Toast('编辑地址:' + index);\n}","onClickLeft":"function () {\n Toast('返回');\n}","onClickRight":"function () {\n Toast('按钮');\n}","onSave":"function () {\n Toast('save');\n}","onDelete":"function () {\n Toast('delete');\n}","onChangeDetail":"function (val) {\n if (val) {\n this.searchResult = [{\n name: '黄龙万科中心',\n address: '杭州市西湖区'\n }];\n } else {\n this.searchResult = [];\n }\n}","onSubmit11":"function () {\n}","onClickEditAddress":"function () {\n}"}
|
||||
@ -1 +1 @@
|
||||
export default {".container":"text-align: center; font-size: 20px; color: red;"}
|
||||
export default {".row":"margin-bottom: 10px;",".icon":"margin-right: 10px; margin-left: 10px; font-size: 18px;",".el-header":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-footer":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-aside":"background-color: #d3dce6; color: #333; text-align: center; line-height: 200px;",".el-main":"background-color: #e9eef3; color: #333; text-align: center; line-height: 160px;","body > .el-container":"margin-bottom: 40px;",".el-container:nth-child(5) .el-aside":"line-height: 260px;",".el-container:nth-child(6) .el-aside":"line-height: 260px;",".el-container:nth-child(7) .el-aside":"line-height: 320px;",".avatar-uploader ::v-deep .el-upload":"border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden;",".avatar-uploader .el-upload:hover":"border-color: #409eff;",".avatar-uploader-icon":"font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center;",".avatar":"width: 178px; height: 178px; display: block;",".demo-border":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","[label-lc-mark]":"display: inline-block; width: 200px; border: 1px grey dashed; min-height: 1rem; border-radius: 5px;",".item":"margin-top: 10px; margin-right: 40px;",".el-carousel__item h3":"color: #475669; font-size: 14px; opacity: 0.75; line-height: 150px; margin: 0;",".el-carousel__item:nth-child(2n)":"background-color: #99a9bf;",".el-carousel__item:nth-child(2n + 1)":"background-color: #d3dce6;",".el-row":"margin-bottom: 20px;",".el-row:last-child":"margin-bottom: 0;",".el-col":"border-radius: 4px;",".bg-purple-dark":"background: #99a9bf;",".bg-purple":"background: #d3dce6 !important;",".bg-purple-light":"background: #e5e9f2;",".grid-content":"border-radius: 4px; min-height: 36px;",".row-bg":"padding: 10px 0; background-color: #f9fafc;",".icon1":"margin-left: 10px; margin-right: 10px;",".layout":"border: 1px solid #d7dde4; background: #f5f7f9; position: relative; border-radius: 4px; overflow: hidden;",".layout-logo":"width: 100px; height: 30px; background: #5b6270; border-radius: 3px; float: left; position: relative; top: 15px; left: 20px;",".layout-nav":"width: 420px; margin: 0 auto; margin-right: 20px;",".demonstration":"font-size: 12px; color: #1f2f3d; padding: 10px 0 0 0;",".title":"width: 120px;",".demonstration-raw":"padding: 10px 0;","[div-lc-mark]":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","button + button":"margin-top: 10px;",".colon":"display: inline-block; margin: 0 4px; color: #ee0a24;",".block":"display: inline-block; width: 22px; color: #fff; font-size: 12px; text-align: center; background-color: #ee0a24;",".my-swipe .van-swipe-item":"color: #fff; font-size: 20px; line-height: 150px; text-align: center; background-color: #39a9ed;",".icon-c":"margin-left: 10px; margin-right: 10px;","::v-deep .van-tabbar--fixed":"position: initial;","::v-deep .van-address-list__bottom":"position: initial;","::v-deep .van-goods-action":"position: initial;","::v-deep .van-submit-bar":"position: initial;"}
|
||||
File diff suppressed because one or more lines are too long
@ -1,27 +1,26 @@
|
||||
const compiler = require("./compileComponent.js");
|
||||
|
||||
// const glob = require("glob");
|
||||
// const path = require("path");
|
||||
// const process = require("process");
|
||||
const glob = require("glob");
|
||||
const path = require("path");
|
||||
const process = require("process");
|
||||
|
||||
// const componentsPath = path.join(process.cwd(), "src/rawComponents");
|
||||
const componentsPath = path.join(process.cwd(), "src/rawComponents");
|
||||
|
||||
// console.info(`当前正在读取${componentsPath}中的vue原始组件`);
|
||||
console.info(`当前正在读取${componentsPath}中的vue原始组件`);
|
||||
|
||||
// // options is optional
|
||||
// glob(
|
||||
// "**/*.vue",
|
||||
// {
|
||||
// cwd: componentsPath,
|
||||
// absolute: true,
|
||||
// ignore: ['**/element/index.vue', '**/vant/index.vue', '**/iview/index.vue']
|
||||
// },
|
||||
// function (er, files) {
|
||||
// console.info(`正在对${files.length}个文件进行编译...`);
|
||||
// files.forEach((filePath) => {
|
||||
// console.info(`正在编译${filePath}`);
|
||||
// options is optional
|
||||
glob(
|
||||
"**/*.vue",
|
||||
{
|
||||
cwd: componentsPath,
|
||||
absolute: true,
|
||||
ignore: ['**/element/index.vue', '**/vant/index.vue', '**/iview/index.vue']
|
||||
},
|
||||
function (er, files) {
|
||||
console.info(`正在对${files.length}个文件进行编译...`);
|
||||
files.forEach((filePath) => {
|
||||
console.info(`正在编译${filePath}`);
|
||||
|
||||
// });
|
||||
// }
|
||||
// );
|
||||
compiler("/Users/sahadevshang/openSource/tal/vue-component-creater-ui/Main.vue");
|
||||
});
|
||||
}
|
||||
);
|
||||
@ -1,6 +1,9 @@
|
||||
const path = require("path");
|
||||
|
||||
module.exports = {
|
||||
|
||||
lintOnSave: true,
|
||||
|
||||
chainWebpack: (config) => {
|
||||
const vueRule = config.module.rule("vue");
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user