VisualizeVue 是一个强大的可视化组件开发示例平台,专门为 Vue 开发者设计。它允许用户实时在线展示 Vue 代码的效果,提供了便捷的代码编辑、预览和交互功能,助力开发者更高效地进行 Vue 组件开发。
- 实时预览:用户可以在平台上编写 Vue 代码,并立即看到代码的实际效果,无需频繁切换环境进行查看。
- 代码编辑:提供功能丰富的代码编辑器,支持多种主题和语法高亮,方便用户进行代码编写和修改。
- 区域尺寸调节:可以轻松调整代码区域和预览区域的大小,满足不同的开发需求。
- 提交与保存:用户可以提交自己的代码,进行保存和分享,也可以在不同的模式(如编辑模式、查看模式、增加模式)下进行操作。
- 详细信息展示:通过抽屉组件,可以查看和编辑组件的详细信息。
- 图标库与子组件库:方便地访问图标库和子组件库,丰富组件开发的资源。
![image](https://private-user-images.githubusercontent.com/13348194/361715216-a2f95bc0-cecc-42e6-8bad-b4756d232c8a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkwNzkyNjYsIm5iZiI6MTczOTA3ODk2NiwicGF0aCI6Ii8xMzM0ODE5NC8zNjE3MTUyMTYtYTJmOTViYzAtY2VjYy00MmU2LThiYWQtYjQ3NTZkMjMyYzhhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA5VDA1MjkyNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJjNTQ5NmM2MjlhMTEwNmNmN2UwOTNlZGZjMzU1ZWU0YzliMGE2OWI5NDU1MjZhZTBmMTMyOGIxNDJmOGRlMTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.6HD9bWE2po4bG1gI_ipsuuvoXp_z9uQDl8XIDKHLl4I)
![image](https://private-user-images.githubusercontent.com/13348194/361715514-5a9df3e2-7d83-457f-b655-029f4c9f0657.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkwNzkyNjYsIm5iZiI6MTczOTA3ODk2NiwicGF0aCI6Ii8xMzM0ODE5NC8zNjE3MTU1MTQtNWE5ZGYzZTItN2Q4My00NTdmLWI2NTUtMDI5ZjRjOWYwNjU3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA5VDA1MjkyNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQyYzA4YmEwMmVmMGU2OGRjZTQwYWUzYzFhZDBhNzJmY2QwNmM3NGIyY2JiMmI3ZmQ1M2I2ODUyODQwMTQwYjcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.rz2w6dqc9fFU2zMKqN0rF4kOnd7HTUhs4P4yJTt9Iy8)
![image](https://private-user-images.githubusercontent.com/13348194/361715601-a071955e-0ee0-4c1a-890d-1059dda645ea.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkwNzkyNjYsIm5iZiI6MTczOTA3ODk2NiwicGF0aCI6Ii8xMzM0ODE5NC8zNjE3MTU2MDEtYTA3MTk1NWUtMGVlMC00YzFhLTg5MGQtMTA1OWRkYTY0NWVhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA5VDA1MjkyNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTRjZmU3MmQ4ZWRmMjJiZjU3YTRjNDQxMTgwOTdjZTFjODc1ZGE1MDY2MDNmNzVhOGY0ZDc0NGE4YmQ5MWUxNjcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.SaC0_Wsim9JNfaY9oPAyXdmd1txuVK34av3ZKpnqtu8)
![image](https://private-user-images.githubusercontent.com/13348194/361715695-1476fd54-db51-4d4b-a248-87966d4388d3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkwNzkyNjYsIm5iZiI6MTczOTA3ODk2NiwicGF0aCI6Ii8xMzM0ODE5NC8zNjE3MTU2OTUtMTQ3NmZkNTQtZGI1MS00ZDRiLWEyNDgtODc5NjZkNDM4OGQzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA5VDA1MjkyNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM4MzUyMjdhYTk5OWU1NDJjMGQzMzAzODg1M2FhOWJiMDg1NGY2M2FhMGQ3NTY1NWVlNGM1MDg5NTJmNDA1OWMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.kYFKQYRqf1BRmaq8Mr-Scl9G8pbFAh86QtsZArUTwXg)
![image](https://private-user-images.githubusercontent.com/13348194/361715777-3a42a137-cbea-40b7-be46-a8a463d1ae45.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkwNzkyNjcsIm5iZiI6MTczOTA3ODk2NywicGF0aCI6Ii8xMzM0ODE5NC8zNjE3MTU3NzctM2E0MmExMzctY2JlYS00MGI3LWJlNDYtYThhNDYzZDFhZTQ1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA5VDA1MjkyNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTg0OGYzZDFiZTkzMmYxNDk1MjE4YjBhZWFhYWJlMGJlMjkwOTA1ZTRlZWM1ZDI4NmZhMGJiNTFlM2E5OThiY2QmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.5Cw7A8wyGSxDUVFAalwr9AXkl4LVpp3MB5EvYGx7IVg)
- Vue.js:用于构建用户界面和实现前端逻辑。
- Element Plus:提供了美观实用的 UI 组件。
- 自定义组件:包括代码编辑器组件(CodeEditor)、详情抽屉组件(DetailsDrawer)、图标对话框组件(IconDlg)和子组件对话框组件(ChildDlg)等。
- Fork 本项目。
- 创建新的分支进行开发。
- 提交代码并创建 Pull Request。
本项目采用 MIT 许可证。
欢迎大家使用 VisualizeVue,一起打造更高效的 Vue 组件开发体验!