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