vue.js ui框架

店面用户界面 (Storefront UI)

This project is on the early stages of development. Not ready for production use. Expect some things to be broken and api to change

该项目处于开发的早期阶段。 尚未准备好用于生产。 期望某些事情被打破,api会改变

We are looking for contributors and agencies willing to join us and build best UI library for Vue together!

我们正在寻找愿意加入我们并共同为Vue建立最佳UI库的贡献者和代理商!

Customization-first, performance-oriented and elegant UI framework for eCommerce (and not only) based on Vue.js and Google Retail UX Playbook. Made with by Vue Storefront team and contributors.

基于Vue.js和Google Retail UX Playbook的定制化,面向性能的,优雅的电子商务电子商务UI框架(不仅如此)。 由Vue Storefront团队和贡献者制作。

View Demo 查看演示 View Github 查看Github

是什么让它与众不同? (What makes it unique?)

Some libraries aim to give as much as they can out of the box but they faill when it comes to customization and performance. Our goal was to enable as much as possible out of the box but with primary focus on ability to customize any aspect of the components.

一些库旨在提供尽可能多的即取即用功能,但是在定制和性能方面会失败。 我们的目标是尽可能地开箱即用,但主要侧重于自定义组件任何方面的能力。

With SfUI you can change almost every aspect of provided components and use them to make stunning eCommerce shops (and not only)!

借助SfUI,您几乎可以更改所提供组件的各个方面,并将它们用于打造令人惊叹的电子商务商店(不仅如此)!

Here are the key characteristics of Storefront UI:

这是Storefront UI的主要特征:

We are building Storefront UI based on the following 5 fundamentals:

我们正在基于以下5个基础知识构建Storefront UI:

  • Performance: You’re importing ONLY what you need, and in a raw format which means you can benefit from all build-time optimizations like tree shaking or grouping common chunks.

    性能 :您仅以原始格式导入需要的内容,这意味着您可以从所有构建时优化中受益,例如摇树或对常见块进行分组。

  • Customization: Along with standard prop-based customization, every component has a set of slots that let you replace any part of it with your own images, icons or even custom HTML markup. In addition, every component is divided into separate HTML, CSS and JS files so you can compose your own components from only Storefront UI partials.

    自定义 :除了基于标准prop的自定义之外,每个组件都有一组插槽,可让您用自己的图像,图标甚至自定义HTML标记替换其中的任何部分。 此外,每个组件都分为单独HTML,CSS和JS文件,因此您可以仅从Storefront UI局部组成自己的组件。

  • Best practices: Storefront UI components follow best practices in terms of design and core. Every component is based on the Google Retail UX Playbook and is accessibility-friendly.

    最佳做法 :店面UI组件在设计和核心方面遵循最佳做法。 每个组件都基于Google Retail UX Playbook,并且易于访问。

  • E-commerce: As a UI library dedicated to eCommerce, Storefront UI along with standard UI components has all the elements necessary for building modern online stores.

    电子商务 :作为面向电子商务的UI库,Storefront UI和标准UI组件具有构建现代在线商店所需的所有元素。

  • Open Source: Storefront UI is a community effort to deliver the best possible experience to modern web applications and e-commerce shops, with carefully crafted components following best practices. Our team consists of agencies and volunteer contributors from all over the world.

    开源 :Storefront UI是社区的一项工作,旨在为现代Web应用程序和电子商务商店提供最佳体验,并遵循最佳实践精心设计组件。 我们的团队由来自世界各地的机构和志愿人员组成。

Storefront UI is based on atomic design which means every component is built from tiny atoms that you can use in your application! You’re not limited to big UI components anymore. Use Storefront UI atoms to quickly build your own, great-looking components!

店面用户界面基于原子设计,这意味着每个组件都是由可在您的应用程序中使用的微小原子构建的! 您不再局限于大型UI组件。 使用Storefront UI原子可快速构建自己的美观组件!

设计 (Design)

You can find the stunning designs we are using for Storefront UI components here

您可以在此处找到我们用于Storefront UI组件的惊人设计

怎么尝试? (How to try it?)

Storefront UI is not ready to use in production projects yet. We plan to release working alpha before the end of June 2019. If you want to check current state of components just check storybook

Storefront UI尚未准备好在生产项目中使用。 我们计划在2019年6月之前发布工作Alpha版。如果您要检查组件的当前状态,请检查故事书

You can read more about the installation here

您可以在此处阅读有关安装的更多信息

文献资料 (Documentation)

The documentation is always THE HARDEST PART of each open source project! But we're trying hard. Feel free to contribute to the documentation if you like.

该文档始终是每个开源项目最难的部分! 但是我们正在努力。 如果愿意,请随时为文档做出贡献。

