vue开源ui组件_使用Vue.js构建UI设计系统的开源工具

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 & practices that work as the foundation for your application development.

Vue Design System是用于使用Vue.js构建UI设计系统的开源工具。 它为您和您的团队提供了一组有组织的工具，模式和实践，它们是应用程序开发的基础。

The tool is built on top of Vue.js, Vue Styleguidist, Vue Webpack Template & Theo and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS & JavaScript.

该工具建立在Vue.js，Vue Styleguidist，Vue Webpack模板和Theo的基础上，面向至少具有基于组件的工作流+ HTML，SCSS和JavaScript的基本知识的设计人员和前端开发人员。

Made by @viljamis and other contributors. See also the official website of Vue Design System and read my article on the processes and workflow I use to get started with a new design system project.

由@viljamis和其他贡献者制作。 另请参见Vue Design System的官方网站，并阅读有关开始使用新设计系统项目的流程和工作流程的文章。

View demo 查看演示 Download Source 下载源

特征 (Features)

• A set of interconnected patterns & practices for you and your team.

  为您和您的团队提供的一组相互关联的模式和实践。

• A well thought-out terminology, naming conventions, and hierarchy.

  深思熟虑的术语，命名约定和层次结构。

• Get an automated overview of how your design system progresses over time.

  获得有关您的设计系统随着时间的推移如何进行自动化的概述。

• Global design tokens in YAML format that you can use inside any component.

  您可以在任何组件内部使用的YAML格式的全局设计令牌。

• Automatic generation of living, user editable documentation.

  自动生成实时的，用户可编辑的文档。

• Easily export and use your Design System as an NPM dependency in another Vue.js project.

  在另一个Vue.js项目中轻松导出设计系统并将其用作NPM依赖项。

• Create a token, an element, or a pattern, and it’s immediately available across all components.

  创建一个令牌，一个元素或一个模式，它可以立即在所有组件中使用。

• Pre-configured Prettier setup for auto-formatting code on both save and before commit.

  预先配置的Prettier设置，用于在保存时和提交前自动格式化代码。

• Live Reloading, Autoprefixing, SCSS, and helper functions + simple and sane defaults for SVG and Webfont usage out-of-the-box.

  开箱即用的实时重载，自动前缀，SCSS和帮助器功能，以及简单而合理的SVG和Webfont使用默认值。

• Documentation and the app logic are separated, so you can have public docs while the app itself stays private.

  文档和应用程序逻辑是分开的，因此您可以在应用程序保持私有状态的同时拥有公共文档。

翻译自: https://vuejsexamples.com/an-open-source-tool-for-building-ui-design-systems-with-vue-js/

vue开源ui组件