vue 图形化设计工具_Vue Design System 一个用Vue.js构建UI设计系统的开源工具

最新推荐文章于 2024-04-22 09:55:57 发布
VIP文章 最新推荐文章于 2024-04-22 09:55:57 发布
阅读量1.9k 收藏
点赞数
文章标签： vue 图形化设计工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39797532/article/details/112999684
版权

625332134c6f4d4600884b99daebf603.png625332134c6f4d4600884b99daebf603.png625332134c6f4d4600884b99daebf603.png625332134c6f4d4600884b99daebf603.png

Vue Design System

Vue Design System is an open source tool for building UI Design Systems with Vue.js. It provides you and your team a set of organized tools, patterns & practices that work as the foundation for your application development.

The tool is built on top of Vue.js, Vue Styleguidist, Webpack, and Theo and is aimed for designers and front-end developers who have at least ba

最低0.47元/天 解锁文章
weixin_39797532
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-design-system：使用Vue.js构建UI设计系统的开源工具
02-06
Vue设计系统 Vue Design System是用于使用构建UI设计系统的开源工具。 它为您和您的团队提供了一组有组织的工具，模式和实践，它们是应用程序开发的基础。 该工具建立在 ， ， 和，面向至少具有基于组件的工作流+ HTML，SCSS和JavaScript的基础知识的设计人员和前端开发人员。 由和其他贡献者制作。 另请参见Vue Design System，并有关开始使用新设计系统项目的流程和工作流程的。 产品特点 为您和您的团队提供了一组相互关联的模式和实践。 深思熟虑的术语，命名约定和层次结构。 获得有关您的设计系统如何随着时间推移而进行进展的自动概述。 您可以在任
12个Vue UI 组件库
顺其自然~专栏
06-16 4522
Vue.js 是一个渐进式 javascript 框架，用于构建 UIS（用户界面）和 SPA（单页应用程序）。UI 组件库提高了我们的开发效率，增强了应用的整体外观、感觉、交互性和可访问性，下面就来看看有哪些适用于 Vue 的 UI 组件库。
推荐开源项目：Vue UI 框架 - Vue.js 的强大界面构建工具
gitblog_00025的博客
03-26 313
推荐开源项目：Vue UI 框架 - Vue.js 的强大界面构建工具 项目地址:https://gitcode.com/vuejs/ui 项目简介 在前端开发的世界中，找到一个高效、灵活且易于使用的UI框架是至关重要的。Vue UI是一个由Vue.js官方维护的开源项目，旨在为开发者提供一套完整的组件库和工具集，帮助他们快速构建现代化的Web应用界面。 技术分析 基于Vue.js Vue UI的...
vue开源ui组件_使用Vue.js构建UI设计系统的开源工具
cuk5239的博客
07-22 494
vue开源ui组件 Vue设计系统 (Vue Design System) Vue Design System is an open source tool for building UI Design Systems with Vue.js. It provides you and your team a set of organized tools, patterns & practi...
火速拿来用！对比 12,000 个 Vue.js 开源项目发现最实用的 TOP45！
CSDN资讯
03-07 1658
在过去一年里，前端开发发展迅速，前端工程师的薪资亦是水涨船高。2019 更是热度不减，而作为近年来尤为热门的前端框架，Vue.js 自是积累了大量关注。本文将为你介绍 2...
安装vuecli3.0.3指定版本_Advanced Design System ADS 2020 Update 2.0 独立安装版本
weixin_39543758的博客
11-25 246
关于 Advanced Design System ADS 2020 的简介可访问老wu博客里之前发布的文章：https://www.mr-wu.cn/advanced-design-system-2020-free-download-and-crack/老wu这里分享的 Advanced Design System ADS 2020 Update 2.0 虽然带个Update字样，但这...
vue-design 桌面端页面可视化构建程序
weixin_34248258的博客
03-18 2317
vue-design 用Vue和Electron开发最好的页面可视化构建程序Your star is the greatest encouragement to me. 功能 使用electron构建的桌面端应用 通过简单的配置引入UI组件库 通过可拖拽、可编辑的组件设计页面 可编辑页面css 保存为.vue文件 保存/导入一个项目 ...
前后端交互
richest_qi的博客
05-11 657
Vue和Vue CLI Vue CLI = Vue.js + 一堆插件 起步 全局安装Vue CLI：npm install -g @vue/cli 查看Vue CLI版本：vue --version或vue -V 安装Vue CLI时，最好添加版本号，如npm install -g @vue/[email protected] 创建一个项目：vue create web Manually select features，按空格选中 TypeScript Router Vuex Linter/Format
在vue中使用ant-design-vue组件
热门推荐
qq_49723651的博客
03-30 3万+
在vue中使用ant-design-vue组件 文章目录在vue中使用ant-design-vue组件1. 安装2. 引入组件库3. 使用3.1 按钮样式3.2 导航栏样式3.3 表单样式 官方地址：Ant Design Vue 1. 安装 首先使用vue-cli创建项目，然后进入项目，使用npm安装ant-design-vue库： npm i --save ant-design-vue@next 然后在package.json文件中的dependencies中看见刚刚下载的库： 2. 引入组件库
推荐一款创新的设计工具：Vue Design Editor
最新发布
gitblog_00068的博客
04-22 412
推荐一款创新的设计工具：Vue Design Editor 项目地址:https://gitcode.com/haixin-fang/vue-design-editor Vue Design Editor 是一个基于 Vue.js 的在线设计编辑器，旨在提供一种直观、实时且可编程的方式来创建和编辑网页设计。这个项目融合了前端开发与UI设计的精髓，为开发者和设计师提供了全新的协作体验。 技术分析 V...
vue-design table 列拖拽
wsxc451的专栏
03-31 1379
vue table 拖拽列
vue-design
03-19
支持Vue.js Vue.js是MIT许可的开源项目，其持续的开发完全有赖于这些出色的。如果您想加入他们，请考虑： 。 。 Patreon和OpenCollective有什么区别？ 通过Patreon捐赠的资金将直接用于支持Evan You在Vue.js上的全职工作。通过OpenCollective捐赠的资金由透明费用管理，将用于补偿核心团队成员的工作和费用或赞助社区活动。通过在任一平台上捐款，您的姓名/徽标将得到适当的认可和曝光。 特别赞助 白金赞助商 白金赞助商（中国） 金牌赞助商 通过赞助 铂 金子 介绍 Vue（发音为/vjuː/ ，类似于视图）是用于构建用户界面的渐进框架。它是从头开始设计的，可以逐步采用，并且可以根据不同的用例轻松地在库和框架之间扩展。它由一个仅着眼于视图层的可访问核心库和一个支持库生态系统组成，该系统可帮助您解决大型单页应用程序中的复杂性。 浏览器兼容性
web_designer:网页设计器图形化工具,通过拖拽组件进行页面排版和生成页面代码
05-02
Web Designer 项目部分截图 页面设计区 页面预览 图表样式设置可视化配置 图表样式设置代码编辑 组件事件配置 组件联动事件配置 简介: 项目使用了Vue进行开发 网页设计器图形化工具,目前内置ElementUi组件库 一键生成网页代码,支持进行二次开发 通过拖拽左侧组件图标,放置中间画布区,进行页面排版,设计区右侧面板可以对组件属性进行设置 点击右侧顶部保存按钮(数据保存在本地浏览器localStorage)可以进行数据保存 点击右侧顶部预览按钮,可以对页面布局进行预览 点击右侧顶部发布按钮,会调用设计器后台服务进行页面生成和代码生成,生成完成之后会在项目根目录生成runtime/vue_cli_3.x-master文件夹,里面的代码可以进行二次开发(基于 vue cli 3.x 版本) 默认发布完成之后,会打开命令行工具进行项目初始化(npm install)和打开项目(np
基于vue-design-and的vue后台管理系统模板
02-21
基于vue-design-and的vue后台管理系统模板
VueDesignSystem一个用Vuejs构建UI设计系统的开源工具
08-07
Vue Design System 一个用Vue.js构建UI设计系统的开源工具
vue-argon-design-system:Vue Argon设计系统
03-11
从用于Bootstrap 4的设计系统开始开发。它是免费的开源软件，并且具有许多组件，可以帮助您创建出色的网站。 全编码组件 Vue Argon设计系统由100多个独立组件构成，可让您自由选择和组合。 所有组件的颜色都可能不同，您可以使用SASS文件轻松对其进行修改。 因为所有元素都已实现，所以从原型制作到功能齐全的代码，您将节省大量时间。 该设计系统附带了预先构建的示例，因此开发过程是无缝的，从我们的页面切换到真实的网站非常容易。 每个元素都有颜色，样式，悬停，焦点的多种状态，您可以轻松访问和使用。 复杂文件 每个元素在非常复杂的文档中都有很好的呈现。 您可以在此处阅读有关此设计系统背后思想的更多信息。 您可以在此处检查组件，并在此处检查基础。 示例页面 如果您想获得灵感或直接向客户展示一些东西，可以通过我们预先构建的示例页面快速开始开发。 您将能够快速设置Web项目的基本结构。 目
Vue设计系统-使用Vue.js构建UI设计系统的开源样板。-Vue.js开发
05-27
它为您和您的团队提供了一组组织的Vue设计系统Vue Design System是用于使用Vue.js构建UI设计系统的开源工具。 它为您和您的团队提供了一组有组织的工具，模式和实践，它们是应用程序开发的基础。 该工具建立在Vue.js...
vue-cion-design-system:CION-Vue.js的设计系统样板
03-11
CION是主要为Vue.js应用程序构建的设计系统。 您可以将其用作构建自己的设计系统的起点。 该系统利用设计令牌，带有集成代码游乐场的生活风格指南以及用于常见UI任务的可重用组件。 生活风格指南演示： ：//style...
chakra-ui-vue：:high_voltage:轻松构建可扩展且可访问的Vue.js应用程序
02-03
@ chakra-ui / vue为您提供了一组可访问且可组合的Vue组件，您可以使用它们来构建自己喜欢的应用程序和站点。 专为Vue 2.X设计 寻找文件？ 在这里=> 产品特点 易于设计： Chakra UI包含一组布局组件，例如CBox和C...
创建一个带three.js并基于 Vue.js 和 element-ui 的后台管理系统模板
03-25
可以使用 Vue-cli 快速搭建基于 Vue.js 的项目结构并在此基础上添加 element-ui 和 three.js 的依赖库。以下是相关的命令： 1. 安装 Vue-cli ``` npm install -g @vue/cli ``` 2. 创建一个基于 Vue.js 的项目 ``` vue create your-project-name ``` 3. 进入项目目录并添加 element-ui 和 three.js 的依赖库 ``` cd your-project-name npm i element-ui three ``` 4. 在 main.js 中导入 element-ui 和 three.js 的样式和组件 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import * as THREE from 'three' import App from './App.vue' Vue.config.productionTip = false Vue.use(ElementUI) Vue.prototype.$THREE = THREE new Vue({ render: h => h(App), }).$mount('#app') ``` 5. 在 App.vue 中创建一个包含 three.js 场景的组件 ```vue <template> <div class="three-container"></div> </template> <script> export default { name: 'App', mounted () { // 初始化 three.js 场景 const scene = new this.$THREE.Scene() const camera = new this.$THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) const renderer = new this.$THREE.WebGLRenderer() renderer.setSize(window.innerWidth, window.innerHeight) document.querySelector('.three-container').appendChild(renderer.domElement) const geometry = new this.$THREE.BoxGeometry(1, 1, 1) const material = new this.$THREE.MeshBasicMaterial({ color: 0x00ff00 }) const cube = new this.$THREE.Mesh(geometry, material) scene.add(cube) camera.position.z = 5 const animate = () => { requestAnimationFrame(animate) cube.rotation.x += 0.01 cube.rotation.y += 0.01 renderer.render(scene, camera) } animate() } } </script> <style scoped> .three-container { width: 100%; height: 100%; position: fixed; } </style> ``` 这样就可以创建一个基于 Vue.js、element-ui 和 three.js 的后台管理系统模板。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值