@abduraufsherkulov/learnstorybook-design-system 中文文档教程
Chromatic's Design Systems for Developers tutorial template
该模板附带了快速启动和运行所需的主要 React 配置文件。
Quick start
创建应用程序。
使用 degit 获取此模板。
# Clone the template npx degit chromaui/learnstorybook-design-system-template learnstorybook-design-system
安装依赖项。
导航到新站点的目录并安装必要的依赖项。
# Navigate to the directory cd learnstorybook-design-system/ # Install the dependencies yarn
打开源代码并开始编辑!
在您选择的代码编辑器中打开
learnstorybook-design-system
目录并构建您的第一个组件!
What's inside?
快速查看此模板中包含的顶级文件和目录。
.
├── node_modules
├── public
├── src
├── .gitignore
├── .env
├── LICENSE
├── package.json
├── yarn.lock
└── README.md
node_modules
:此目录包含您的项目所依赖的所有代码模块(npm 包)。public
:此目录将包含站点的开发和生产版本。src
:此目录将包含与您将在应用程序中看到的内容相关的所有代码。.env
:此文件将包含您的应用程序所需的环境变量。.gitignore
:此文件告诉 git 在项目开发过程中不应跟踪或维护哪些文件。LICENSE
:该模板已根据 MIT 许可证获得许可。package.json
:Node.js 项目的标准清单文件,通常包括项目特定的元数据(例如项目名称、作者等信息)。 基于这个文件,npm 将知道项目需要哪些包。yarn.lock
:这是一个自动生成的文件,它基于为您的项目安装的 npm 依赖项的确切版本。 (请勿手动更改)。README.md
:包含有关项目的有用参考信息的文本文件。
Contribute
如果您遇到模板问题,我们鼓励您在此模板的存储库中打开一个问题。
Learning Storybook
- Read our introductory tutorial over at Storybook tutorials.
- Learn how to transform your component libraries into design systems in our Design Systems for Developers tutorial.
- See our official documentation at Storybook.
Chromatic's Design Systems for Developers tutorial template
This template ships with the main React configuration files you'll need to get up and running fast.
???? Quick start
Create the application.
Use degit to get this template.
# Clone the template npx degit chromaui/learnstorybook-design-system-template learnstorybook-design-system
Install the dependencies.
Navigate into your new site’s directory and install the necessary dependencies.
# Navigate to the directory cd learnstorybook-design-system/ # Install the dependencies yarn
Open the source code and start editing!
Open the
learnstorybook-design-system
directory in your code editor of choice and building your first component!
???? What's inside?
A quick look at the top-level files and directories included with this template.
.
├── node_modules
├── public
├── src
├── .gitignore
├── .env
├── LICENSE
├── package.json
├── yarn.lock
└── README.md
node_modules
: This directory contains all of the modules of code that your project depends on (npm packages).public
: This directory will contain the development and production build of the site.src
: This directory will contain all of the code related to what you will see on your application..env
: This file will contain the necessary environment variables for your application..gitignore
: This file tells git which files it should not track or maintain during the development process of your project.LICENSE
: The template is licensed under the MIT licence.package.json
: Standard manifest file for Node.js projects, which typically includes project specific metadata (such as the project's name, the author among other information). It's based on this file that npm will know which packages are necessary to the project.yarn.lock
: This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (Do not change it manually).README.md
: A text file containing useful reference information about the project.
Contribute
If you encounter an issue with the template, we encourage you to open an issue in this template's repository.
Learning Storybook
- Read our introductory tutorial over at Storybook tutorials.
- Learn how to transform your component libraries into design systems in our Design Systems for Developers tutorial.
- See our official documentation at Storybook.