mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
docs: Added ways to use bun installation dependencies (#48289)
* docs: add bun * docs: add bun * docs: add bun * docs: add bun
This commit is contained in:
kiner-tang
GitHub
parent
87fe058776
commit
80af2a65ed
142
.dumi/theme/builtins/InstallDependencies/bun.tsx
Normal file
142
.dumi/theme/builtins/InstallDependencies/bun.tsx
Normal file
@ -0,0 +1,142 @@
|
||||
import React from 'react';
|
||||
import { createStyles, css } from 'antd-style';
|
||||
import classNames from 'classnames';
|
||||
|
||||
interface IconProps {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
const useStyle = createStyles(() => ({
|
||||
iconWrap: css`
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
text-align: center;
|
||||
vertical-align: -0.125em;
|
||||
`,
|
||||
}));
|
||||
|
||||
const BunIcon: React.FC<IconProps> = (props) => {
|
||||
const { className, style } = props;
|
||||
const { styles } = useStyle();
|
||||
return (
|
||||
<span className={classNames(styles.iconWrap, className)} style={style}>
|
||||
<svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70" width="1em" height="1em">
|
||||
<title>Bun Logo</title>
|
||||
<path
|
||||
id="Shadow"
|
||||
d="M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"
|
||||
/>
|
||||
<g id="Body">
|
||||
<path
|
||||
id="Background"
|
||||
d="M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z"
|
||||
style={{
|
||||
fill: '#fbf0df',
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
id="Bottom_Shadow"
|
||||
data-name="Bottom Shadow"
|
||||
d="M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z"
|
||||
style={{
|
||||
fill: '#f6dece',
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
id="Light_Shine"
|
||||
data-name="Light Shine"
|
||||
d="M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z"
|
||||
style={{
|
||||
fill: '#fffefc',
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
id="Top"
|
||||
d="M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z"
|
||||
style={{
|
||||
fill: '#ccbea7',
|
||||
fillRule: 'evenodd',
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
id="Outline"
|
||||
d="M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"
|
||||
/>
|
||||
</g>
|
||||
<g id="Mouth">
|
||||
<g id="Background-2" data-name="Background">
|
||||
<path
|
||||
d="M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z"
|
||||
style={{
|
||||
fill: '#b71422',
|
||||
}}
|
||||
/>
|
||||
</g>
|
||||
<g id="Tongue">
|
||||
<path
|
||||
id="Background-3"
|
||||
data-name="Background"
|
||||
d="M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z"
|
||||
style={{
|
||||
fill: '#ff6164',
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
id="Outline-2"
|
||||
data-name="Outline"
|
||||
d="M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
id="Outline-3"
|
||||
data-name="Outline"
|
||||
d="M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"
|
||||
/>
|
||||
</g>
|
||||
<g id="Face">
|
||||
<ellipse
|
||||
id="Right_Blush"
|
||||
data-name="Right Blush"
|
||||
cx="53.22"
|
||||
cy="40.18"
|
||||
rx="5.85"
|
||||
ry="3.44"
|
||||
style={{
|
||||
fill: '#febbd0',
|
||||
}}
|
||||
/>
|
||||
<ellipse
|
||||
id="Left_Bluch"
|
||||
data-name="Left Bluch"
|
||||
cx="22.95"
|
||||
cy="40.18"
|
||||
rx="5.85"
|
||||
ry="3.44"
|
||||
style={{
|
||||
fill: '#febbd0',
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
id="Eyes"
|
||||
d="M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z"
|
||||
style={{
|
||||
fillRule: 'evenodd',
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
id="Iris"
|
||||
d="M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z"
|
||||
style={{
|
||||
fill: '#fff',
|
||||
fillRule: 'evenodd',
|
||||
}}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default BunIcon;
|
||||
@ -6,15 +6,17 @@ import type { Tab } from 'rc-tabs/lib/interface';
|
||||
import NpmLogo from './npm';
|
||||
import PnpmLogo from './pnpm';
|
||||
import YarnLogo from './yarn';
|
||||
import BunLogo from './bun';
|
||||
|
||||
interface InstallProps {
|
||||
npm?: string;
|
||||
yarn?: string;
|
||||
pnpm?: string;
|
||||
bun?: string;
|
||||
}
|
||||
|
||||
const InstallDependencies: React.FC<InstallProps> = (props) => {
|
||||
const { npm, yarn, pnpm } = props;
|
||||
const { npm, yarn, pnpm, bun } = props;
|
||||
const items: Tab[] = [
|
||||
{
|
||||
key: 'npm',
|
||||
@ -34,6 +36,12 @@ const InstallDependencies: React.FC<InstallProps> = (props) => {
|
||||
children: pnpm ? <SourceCode lang="bash">{pnpm}</SourceCode> : null,
|
||||
icon: <PnpmLogo />,
|
||||
},
|
||||
{
|
||||
key: 'bun',
|
||||
label: 'Bun',
|
||||
children: bun ? <SourceCode lang="bash">{bun}</SourceCode> : null,
|
||||
icon: <BunLogo />,
|
||||
},
|
||||
].filter((item) => item.children);
|
||||
|
||||
return (
|
||||
|
||||
@ -15,7 +15,7 @@ demo:
|
||||
|
||||
Before use icons, you need to install [@ant-design/icons](https://github.com/ant-design/ant-design-icons) package:
|
||||
|
||||
<InstallDependencies npm='npm install @ant-design/icons --save' yarn='yarn add @ant-design/icons' pnpm='pnpm install @ant-design/icons --save'></InstallDependencies>
|
||||
<InstallDependencies npm='npm install @ant-design/icons --save' yarn='yarn add @ant-design/icons' pnpm='pnpm install @ant-design/icons --save' bun='bun add @ant-design/icons'></InstallDependencies>
|
||||
|
||||
## List of icons
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ demo:
|
||||
|
||||
使用图标组件，你需要安装 [@ant-design/icons](https://github.com/ant-design/ant-design-icons) 图标组件包：
|
||||
|
||||
<InstallDependencies npm='npm install @ant-design/icons --save' yarn='yarn add @ant-design/icons' pnpm='pnpm install @ant-design/icons --save'></InstallDependencies>
|
||||
<InstallDependencies npm='npm install @ant-design/icons --save' yarn='yarn add @ant-design/icons' pnpm='pnpm install @ant-design/icons --save' bun='bun add @ant-design/icons'></InstallDependencies>
|
||||
|
||||
## 设计师专属
|
||||
|
||||
|
||||
@ -44,11 +44,11 @@ You can subscribe to this feed for new version notifications: https://github.com
|
||||
|
||||
## Installation
|
||||
|
||||
### Using npm or yarn or pnpm
|
||||
### Using npm or yarn or pnpm or bun
|
||||
|
||||
**We recommend using [npm](https://www.npmjs.com/) or [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/) to install**, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
|
||||
**We recommend using [npm](https://www.npmjs.com/) or [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/) or [bun](https://bun.sh/) to install**, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
|
||||
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save' bun='$ bun add antd'></InstallDependencies>
|
||||
|
||||
If you are in a bad network environment, you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
|
||||
|
||||
|
||||
@ -44,11 +44,11 @@ title: Ant Design of React
|
||||
|
||||
## 安装
|
||||
|
||||
### 使用 npm 或 yarn 或 pnpm 安装
|
||||
### 使用 npm 或 yarn 或 pnpm 或 bun 安装
|
||||
|
||||
**我们推荐使用 [npm](https://www.npmjs.com/) 或 [yarn](https://github.com/yarnpkg/yarn/) 或 [pnpm](https://pnpm.io/zh/) 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
|
||||
**我们推荐使用 [npm](https://www.npmjs.com/) 或 [yarn](https://github.com/yarnpkg/yarn/) 或 [pnpm](https://pnpm.io/zh/) 或 [bun](https://bun.sh/) 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
|
||||
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save' bun='$ bun add antd'></InstallDependencies>
|
||||
|
||||
如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
|
||||
|
||||
|
||||
@ -11,9 +11,9 @@ title: Usage with create-react-app
|
||||
|
||||
## Install and Initialization
|
||||
|
||||
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/).
|
||||
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/) or [bun](https://bun.sh/).
|
||||
|
||||
<InstallDependencies npm='$ npx create-react-app antd-demo --template typescript' yarn='$ yarn create react-app antd-demo --template typescript' pnpm='$ pnpm create react-app antd-demo --template typescript'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npx create-react-app antd-demo --template typescript' yarn='$ yarn create react-app antd-demo --template typescript' pnpm='$ pnpm create react-app antd-demo --template typescript' bun='$ bun create react-app antd-demo --template typescript'></InstallDependencies>
|
||||
|
||||
The tool will create and initialize environment and dependencies automatically, please try config your proxy setting or use another npm registry if any network errors happen during it.
|
||||
|
||||
@ -48,13 +48,13 @@ Below is the default directory structure.
|
||||
|
||||
Now we install `antd` from yarn or npm or pnpm.
|
||||
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save' bun='$ bun add antd'></InstallDependencies>
|
||||
|
||||
Modify `src/App.js`, import Button component from `antd`.
|
||||
|
||||
```tsx
|
||||
import { Button } from 'antd';
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div className="App">
|
||||
@ -72,8 +72,8 @@ OK, you should now see a blue primary button displayed on the page. Next you can
|
||||
Ref to the [Customize Theme documentation](/docs/react/customize-theme). Modify theme with ConfigProvider:
|
||||
|
||||
```tsx
|
||||
import { ConfigProvider } from 'antd';
|
||||
import React from 'react';
|
||||
import { ConfigProvider } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
|
||||
|
||||
@ -11,9 +11,9 @@ title: 在 create-react-app 中使用
|
||||
|
||||
## 安装和初始化
|
||||
|
||||
在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或者 [pnpm](https://pnpm.io/zh/)。
|
||||
在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或者 [pnpm](https://pnpm.io/zh/) 或者 [bun](https://bun.sh/)。
|
||||
|
||||
<InstallDependencies npm='$ npx create-react-app antd-demo --template typescript' yarn='$ yarn create react-app antd-demo --template typescript' pnpm='$ pnpm create react-app antd-demo --template typescript'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npx create-react-app antd-demo --template typescript' yarn='$ yarn create react-app antd-demo --template typescript' pnpm='$ pnpm create react-app antd-demo --template typescript' bun='$ bun create react-app antd-demo --template typescript'></InstallDependencies>
|
||||
|
||||
工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
|
||||
|
||||
@ -48,7 +48,7 @@ $ npm run start
|
||||
|
||||
现在从 yarn 或 npm 或 pnpm 安装并引入 antd。
|
||||
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save' bun='$ bun add antd'></InstallDependencies>
|
||||
|
||||
修改 `src/App.js`，引入 antd 的按钮组件。
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ tag: Updated
|
||||
|
||||
## Install and Initialization
|
||||
|
||||
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/).
|
||||
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/) or [bun](https://bun.sh/).
|
||||
|
||||
<InstallDependencies npm='$ npx create-next-app antd-demo' yarn='$ yarn create next-app antd-demo' pnpm='$ pnpm create next-app antd-demo'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npx create-next-app antd-demo' yarn='$ yarn create next-app antd-demo' pnpm='$ pnpm create next-app antd-demo' bun='$ bun create next-app antd-demo'></InstallDependencies>
|
||||
|
||||
The tool will create and initialize environment and dependencies automatically, please try config your proxy setting, or use another npm registry if any network errors happen during it.
|
||||
|
||||
@ -27,9 +27,9 @@ Open the browser at http://localhost:3000/. if you see the NEXT logo, it is cons
|
||||
|
||||
## Import antd
|
||||
|
||||
Now we install `antd` from yarn or npm or pnpm.
|
||||
Now we install `antd` from yarn or npm or pnpm or bun.
|
||||
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save' bun='$ bun add antd'></InstallDependencies>
|
||||
|
||||
Modify `src/app/page.tsx`, import Button component from `antd`.
|
||||
|
||||
@ -56,7 +56,7 @@ If you are using the App Router in Next.js and using antd as your component libr
|
||||
|
||||
1. Install `@ant-design/nextjs-registry`
|
||||
|
||||
<InstallDependencies npm='$ npm install @ant-design/nextjs-registry --save' yarn='$ yarn add @ant-design/nextjs-registry' pnpm='$ pnpm install @ant-design/nextjs-registry --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install @ant-design/nextjs-registry --save' yarn='$ yarn add @ant-design/nextjs-registry' pnpm='$ pnpm install @ant-design/nextjs-registry --save' bun='$ bun add @ant-design/nextjs-registry'></InstallDependencies>
|
||||
|
||||
2. Use it in `app/layout.tsx`
|
||||
|
||||
@ -94,7 +94,7 @@ If you are using the Pages Router in Next.js and using antd as your component li
|
||||
>
|
||||
> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
|
||||
|
||||
<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save' bun='$ bun add @ant-design/cssinjs'></InstallDependencies>
|
||||
|
||||
2. Rewrite `pages/_document.tsx`
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ tag: Updated
|
||||
|
||||
## 安装和初始化
|
||||
|
||||
在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或者 [pnpm](https://pnpm.io/zh/)。
|
||||
在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或者 [pnpm](https://pnpm.io/zh/) 或者 [bun](https://bun.sh/)。
|
||||
|
||||
<InstallDependencies npm='$ npx create-next-app antd-demo' yarn='$ yarn create next-app antd-demo' pnpm='$ pnpm create next-app antd-demo'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npx create-next-app antd-demo' yarn='$ yarn create next-app antd-demo' pnpm='$ pnpm create next-app antd-demo' bun='$ bun create next-app antd-demo'></InstallDependencies>
|
||||
|
||||
工具会自动初始化一个脚手架并安装项目的各种必要依赖，在安装过程中，有一些配置项需要自行选择，如果在过程中出现网络问题，请尝试配置代理，或使用其他 npm registry，例如，你可以切换到淘宝镜像源：`npm config set registry https://registry.npmmirror.com`。
|
||||
|
||||
@ -27,9 +27,9 @@ $ npm run dev
|
||||
|
||||
## 引入 antd
|
||||
|
||||
现在从 yarn 或 npm 或 pnpm 安装并引入 antd。
|
||||
现在从 yarn 或 npm 或 pnpm 或 bun 安装并引入 antd。
|
||||
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save' bun='$ bun add antd'></InstallDependencies>
|
||||
|
||||
修改 `src/app/page.tsx`，引入 antd 的按钮组件。
|
||||
|
||||
@ -56,7 +56,7 @@ export default Home;
|
||||
|
||||
1. 安装 `@ant-design/nextjs-registry`
|
||||
|
||||
<InstallDependencies npm='$ npm install @ant-design/nextjs-registry --save' yarn='$ yarn add @ant-design/nextjs-registry' pnpm='$ pnpm install @ant-design/nextjs-registry --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install @ant-design/nextjs-registry --save' yarn='$ yarn add @ant-design/nextjs-registry' pnpm='$ pnpm install @ant-design/nextjs-registry --save' bun='$ bun add @ant-design/nextjs-registry'></InstallDependencies>
|
||||
|
||||
2. 在 `app/layout.tsx` 中使用
|
||||
|
||||
@ -94,7 +94,7 @@ export default RootLayout;
|
||||
>
|
||||
> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
|
||||
|
||||
<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save' bun='$ bun add @ant-design/cssinjs'></InstallDependencies>
|
||||
|
||||
2. 改写 `pages/_document.tsx`
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ title: Usage with Vite
|
||||
|
||||
## Install and Initialization
|
||||
|
||||
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/).
|
||||
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/) or [bun](https://bun.sh/).
|
||||
|
||||
<InstallDependencies npm='$ npm create vite antd-demo' yarn='$ yarn create vite antd-demo' pnpm='$ pnpm create vite antd-demo'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm create vite antd-demo' yarn='$ yarn create vite antd-demo' pnpm='$ pnpm create vite antd-demo' bun='$ bun create vite antd-demo'></InstallDependencies>
|
||||
|
||||
The tool will create and initialize environment and dependencies automatically, please try config your proxy setting, or use another npm registry if any network errors happen during it.
|
||||
|
||||
@ -45,9 +45,9 @@ Below is the default directory structure.
|
||||
└── vite.config.ts
|
||||
```
|
||||
|
||||
Now we install `antd` from yarn or npm or pnpm.
|
||||
Now we install `antd` from yarn or npm or pnpm or bun.
|
||||
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save' bun='$ bun add antd'></InstallDependencies>
|
||||
|
||||
Modify `src/App.js`, import Button component from `antd`.
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ title: 在 Vite 中使用
|
||||
|
||||
## 安装和初始化
|
||||
|
||||
在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或者 [pnpm](https://pnpm.io/zh/)。
|
||||
在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或者 [pnpm](https://pnpm.io/zh/) 或者 [bun](https://bun.sh/)。
|
||||
|
||||
<InstallDependencies npm='$ npm create vite antd-demo' yarn='$ yarn create vite antd-demo' pnpm='$ pnpm create vite antd-demo'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm create vite antd-demo' yarn='$ yarn create vite antd-demo' pnpm='$ pnpm create vite antd-demo' bun='$ bun create vite antd-demo'></InstallDependencies>
|
||||
|
||||
工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理，或使用其他 npm registry。
|
||||
|
||||
@ -45,9 +45,9 @@ $ npm run dev
|
||||
└── vite.config.js
|
||||
```
|
||||
|
||||
现在从 yarn 或 npm 或 pnpm 安装并引入 antd。
|
||||
现在从 yarn 或 npm 或 pnpm 或 bun 安装并引入 antd。
|
||||
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
||||
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save' bun='$ bun add antd'></InstallDependencies>
|
||||
|
||||
修改 `src/App.js`，引入 antd 的按钮组件。
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user