vue.js ui框架_定制的第一个Vue.js电子商务UI框架-CSDN博客

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/文件夹下找到它们。