Please find out what we've already managed to prepare: available here. Please note that the documentation is not yet finished as this project is still in the early stages of development and will be continuously updated. You can find them also under the docs/ folder.

请找出我们已经准备好的东西: 在这里可用 。 请注意,文档尚未完成,因为该项目仍处于开发的早期阶段,并将不断更新。 您也可以在docs/文件夹下找到它们。

翻译自: https://vuejsexamples.com/customization-first-vue-js-ui-framework-for-ecommerce/

vue.js ui框架

vue.js ui框架_定制的第一个Vue.js电子商务UI框架相关推荐

  1. ant design vue table 高度自适应_很受欢迎的vue前端UI框架

    最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...

  2. input js 离开事件_听说你熟练使用Vue.js,这9种Vue技术你掌握了吗?

    现在,Vue.js已成为前端开发的热门框架.有很多工程师利用Vue.js的便利性和强大功能.但是,我们完成的某些解决方案可能未遵循最佳做法.好吧,让我们看一下那些必备的Vue技术. 1. 函数组件 函 ...

  3. vue 不会热启动_使用PM2搭建在线vue.js开发环境(以守护进程方式热启动)

    项目以vue.js+layUI的作为前端开发技术栈,需要有一个在线的环境供项目成员实时查看效果,总不能每次都webpack打包发布后才能看到效果吧!刚开始就简单使用npm run dev命令热启动,但 ...

  4. vue data数据修改_史上最强vue总结,万字长文

    vue框架篇 vue的优点 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb: 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习: 双向数据绑定:保留了angular ...

  5. 404 单页应用 报错 路由_通过 Laravel 创建一个 Vue 单页面应用(五)

    文章转发自专业的Laravel开发者社区,原始链接:https://learnku.com/laravel/t/34858 我们在第4部分完成了编辑用户的功能,并且学习了如何使用 v-model 来监 ...

  6. vue和react相同点_我在React和Vue中创建了相同的应用程序。 这是区别。

    vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...

  7. 构建node.js基础镜像_在Android上构建Node.js应用程序

    构建node.js基础镜像 by Aurélien Giraud 通过AurélienGiraud 在Android上构建Node.js应用程序-第1部分:Termux,Vim和Node.js (Bu ...

  8. vue 组件库发布_如何创建和发布Vue组件库

    vue 组件库发布 Component libraries are all the rage these days. They make it easy to maintain a consisten ...

  9. 编写react组件_如何编写第一个React.js组件

    编写react组件 React的函数和类组件,道具,状态和事件处理程序 (React's function and class components, props, state, and event ...

  10. 开源web框架_带有酷名称的开源JavaScript和Web框架的词汇表

    开源web框架 It's getting to the point where there are so many cool open source projects that I can't kee ...

最新文章

  1. 第10课--10_04_LVM之二
  2. Linux环境编程 用户层定时器使用一 timerfd的使用
  3. Selenium爬携程酒店评论+jieba数据分析实战
  4. 计算机组成原理(哈工大刘宏伟)135讲(一)
  5. Linux下dislocate命令用法,在 Linux 中遨游手册页的海洋 | Linux 中国
  6. Cloud for Customer Fiori client导航栏里工作中心层级显示设定
  7. c语言 大雨 班上多个同学准备,2015年计算机二级考试《C语言》提高练习题(7)
  8. flutter RotationTransition实现旋转动画
  9. 数据类型以及数据类型的转换---防止忘记
  10. 如何得到DataTable的列名
  11. 数学建模论文写作要求
  12. Oracle 12C 最新 PSU 补丁下载与安装操作指北
  13. c# asp.net在线问卷调查系统源码【源码分享】
  14. 如何将b站上的视频下载到本地?
  15. 31省市数字经济“十四五”规划路线图
  16. 经典Android开发教程!面试字节跳动两轮后被完虐,附面试题答案
  17. Qlik之创建任务调度(五)
  18. 计算机表格 求差,excel表格怎么求差多个
  19. 青龙羊毛——酷狗放羊娃(搬运)
  20. react中类组件this的指向问题

热门文章

  1. 【IOS篇】Cocos2d-x 集成Chartboost广告
  2. markdown快捷键大全
  3. exter与static的用法
  4. 群晖硬盘已损毁 Linux 修复,群晖NAS提示空间损毁修复纪实 | Yeboyzq Blog
  5. harry potter
  6. 【GreenDao学习笔记】SQLite数据库保存float/double小数类型精度丢失
  7. 双人聊天php,js实现双人五子棋小游戏
  8. 神经机器翻译中的曝光偏差,幻觉翻译与跨域稳定性
  9. CTF之Bugku网站被黑
  10. redux 的入门级别使用 讲解