商业7

安装

要安装并保存您的软件包。 json 依赖性, 运行 :

npm install @commerce7/admin-ui

间字体

商业7 行政UI设计与Inter一起使用,免费提供 谷歌字体在 HTML 或国家预防机制的应用程序中可以包含Inter.

在 HTML 中:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

与国家预防机制:

npm install @fontsource/inter

import "@fontsource/inter/400.css";
import "@fontsource/inter/500.css";
import "@fontsource/inter/600.css";

设置

用 Commerce7AdminUI数字 :

import React from 'react';
import { Commerce7AdminUI } from '@commerce7/admin-ui';
import App from './App'

function Index() {
    return (
        <Commerce7AdminUI>
            <App/>
        </Commerce7AdminUI>
    );
}

使用量

导入组件以在应用程序内使用 :

import React from 'react';
import { Button } from '@commerce7/admin-ui';

function SaveButton() {
    return <Button>Hello World</Button>;
}

本地软件包的链接和解链接

有时,为了发展测试的目的,可能要求将一个项目与当地行政主管联系起来。 要做到这一点,有两个终端打开。 一个终端应该位于您本地文件夹的 admin ui 软件包的根上, 另一个应该位于您想要使用本地软件包的项目的根上 。 VS代码也应该开放.

这里使用的例子有管理员和管理员.

链接

In admin-ui terminal
1. npm link

In admin terminal
2. npm link @commerce7/admin-ui@{version-number}

In VS code
3. Restart VS code
4.After rebooting VS code, the @commerce7/admin-ui folder in the admin/@node_modules should have an arrow icon beside it. This shows it is properly linked.

In admin
5. In order to test locally, add **path.resolve('./node_modules/@commerce7/admin-ui/node_modules')** to webpack.{project-name}.config.js. Ex:  webpack.admin.dev.js
6. Run npm run frontend-admin

In admin-ui
5. When you change something in admin-ui and want to see the changes in admin, you need to run  **npm run build** in admin-ui to sync with admin. After you run **npm run build**, when you have symbolic link, the admin page will automatically be refreshed and will get the latest changes.

取消链接

In admin terminal
1. npm unlink --no-save @commerce7/admin-ui@{version-number}

In admin-ui terminal
2. npm unlink @commerce7/admin-ui@{version-number}

In VS code
3. Restart VS code

In VS code in admin project
4. Run npm install

重新启动后, 箭头图标应该被删除 。 这意味着该项目已成功与本地版admin ui脱钩.

发布注释

更改软件包版本时, 在顶端添加一个匹配条目 src/stories/Releases.mdx。解释为什么软件包正在更新,并遵循现有格式.

更新软件包的指示

不更新以下内容:

• 样式组件