name | zhName | sort |
---|---|---|
quick-start |
快速开始 |
0 |
使用create-react-app创建一个项目:
npx create-react-app my-app
cd my-app
安装依赖:
yarn add @alicloud/console-components moment styled-components
其中,moment
和 styled-components
是 Console Components 的 peerDependencies。
在应用入口(index.js)引入 Console Components 的样式:
import '@alicloud/console-components/dist/wind.css'
导入组件并使用:
// ...
import { Button } from '@alicloud/console-components'
// ...
// 在jsx中使用:
function App() {
return (
<div className="App">
<h1>Console Components Demo</h1>
<Button type="primary">Button works!</Button>
</div>
)
}
为了方便用户独立升级不同的业务组件,每个业务组件对应一个 npm package。
如果发现有业务组件恰好能够满足你的需求,安装并使用即可:
npm install -S @alicloud/console-components-app-layout @alicloud/console-components-console-menu
// ...
import CCAppLayout from '@alicloud/console-components-app-layout'
import CCConsoleMenu from '@alicloud/console-components-console-menu'
// ...
// 在jsx中使用:
const navMenu = (
<CCConsoleMenu
items={[
{
key: 'overview',
label: '概览',
},
]}
header="页面一级导航"
/>
)
function App() {
return (
<div className="App">
<CCAppLayout nav={navMenu}>
页面内容:
<Button type="primary">使用Button</Button>
</CCAppLayout>
</div>
)
}