# vue-magicalcoder-demo

**Repository Path**: suremainsure/vue-magicalcoder-demo

## Basic Information

- **Project Name**: vue-magicalcoder-demo
- **Description**: vue项目打包集成到magicalcoder布局器的示例
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 14
- **Created**: 2022-09-06
- **Last Updated**: 2022-09-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## 简介
  magicalcoder可视化布局器是一款可集成jquery,vue,react框架的ui进行可视化开发配置的在线h5工具，现被大家广泛应用于企业项目中，解决可视化场景的业务
  在线体验：http://lowcode.magicalcoder.com/magicalcoder/index-element.html 顶部ui可切换其他UI

  与vue所不同的是，magicalcoder采用原生js开发，所以就需要vue的项目打包成一个js以<script></script>方式引入布局器集成进来

  本实例参考了yyl-npm-practice 并且在其基础上进行了修改，主要是修复了 模块化与打包后的体验一致性问题

``` bash
安装方法：
1.npm安装：
npm:
 cd vue-magicalcoder-demo
 #安装
 npm install
 #以下2行代码视情况而定 如果出现sass-loader报错 请执行下面2行代码 否则请忽略
 npm i sass-loader -D
 npm i node-sass -D
 #运行
 npm run dev

ps:如果嫌慢
	可以用国内镜像
	npm install -g cnpm --registry=https://registry.npm.taobao.org
	cnpm install
	cmpn run dev
	cnpm run build

2. 原始vue开发方式 可以参考App.vue的引用方式

3.CDN的开发方式 引用vue-magicalcoder-demo.js
	 #打包
	 如果您新增了组件 请先配置index.js内
	 npm run build
	 双击 test.html即可预览

4 集成布局器 vip-3.0-try 布局器目录

	里面集成了vue-magicalcoder-demo.js的组件引用 访问 index-element.html 即可查看效果 windows也可以直接双击vip-3.0-try/启动.bat来预览布局器效果
	注意：
	如果有新修改，请把dist/vue-magicalcoder-demo.js 拷贝到vip-3.0-try/html/magicalcoder/assets/drag/ui/myvue/下
	这样布局器才能识别到

5 还有疑问 请联系QQ:799374340 欢迎前来交流

关于分支解释 一个分支代表一个场景的组件封装,这种方式代码最小化 有利于您阅读代码
 master:最简单的分支
 mc-form：一个el-form的封装，能自动识别内部有哪些基础组件，然后获取绑定的v-model组装成一个入参，提交到后台