add docs
tjz
parent
6a2f865b7c
commit
963a7204a1
|
|
@ -20,7 +20,7 @@ Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。
|
|||
|
||||
- 提炼自企业级中后台产品的交互语言和视觉风格。
|
||||
- 开箱即用的高质量 Vue 组件。
|
||||
- 全链路开发和设计工具体系。
|
||||
- 共享[Ant Design of React](http://ant-design.gitee.io/docs/spec/introduce-cn)设计工具体系。
|
||||
|
||||
## 安装
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
|
||||
# Customize Theme
|
||||
|
||||
The structure and styles of vue-antd-ui are exactly the same as those of Antd. You can refer to the Antd React customization mode for configuration.
|
||||
|
||||
Ant Design allows you to customize some basic design aspects in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc.
|
||||
|
||||
|
||||
|
||||
## Less variables
|
||||
|
||||
We are using [Less](http://lesscss.org/) as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.
|
||||
|
||||
- [Default Variables](https://github.com/vueComponent/ant-design/blob/master/components/style/themes/default.less)
|
||||
|
||||
Please report an issue if the existing list of variables is not enough for you.
|
||||
|
||||
## How to do it
|
||||
|
||||
We recommend [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) to override the default values of the variables. There are two ways to achieve it in practice.
|
||||
|
||||
### 1) Using `theme` property (recommended way)
|
||||
|
||||
Specify the `theme` property in the `package.json` or `.webpackrc` file, whose value can be either an object or the path to a JS file that contains the custom values of specific variables:
|
||||
- example of directly specifying the custom values as an object:
|
||||
```js
|
||||
"theme": {
|
||||
"primary-color": "#1DA57A",
|
||||
},
|
||||
```
|
||||
|
||||
### 2) Overriding Less variables (alternative way)
|
||||
|
||||
Override variables via less definition files.
|
||||
|
||||
Create a standalone less file like the one below, and import it in your project.
|
||||
|
||||
```css
|
||||
@import "~vue-antd-ui/dist/antd.less"; // import official less entry file
|
||||
@import "your-theme-file.less"; // override variables here
|
||||
```
|
||||
|
||||
Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working.
|
||||
|
||||
## Related Articles
|
||||
|
||||
- [How to Customize Ant Design with React & Webpack… the Missing Guide](https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f)
|
||||
- [Theming Ant Design with Sass and Webpack](https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7)
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
|
||||
# 定制主题
|
||||
|
||||
vue-antd-ui的组件结构及样式和Antd React完全一致，你可以参考Antd React的定制方式进行配置。
|
||||
|
||||
Ant Design 设计规范上支持一定程度的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于主色、圆角、边框和部分组件的视觉定制。
|
||||
|
||||
|
||||
|
||||
## 样式变量
|
||||
|
||||
antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。
|
||||
|
||||
- [默认样式变量](https://github.com/vueComponent/ant-design/blob/master/components/style/themes/default.less)
|
||||
|
||||
如果以上变量不能满足你的定制需求，可以给我们提 issue。
|
||||
|
||||
## 定制方式
|
||||
|
||||
我们使用 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 的方式来覆盖变量。
|
||||
在具体工程实践中，有 `package.theme` 和 `less` 两种方案，选择一种即可。
|
||||
|
||||
|
||||
### 1) theme 属性（推荐）
|
||||
|
||||
配置在 `package.json` 或 `.webpackrc` 下的 `theme` 字段。theme 可以配置为一个对象或文件路径。
|
||||
|
||||
```js
|
||||
"theme": {
|
||||
"primary-color": "#1DA57A",
|
||||
},
|
||||
```
|
||||
|
||||
### 2) less
|
||||
|
||||
用 less 文件进行变量覆盖。
|
||||
|
||||
建立一个单独的 `less` 文件如下，再引入这个文件。
|
||||
|
||||
```css
|
||||
@import "~vue-antd-ui/dist/antd.less"; // 引入官方提供的 less 样式入口文件
|
||||
@import "your-theme-file.less"; // 用于覆盖上面定义的变量
|
||||
```
|
||||
|
||||
注意：这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 `babel-plugin-import` 的 `style` 属性一起使用。
|
||||
|
||||
## 社区教程 for Antd React
|
||||
|
||||
- [How to Customize Ant Design with React & Webpack… the Missing Guide](https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f)
|
||||
- [Theming Ant Design with Sass and Webpack](https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7)
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
|
||||
# Getting Started
|
||||
|
||||
Ant Design React is dedicated to providing a **good development experience** for programmers. Make sure that you had installed [Node.js](https://nodejs.org/)(> v6.5) correctly.
|
||||
|
||||
> Before delving into Ant Design React, a good knowledge base of [React](http://facebook.github.io/react/) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/) is needed.
|
||||
|
||||
|
||||
## Playground
|
||||
|
||||
The following CodeSandbox demo is the simplest use case, and it's also a good habit to fork this demo to provide a re-producible demo while reporting a bug.
|
||||
|
||||
- [antd CodeSandbox](https://u.ant.design/codesandbox-repro)
|
||||
|
||||
## First Local Development
|
||||
|
||||
During development, you may need to compile and debug JSX and ES2015 code, and even proxy some of the requests to mock data or other external services. All of these can be done with quick feedback provided through hot reloading of changes.
|
||||
|
||||
### 1. Installation
|
||||
|
||||
[antd-init](https://github.com/ant-design/antd-init/) is a demo-only scaffold tool. If you want to create real world projects, [dva-cli](https://github.com/dvajs/dva-cli) and [create-react-app](https://github.com/facebookincubator/create-react-app) is our recommendation.
|
||||
|
||||
```bash
|
||||
$ npm install antd-init -g
|
||||
```
|
||||
|
||||
Read [the documentation of `antd-init`](https://github.com/ant-design/antd-init/) and [the documentation of `ant-tool`](http://ant-tool.github.io/) to explore more features.
|
||||
|
||||
> Also, you can try other scaffolds which is provided below:
|
||||
>
|
||||
> - [Ant Design Pro](http://pro.ant.design/)
|
||||
> - [antd-admin](https://github.com/zuiidea/antd-admin)
|
||||
> - [reactSPA](https://github.com/JasonBai007/reactSPA)
|
||||
> - [react-redux-antd by Justin-lu](https://github.com/Justin-lu/react-redux-antd)
|
||||
> - [react-redux-antd by okoala](https://github.com/okoala/react-redux-antd)
|
||||
> - [react-antd-admin](https://github.com/fireyy/react-antd-admin)
|
||||
> - [react-antd-redux-router-starter](https://github.com/yuzhouisme/react-antd-redux-router-starter)
|
||||
> - [react-redux-antd-starter](https://github.com/BetaRabbit/react-redux-antd-starter)
|
||||
> - more scaffolds at [Scaffold Market](http://scaffold.ant.design/)
|
||||
|
||||
### 2. Create a New Project
|
||||
|
||||
A new project can be created using CLI tools.
|
||||
|
||||
```bash
|
||||
$ mkdir antd-demo && cd antd-demo
|
||||
$ antd-init
|
||||
```
|
||||
|
||||
`antd-init` will run `npm install` after a project is created. If it fails, you can run `npm install` by yourself.
|
||||
|
||||
### 3. Use antd's Components
|
||||
|
||||
By default, besides the scaffolding needed to start the development, a fully working Todo application is created.
|
||||
You may study this example later. For now, just follow this guide in order to get some experience working with the result of `antd-init`.
|
||||
|
||||
Replace the content of `index.js` with the following code.
|
||||
As you can see, there is no difference between antd's components and usual React components.
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { LocaleProvider, DatePicker, message } from 'antd';
|
||||
// The default locale is en-US, but we can change it to other language
|
||||
import frFR from 'antd/lib/locale-provider/fr_FR';
|
||||
import moment from 'moment';
|
||||
import 'moment/locale/fr';
|
||||
|
||||
moment.locale('fr');
|
||||
|
||||
class App extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
date: '',
|
||||
};
|
||||
}
|
||||
handleChange(date) {
|
||||
message.info('Selected Date: ' + date.toString());
|
||||
this.setState({ date });
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<LocaleProvider locale={frFR}>
|
||||
<div style={{ width: 400, margin: '100px auto' }}>
|
||||
<DatePicker onChange={value => this.handleChange(value)} />
|
||||
<div style={{ marginTop: 20 }}>Date: {this.state.date.toString()}</div>
|
||||
</div>
|
||||
</LocaleProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
```
|
||||
|
||||
> All the components in antd are listed in the sidebar.
|
||||
|
||||
### 4. Development & Debugging
|
||||
|
||||
Run your project and visit http://127.0.0.1:8000
|
||||
|
||||
```bash
|
||||
$ npm start
|
||||
```
|
||||
|
||||
### 5. Building & Deployment
|
||||
|
||||
```bash
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
Entry files will be built and generated in `dist` directory, where we can deploy it to different environments.
|
||||
|
||||
> This guide is designed to help you to understand how to use antd, so it may not be similar to what you do in the real world.
|
||||
> But you can use those tools in your project, depending on your context and needs.
|
||||
|
||||
## Compatibility
|
||||
|
||||
Ant Design React supports all the modern browsers and IE9+.
|
||||
|
||||
You need to provide [es5-shim](https://github.com/es-shims/es5-shim) and [es6-shim](https://github.com/paulmillr/es6-shim) and other polyfills for IE browsers.
|
||||
|
||||
If you are using babel, we strongly recommend using [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) and [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) instead of those two shims.
|
||||
|
||||
> Please avoid using both the babel and shim methods at the same time.
|
||||
|
||||
> If you run into problems with [startsWith ](https://github.com/ant-design/ant-design/issues/3400#issuecomment-253181445), you should import [es6-shim](https://github.com/paulmillr/es6-shim) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) as a workaround.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- import stylesheet -->
|
||||
<link rel="stylesheet" href="/index.css">
|
||||
<!-- Polyfills -->
|
||||
<!--[if lt IE 10]>
|
||||
<script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
|
||||
<![endif]-->
|
||||
<script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
<!-- import common dependencies -->
|
||||
<script src="/common.js"></script>
|
||||
<!-- import entry file -->
|
||||
<script src="/index.js"></script>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### IE8 note
|
||||
|
||||
> We don't support IE8 after `antd@2.0`.
|
||||
|
||||
You may encounter problems like [#28](https://github.com/ant-tool/atool-build/issues/28) and [#858](https://github.com/ant-design/ant-design/issues/858), since `babel@6.x` doesn't support IE8. You can refer to this [webpack config](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8).
|
||||
|
||||
> More about how to use React in IE8: https://github.com/xcatliu/react-ie8
|
||||
|
||||
## Customized Work Flow
|
||||
|
||||
If you want to customize your work flow, we recommend using [webpack](http://webpack.github.io/) to build and debug code.
|
||||
|
||||
Also, you can use any [scaffold](https://github.com/enaqx/awesome-react#boilerplates) available in the React ecosystem. If you encounter problems, you can use our [webpack config](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) and [modify it](http://ant-tool.github.io/webpack-config.html).
|
||||
|
||||
If you are trying [parcel](https://parceljs.org), here is [a demo repository](https://github.com/ant-design/parcel-antd).
|
||||
|
||||
There are some [scaffolds](http://scaffold.ant.design/) which have already integrated antd, so you can try and start with one of these, and even contribute.
|
||||
|
||||
|
||||
## Import on Demand
|
||||
|
||||
If you see logs like below screenshot, you might be importing all components by writing `import { Button } from 'antd';`. This will affect your app's network performance.
|
||||
|
||||
```
|
||||
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
|
||||
```
|
||||
|
||||
> 
|
||||
|
||||
However, we can import individual components on demand:
|
||||
|
||||
```jsx
|
||||
import Button from 'antd/lib/button';
|
||||
import 'antd/lib/button/style'; // or antd/lib/button/style/css for css format file
|
||||
```
|
||||
|
||||
We strongly recommend using [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), which can convert the following code to the 'antd/lib/xxx' way:
|
||||
|
||||
```jsx
|
||||
import { Button } from 'antd';
|
||||
```
|
||||
|
||||
And this plugin can load styles too, read [usage](https://github.com/ant-design/babel-plugin-import#usage) for more details.
|
||||
|
||||
> FYI, babel-plugin-import's `style` option will importing some global reset styles, don't use it if you don't need those styles. You can import styles manually via `import 'antd/dist/antd.css'` and override the global reset styles.
|
||||
|
||||
## Customization
|
||||
|
||||
- [Customize Theme](/docs/react/customize-theme)
|
||||
- [Local Iconfont](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)
|
||||
|
||||
## Tips
|
||||
|
||||
- You can use any `npm` modules.
|
||||
- We recommend writing code in [ES2015](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) as `babel` has been integrated into our work flow.
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
|
||||
# 快速上手
|
||||
|
||||
Ant Design React 致力于提供给程序员**愉悦**的开发体验。
|
||||
|
||||
> 在开始之前，推荐先学习 [React](http://facebook.github.io/react/) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)，并正确安装和配置了 [Node.js](https://nodejs.org/) v6.5 或以上。
|
||||
> 官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 React 全家桶的正确开发方式。如果你刚开始学习前端或者 React，将 UI 框架作为你的第一步可能不是最好的主意。
|
||||
|
||||
## 在线演示
|
||||
|
||||
最简单的使用方式参照以下 CodeSandbox 演示，也推荐 Fork 本例来进行 `Bug Report`。
|
||||
|
||||
- [antd CodeSandbox](https://u.ant.design/codesandbox-repro)
|
||||
|
||||
## 第一个本地实例
|
||||
|
||||
实际项目开发中，你会需要对 ES2015 和 JSX 代码的构建、调试、代理、打包部署等一系列工程化的需求。
|
||||
我们提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。
|
||||
|
||||
### 1. 安装脚手架工具
|
||||
|
||||
[antd-init](https://github.com/ant-design/antd-init/) 是一个用于演示 antd 如何使用的脚手架工具，实际业务项目建议使用 [dva-cli](https://github.com/dvajs/dva-cli) 和 [create-react-app](https://github.com/facebookincubator/create-react-app) 进行搭建。
|
||||
|
||||
```bash
|
||||
$ npm install antd-init -g
|
||||
```
|
||||
|
||||
更多功能请参考 [脚手架工具](https://github.com/ant-design/antd-init/) 和 [开发工具文档](http://ant-tool.github.io/)。
|
||||
|
||||
> 您也可以使用以下脚手架和范例：
|
||||
>
|
||||
> - [Ant Design Pro](http://pro.ant.design/)
|
||||
> - [antd-admin](https://github.com/zuiidea/antd-admin)
|
||||
> - [reactSPA](https://github.com/JasonBai007/reactSPA)
|
||||
> - [react-redux-antd by Justin-lu](https://github.com/Justin-lu/react-redux-antd)
|
||||
> - [react-redux-antd by okoala](https://github.com/okoala/react-redux-antd)
|
||||
> - [react-antd-admin](https://github.com/fireyy/react-antd-admin)
|
||||
> - [react-antd-redux-router-starter](https://github.com/yuzhouisme/react-antd-redux-router-starter)
|
||||
> - [react-redux-antd-starter](https://github.com/BetaRabbit/react-redux-antd-starter)
|
||||
> - 更多脚手架可以查看 [脚手架市场](http://scaffold.ant.design/)
|
||||
|
||||
### 2. 创建一个项目
|
||||
|
||||
使用命令行进行初始化。
|
||||
|
||||
```bash
|
||||
$ mkdir antd-demo && cd antd-demo
|
||||
$ antd-init
|
||||
```
|
||||
|
||||
antd-init 会自动安装 npm 依赖，若有问题则可自行安装。
|
||||
|
||||
若安装缓慢报错，可尝试用 `cnpm` 或别的镜像源自行安装：`rm -rf node_modules && cnpm install`。
|
||||
|
||||
### 3. 使用组件
|
||||
|
||||
脚手架会生成一个 Todo 应用实例（一个很有参考价值的 React 上手示例），先不管它，我们用来测试组件。
|
||||
|
||||
直接用下面的代码替换 `index.js` 的内容，用 React 的方式直接使用 antd 组件。
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { LocaleProvider, DatePicker, message } from 'antd';
|
||||
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
|
||||
import zhCN from 'antd/lib/locale-provider/zh_CN';
|
||||
import moment from 'moment';
|
||||
import 'moment/locale/zh-cn';
|
||||
|
||||
moment.locale('zh-cn');
|
||||
|
||||
class App extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
date: '',
|
||||
};
|
||||
}
|
||||
handleChange(date) {
|
||||
message.info('您选择的日期是: ' + date.toString());
|
||||
this.setState({ date });
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<LocaleProvider locale={zhCN}>
|
||||
<div style={{ width: 400, margin: '100px auto' }}>
|
||||
<DatePicker onChange={value => this.handleChange(value)} />
|
||||
<div style={{ marginTop: 20 }}>当前日期：{this.state.date.toString()}</div>
|
||||
</div>
|
||||
</LocaleProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
```
|
||||
|
||||
> 你可以在左侧菜单选用更多组件。
|
||||
|
||||
### 4. 开发调试
|
||||
|
||||
一键启动调试，访问 http://127.0.0.1:8000 查看效果。
|
||||
|
||||
```bash
|
||||
$ npm start
|
||||
```
|
||||
|
||||
### 5. 构建和部署
|
||||
|
||||
```bash
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。
|
||||
|
||||
> 上述例子用于帮助你理解 Ant Design React 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。
|
||||
|
||||
## 兼容性
|
||||
|
||||
Ant Design React 支持所有的现代浏览器和 IE9+。
|
||||
|
||||
对于 IE 系列浏览器，需要提供 [es5-shim](https://github.com/es-shims/es5-shim) 和 [es6-shim](https://github.com/paulmillr/es6-shim) 等 Polyfills 的支持。
|
||||
|
||||
如果你使用了 babel，强烈推荐使用 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) 和 [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) 来替代以上两个 shim。
|
||||
|
||||
> 避免同时使用 babel 和 shim 两种兼容方法，以规避 [#6512](https://github.com/ant-design/ant-design/issues/6512) 中所遇问题
|
||||
|
||||
> 如果在 IE 浏览器中遇到 `startsWith` 的[问题](https://github.com/ant-design/ant-design/issues/3400#issuecomment-253181445)，请引入 [es6-shim](https://github.com/paulmillr/es6-shim) 或 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/)。
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="/index.css">
|
||||
<!-- Polyfills -->
|
||||
<!--[if lt IE 10]>
|
||||
<script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
|
||||
<![endif]-->
|
||||
<script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
<!-- 引入公用文件 -->
|
||||
<script src="/common.js"></script>
|
||||
<!-- 引入入口文件 -->
|
||||
<script src="/index.js"></script>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### IE8 note
|
||||
|
||||
> `antd@2.0` 之后将不再支持 IE8。
|
||||
|
||||
IE8 需要配合使用 [react@0.14.x](https://facebook.github.io/react/blog/2016/01/12/discontinuing-ie8-support.html) 版本。
|
||||
|
||||
另外，由于 `babel@6.x` 对 IE8 的支持不佳，你可能会遇到类似 [#28](https://github.com/ant-tool/atool-build/issues/28) 和 [#858](https://github.com/ant-design/ant-design/issues/858) 的 default 报错的问题，你也可以参照这个 [webpack 配置](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8) 来解决。
|
||||
|
||||
> 更多 IE8 下使用 React 的相关问题可以参考：https://github.com/xcatliu/react-ie8
|
||||
|
||||
## 自行构建
|
||||
|
||||
如果想自己维护工作流，我们推荐使用 [webpack](http://webpack.github.io/) 进行构建和调试。理论上你可以利用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#boilerplates) 进行开发，如果遇到问题可参考我们所使用的 [webpack 配置](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) 进行 [定制](http://ant-tool.github.io/webpack-config.html)。
|
||||
|
||||
如果你使用 [parcel](https://parceljs.org)，这里也有 [一个例子](https://github.com/ant-design/parcel-antd) 可以参考。
|
||||
|
||||
目前社区也有很多基于 antd 定制的 [脚手架](http://scaffold.ant.design/)，欢迎进行试用和贡献。
|
||||
|
||||
## 按需加载
|
||||
|
||||
如果你在开发环境的控制台看到下面的提示，那么你可能使用了 `import { Button } from 'antd';` 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。
|
||||
|
||||
```
|
||||
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
|
||||
```
|
||||
|
||||
> 
|
||||
|
||||
可以通过以下的写法来按需加载组件。
|
||||
|
||||
```jsx
|
||||
import Button from 'antd/lib/button';
|
||||
import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 加载 css 文件
|
||||
```
|
||||
|
||||
如果你使用了 babel，那么可以使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 来进行按需加载，加入这个插件后。你可以仍然这么写：
|
||||
|
||||
```jsx
|
||||
import { Button } from 'antd';
|
||||
```
|
||||
|
||||
插件会帮你转换成 `antd/lib/xxx` 的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-import#usage) 属性可以做到模块样式的按需自动加载。
|
||||
|
||||
> 注意，babel-plugin-import 的 `style` 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 `import 'antd/dist/antd.css` 手动引入，并覆盖全局样式。
|
||||
|
||||
## 配置主题和字体
|
||||
|
||||
- [改变主题](/docs/react/customize-theme)
|
||||
- [使用本地字体](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)
|
||||
|
||||
## 小贴士
|
||||
|
||||
- 你可以享用 `npm` 生态圈里的所有模块。
|
||||
- 我们使用了 `babel`，试试用 [ES2015+](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) 的写法来提升编码的愉悦感。
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
|
||||
# Internationalization
|
||||
|
||||
The default language is English as of yet.
|
||||
If you want to use other languages, you can follow the instructions below.
|
||||
|
||||
## LocaleProvider
|
||||
|
||||
vue-antd-ui provides a React Component [LocaleProvider](/ant-design/components/locale-provider) for configuring vue-antd-ui locale text globally.
|
||||
|
||||
````html
|
||||
<template>
|
||||
<a-locale-provider :locale="locale">
|
||||
<App />
|
||||
</a-locale-provider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zhCN from 'vue-antd-ui/lib/locale-provider/zh_CN';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
locale: zhCN,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
````
|
||||
|
||||
Note: `fr_FR` is the filename, follow below.
|
||||
|
||||
Supported languages:
|
||||
|
||||
|Language|Filename|
|
||||
|---|---|
|
||||
|Arabic|ar_EG|
|
||||
|Bulgarian|bg_BG|
|
||||
|Catalan|ca_ES|
|
||||
|Czech|cs_CZ|
|
||||
|German|de_DE|
|
||||
|Greek|el_GR|
|
||||
|English (Global)|en_GB|
|
||||
|English|en_US|
|
||||
|Spanish|es_ES|
|
||||
|Estonian|et_EE|
|
||||
|Persian|fa_IR|
|
||||
|Finnish|fi_FI|
|
||||
|French (Belgium)|fr_BE|
|
||||
|French (France)|fr_FR|
|
||||
|Italian|it_IT|
|
||||
|Icelandic|is_IS|
|
||||
|Japanese|ja_JP|
|
||||
|Korean|ko_KR|
|
||||
|Norwegian|nb_NO|
|
||||
|Dutch (Belgium)|nl_BE|
|
||||
|Dutch|nl_NL|
|
||||
|Polish|pl_PL|
|
||||
|Portuguese (Brazil)|pt_BR|
|
||||
|Portuguese|pt_PT|
|
||||
|Slovak|sk_SK|
|
||||
|Serbian|sr_RS|
|
||||
|Slovenian|sl_SI|
|
||||
|Swedish|sv_SE|
|
||||
|Thai|th_TH|
|
||||
|Turkish|tr_TR|
|
||||
|Russian|ru_RU|
|
||||
|Ukrainian|uk_UA|
|
||||
|Vietnamese|vi_VN|
|
||||
|Chinese (Simplified)|zh_CN|
|
||||
|Chinese (Traditional)|zh_TW|
|
||||
|
||||
See usage and ways to contribute a new locale package at [LocaleProvider](/ant-design/components/locale-provider).
|
||||
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
|
||||
# 国际化
|
||||
|
||||
`vue-antd-ui` 目前的默认文案是英文，如果需要使用其他语言，可以参考下面的方案。
|
||||
|
||||
## LocaleProvider
|
||||
|
||||
vue-antd-ui 提供了一个 Vue 组件 [LocaleProvider](/ant-design/components/locale-provider-cn) 用于全局配置国际化文案。
|
||||
|
||||
````html
|
||||
<template>
|
||||
<a-locale-provider :locale="locale">
|
||||
<App />
|
||||
</a-locale-provider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zhCN from 'vue-antd-ui/lib/locale-provider/zh_CN';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
locale: zhCN,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
````
|
||||
|
||||
注意：`zh_CN` 是文件名，以下表格也遵循同样的规则。
|
||||
|
||||
目前支持以下语言：
|
||||
|
||||
|语言|文件名|
|
||||
|---|---|
|
||||
|阿拉伯|ar_EG|
|
||||
|保加利亚语|bg_BG|
|
||||
|加泰罗尼亚语|ca_ES|
|
||||
|捷克语|cs_CZ|
|
||||
|德语|de_DE|
|
||||
|希腊语|el_GR|
|
||||
|英语|en_GB|
|
||||
|英语（美式）|en_US|
|
||||
|西班牙语|es_ES|
|
||||
|爱沙尼亚语|et_EE|
|
||||
|波斯语|fa_IR|
|
||||
|芬兰语|fi_FI|
|
||||
|法语（比利时）|fr_BE|
|
||||
|法语|fr_FR|
|
||||
|冰岛语|is_IS|
|
||||
|意大利语|it_IT|
|
||||
|日语|ja_JP|
|
||||
|韩语/朝鲜语|ko_KR|
|
||||
|挪威|nb_NO|
|
||||
|荷兰语（比利时）|nl_BE|
|
||||
|荷兰语|nl_NL|
|
||||
|波兰语|pl_PL|
|
||||
|葡萄牙语(巴西)|pt_BR|
|
||||
|葡萄牙语|pt_PT|
|
||||
|斯洛伐克语|sk_SK|
|
||||
|塞尔维亚|sr_RS|
|
||||
|斯洛文尼亚|sl_SI|
|
||||
|瑞典语|sv_SE|
|
||||
|泰语|th_TH|
|
||||
|土耳其语|tr_TR|
|
||||
|俄罗斯语|ru_RU|
|
||||
|乌克兰语|uk_UA|
|
||||
|越南语|vi_VN|
|
||||
|简体中文|zh_CN|
|
||||
|繁体中文|zh_TW|
|
||||
|
||||
具体的使用方法和新语言包贡献方式请参考 [LocaleProvider 文档](/ant-design/components/locale-provider-cn)。
|
||||
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
|
||||
# Ant Design of Vue
|
||||
|
||||
Following the Ant Design specification, we developed a Vue UI library `antd` that contains a set of high quality components and demos for building rich, interactive user interfaces.
|
||||
|
||||
<div class="pic-plus">
|
||||
<img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
|
||||
<span>+</span>
|
||||
<img width="160" src="https://cn.vuejs.org/images/logo.png">
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.pic-plus > * {
|
||||
display: inline-block !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.pic-plus span {
|
||||
font-size: 30px;
|
||||
color: #aaa;
|
||||
margin: 0 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
- An enterprise-class UI design language for web applications.
|
||||
- A set of high-quality React components out of the box.
|
||||
- Shared [Ant Design of React](https://ant.design/docs/spec/introduce) design resources.
|
||||
|
||||
## Environment Support
|
||||
|
||||
* Modern browsers and Internet Explorer 9+ (with [polyfills](https://vuecomponent.github.io/ant-design/docs/react/getting-started-cn#兼容性))
|
||||
* Server-side Rendering
|
||||
|
||||
## Version
|
||||
|
||||
- Stable: [](https://www.npmjs.org/package/vue-antd-ui)
|
||||
|
||||
You can subscribe to this feed for new version notifications: https://github.com/vueComponent/ant-design/releases.atom
|
||||
|
||||
## Installation
|
||||
|
||||
### Using npm or yarn
|
||||
|
||||
**We recommend using npm or yarn to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
|
||||
|
||||
```bash
|
||||
$ npm install vue-antd-ui --save
|
||||
```
|
||||
|
||||
```bash
|
||||
$ yarn add vue-antd-ui
|
||||
```
|
||||
|
||||
If you are in a bad network environment，you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
|
||||
|
||||
### Import in Browser
|
||||
|
||||
Add `script` and `link` tags in your browser and use the global variable `antd`.
|
||||
|
||||
We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `vue-antd-ui/dist` in antd's npm package. You can also download these files directly from [](https://www.jsdelivr.com/package/npm/vue-antd-ui) or [unpkg](https://unpkg.com/vue-antd-ui/dist/).
|
||||
|
||||
> **We strongly discourage loading the entire files** this will add bloat to your application and make it more difficult to receive bugfixes and updates. Antd is intended to be used in conjunction with a build tool, such as [webpack](https://webpack.github.io/), which will make it easy to import only the parts of antd that you are using.
|
||||
|
||||
> Note: you should import moment before using antd.js.
|
||||
|
||||
## Usage
|
||||
|
||||
```jsx
|
||||
import Vue from 'vue'
|
||||
import { DatePicker } from 'vue-antd-ui';
|
||||
Vue.component(DatePicker.name, DatePicker)
|
||||
```
|
||||
|
||||
And import stylesheets manually:
|
||||
|
||||
```jsx
|
||||
import 'vue-antd-ui/dist/antd.css'; // or 'vue-antd-ui/dist/antd.less'
|
||||
```
|
||||
|
||||
### Use modularized antd
|
||||
|
||||
- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
|
||||
|
||||
```js
|
||||
// .babelrc or babel-loader option
|
||||
{
|
||||
"plugins": [
|
||||
["import", { "libraryName": "vue-antd-ui", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
> Note: Don't set `libraryDirectory` if you are using webpack 1.
|
||||
|
||||
This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets.
|
||||
|
||||
```jsx
|
||||
// import js and css modularly, parsed by babel-plugin-import
|
||||
import { DatePicker } from 'vue-antd-ui';
|
||||
```
|
||||
|
||||
- Manually import
|
||||
|
||||
```jsx
|
||||
import DatePicker from 'vue-antd-ui/lib/date-picker'; // for js
|
||||
import 'vue-antd-ui/lib/date-picker/style/css'; // for css
|
||||
// import 'vue-antd-ui/lib/date-picker/style'; // that will import less
|
||||
```
|
||||
|
||||
|
||||
## Links
|
||||
|
||||
- [Home Page](https://vuecomponent.github.io/ant-design/)
|
||||
- [Ant Design React](https://ant.design/)
|
||||
- [Components](https://vuecomponent.github.io/ant-design/docs/react/introduce)
|
||||
- [Change Log](/ant-design/changelog)
|
||||
- [CodeSandbox template](https://codesandbox.io/s/2wpk21kzvr) for bug reports
|
||||
- [Customize Theme](/ant-design/docs/vue/customize-theme)
|
||||
|
||||
|
||||
|
||||
## Contributing
|
||||
|
||||
|
||||
If you'd like to help us improve antd, just create a [Pull Request](https://github.com/vueComponent/ant-design/pulls). Feel free to report bugs and issues [here](https://github.com/vueComponent/ant-design/issues).
|
||||
|
||||
> If you're new to posting issues, we ask that you read [*How To Ask Questions The Smart Way*](http://www.catb.org/~esr/faqs/smart-questions.html) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html) prior to posting. Well written bug reports help us help you!
|
||||
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
|
||||
# Ant Design of Vue
|
||||
|
||||
这里是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。
|
||||
|
||||
<div class="pic-plus">
|
||||
<img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
|
||||
<span>+</span>
|
||||
<img width="160" src="https://cn.vuejs.org/images/logo.png">
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.pic-plus > * {
|
||||
display: inline-block !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.pic-plus span {
|
||||
font-size: 30px;
|
||||
color: #aaa;
|
||||
margin: 0 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
## 特性
|
||||
|
||||
- 提炼自企业级中后台产品的交互语言和视觉风格。
|
||||
- 开箱即用的高质量 Vue 组件。
|
||||
- 共享[Ant Design of React](http://ant-design.gitee.io/docs/spec/introduce-cn)设计工具体系。
|
||||
|
||||
## 支持环境
|
||||
|
||||
* 现代浏览器和 IE9 及以上（需要 [polyfills](https://vuecomponent.github.io/ant-design/docs/react/getting-started-cn#兼容性)）。
|
||||
* 支持服务端渲染。
|
||||
|
||||
## 版本
|
||||
|
||||
- 稳定版：[](https://www.npmjs.org/package/vue-antd-ui)
|
||||
|
||||
你可以订阅：https://github.com/vueComponent/ant-design/releases.atom 来获得稳定版发布的通知。
|
||||
|
||||
## 安装
|
||||
|
||||
### 使用 npm 或 yarn 安装
|
||||
|
||||
**我们推荐使用 npm 或 yarn 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
|
||||
|
||||
```bash
|
||||
$ npm install vue-antd-ui --save
|
||||
```
|
||||
|
||||
```bash
|
||||
$ yarn add vue-antd-ui
|
||||
```
|
||||
|
||||
如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
|
||||
|
||||
### 浏览器引入
|
||||
|
||||
在浏览器中使用 `script` 和 `link` 标签直接引入文件，并使用全局变量 `antd`。
|
||||
|
||||
我们在 npm 发布包内的 `vue-antd-ui/dist` 目录下提供了 `antd.js` `antd.css` 以及 `antd.min.js` `antd.min.css`。你也可以通过 [](https://www.jsdelivr.com/package/npm/vue-antd-ui)
|
||||
或 [UNPKG](https://unpkg.com/vue-antd-ui/dist/) 进行下载。
|
||||
|
||||
> **强烈不推荐使用已构建文件**，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。
|
||||
|
||||
> 注意：引入 antd.js 前你需要自行引入 [moment](http://momentjs.com/)。
|
||||
|
||||
## 示例
|
||||
|
||||
```jsx
|
||||
import Vue from 'vue'
|
||||
import { DatePicker } from 'vue-antd-ui';
|
||||
Vue.component(DatePicker.name, DatePicker)
|
||||
```
|
||||
|
||||
引入样式：
|
||||
|
||||
```jsx
|
||||
import 'vue-antd-ui/dist/antd.css'; // or 'vue-antd-ui/dist/antd.less'
|
||||
```
|
||||
|
||||
### 按需加载
|
||||
|
||||
下面两种方式都可以只加载用到的组件。
|
||||
|
||||
- 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)（推荐）。
|
||||
|
||||
```js
|
||||
// .babelrc or babel-loader option
|
||||
{
|
||||
"plugins": [
|
||||
["import", { "libraryName": "vue-antd-ui", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
> 注意：webpack 1 无需设置 `libraryDirectory`。
|
||||
|
||||
然后只需从 vue-antd-ui 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。
|
||||
|
||||
```jsx
|
||||
// babel-plugin-import 会帮助你加载 JS 和 CSS
|
||||
import { DatePicker } from 'vue-antd-ui';
|
||||
```
|
||||
|
||||
- 手动引入
|
||||
|
||||
```jsx
|
||||
import DatePicker from 'vue-antd-ui/lib/date-picker'; // 加载 JS
|
||||
import 'vue-antd-ui/lib/date-picker/style/css'; // 加载 CSS
|
||||
// import 'vue-antd-ui/lib/date-picker/style'; // 加载 LESS
|
||||
```
|
||||
|
||||
## 链接
|
||||
|
||||
- [首页](https://vuecomponent.github.io/ant-design/)
|
||||
- [Ant Design React](https://ant.design/)
|
||||
- [组件库](https://vuecomponent.github.io/ant-design/docs/react/introduce-cn)
|
||||
- [更新日志](/ant-design/changelog-cn)
|
||||
- [CodeSandbox 模板](https://codesandbox.io/s/2wpk21kzvr) for bug reports
|
||||
- [定制主题](/ant-design/docs/vue/customize-theme-cn)
|
||||
|
||||
|
||||
## 如何贡献
|
||||
|
||||
如果你希望参与贡献，欢迎 [Pull Request](https://github.com/vueComponent/ant-design/pulls)，或给我们 [报告 Bug](https://github.com/vueComponent/ant-design/issues)。
|
||||
|
||||
> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。
|
||||
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
|
||||
# Use in create-react-app
|
||||
|
||||
[create-react-app](https://github.com/facebookincubator/create-react-app) is one of the best React application development tools. We are going to use `antd` within it and modify the webpack config for some customized needs.
|
||||
|
||||
---
|
||||
|
||||
## Install and Initialization
|
||||
|
||||
We need to install `create-react-app` first, you may need install [yarn](https://github.com/yarnpkg/yarn/) too.
|
||||
|
||||
```bash
|
||||
$ npm install -g create-react-app yarn
|
||||
```
|
||||
|
||||
Create a new project named `antd-demo`.
|
||||
|
||||
```bash
|
||||
$ create-react-app antd-demo
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
Then we go inside `antd-demo` and start it.
|
||||
|
||||
```bash
|
||||
$ cd antd-demo
|
||||
$ yarn start
|
||||
```
|
||||
|
||||
Open the browser at http://localhost:3000/. It renders a header saying "Welcome to React" on the page.
|
||||
|
||||
## Import antd
|
||||
|
||||
Below is the default directory structure.
|
||||
|
||||
```
|
||||
├── README.md
|
||||
├── package.json
|
||||
├── public
|
||||
│ ├── favicon.ico
|
||||
│ └── index.html
|
||||
├── src
|
||||
│ ├── App.css
|
||||
│ ├── App.js
|
||||
│ ├── App.test.js
|
||||
│ ├── index.css
|
||||
│ ├── index.js
|
||||
│ └── logo.svg
|
||||
└── yarn.lock
|
||||
```
|
||||
|
||||
Now we install `antd` from yarn or npm.
|
||||
|
||||
```bash
|
||||
$ yarn add antd
|
||||
```
|
||||
|
||||
Modify `src/App.js`, import Button component from `antd`.
|
||||
|
||||
```jsx
|
||||
import React, { Component } from 'react';
|
||||
import Button from 'antd/lib/button';
|
||||
import './App.css';
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
Add `antd/dist/antd.css` at the top of `src/App.css`.
|
||||
|
||||
```css
|
||||
@import '~antd/dist/antd.css';
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
Ok, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at its [User Guide ](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
|
||||
|
||||
|
||||
## Advanced Guides
|
||||
|
||||
We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo.
|
||||
For instance, we actually import all styles of components in the project which may be a network performance issue.
|
||||
|
||||
Now we need to customize the default webpack config. We can achieve that by using [react-app-rewired](https://github.com/timarney/react-app-rewired) which is one of create-react-app's custom config solutions.
|
||||
|
||||
Import react-app-rewired and modify the `scripts` field in package.json.
|
||||
|
||||
```
|
||||
$ yarn add react-app-rewired --dev
|
||||
```
|
||||
|
||||
```diff
|
||||
/* package.json */
|
||||
"scripts": {
|
||||
- "start": "react-scripts start",
|
||||
+ "start": "react-app-rewired start",
|
||||
- "build": "react-scripts build",
|
||||
+ "build": "react-app-rewired build",
|
||||
- "test": "react-scripts test --env=jsdom",
|
||||
+ "test": "react-app-rewired test --env=jsdom",
|
||||
}
|
||||
```
|
||||
|
||||
Then create a `config-overrides.js` at root directory of your project for further overriding.
|
||||
|
||||
```js
|
||||
module.exports = function override(config, env) {
|
||||
// do stuff with the webpack config...
|
||||
return config;
|
||||
};
|
||||
```
|
||||
|
||||
### Use babel-plugin-import
|
||||
|
||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/docs/react/getting-started#Import-on-Demand)). We are now trying to install it and modify `config-overrides.js`.
|
||||
|
||||
```bash
|
||||
$ yarn add babel-plugin-import --dev
|
||||
```
|
||||
|
||||
```diff
|
||||
+ const { injectBabelPlugin } = require('react-app-rewired');
|
||||
|
||||
module.exports = function override(config, env) {
|
||||
+ config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
|
||||
return config;
|
||||
};
|
||||
```
|
||||
|
||||
Remove the `@import '~antd/dist/antd.css';` statement added before because `babel-plugin-import` will import styles and import components like below:
|
||||
|
||||
```diff
|
||||
// src/App.js
|
||||
import React, { Component } from 'react';
|
||||
- import Button from 'antd/lib/button';
|
||||
+ import { Button } from 'antd';
|
||||
import './App.css';
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
Then reboot with `yarn start` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/docs/react/getting-started#Import-on-Demand).
|
||||
|
||||
### Customize Theme
|
||||
|
||||
According to the [Customize Theme documentation](/docs/react/customize-theme), to customize the theme, we need to modify `less` variables with tools such as [less-loader](https://github.com/webpack/less-loader). We can also use [react-app-rewire-less](http://npmjs.com/react-app-rewire-less) to achieve this. Import it and modify `config-overrides.js` like below.
|
||||
|
||||
```bash
|
||||
$ yarn add react-app-rewire-less --dev
|
||||
```
|
||||
|
||||
```diff
|
||||
const { injectBabelPlugin } = require('react-app-rewired');
|
||||
+ const rewireLess = require('react-app-rewire-less');
|
||||
|
||||
module.exports = function override(config, env) {
|
||||
- config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
|
||||
+ config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config); // change importing css to less
|
||||
+ config = rewireLess.withLoaderOptions({
|
||||
+ modifyVars: { "@primary-color": "#1DA57A" },
|
||||
+ })(config, env);
|
||||
return config;
|
||||
};
|
||||
```
|
||||
|
||||
We use `modifyVars` option of [less-loader](https://github.com/webpack/less-loader#less-options) here, you can see a green button rendered on the page after rebooting the start server.
|
||||
|
||||
## eject
|
||||
|
||||
You can also could try [yarn run eject](https://github.com/facebookincubator/create-react-app#converting-to-a-custom-setup) for a custom setup of create-react-app, although you should dig into it by yourself.
|
||||
|
||||
## Source code and other boilerplates
|
||||
|
||||
Finally, we used antd with create-react-app successfully, you can learn these practices for your own webpack workflow too, and find more webpack configs in the [atool-build](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js). (For instance, add [moment noParse](https://github.com/ant-tool/atool-build/blob/e4bd2959689b6a95cb5c1c854a5db8c98676bdb3/src/getWebpackCommonConfig.js#L90) to avoid loading all language files.)
|
||||
|
||||
There are a lot of great boilerplates like create-react-app in the React community. There are some source code samples of importing antd in them if you encounter some problems.
|
||||
|
||||
- [create-react-app-antd](https://github.com/ant-design/create-react-app-antd)
|
||||
- [comerc/cra-ts-antd](https://github.com/comerc/cra-ts-antd)
|
||||
- [react-boilerplate/react-boilerplate](https://github.com/ant-design/react-boilerplate)
|
||||
- [kriasoft/react-starter-kit](https://github.com/ant-design/react-starter-kit)
|
||||
- [next.js](https://github.com/zeit/next.js/tree/master/examples/with-ant-design)
|
||||
- [nwb](https://github.com/insin/nwb-examples/tree/master/react-app-antd)
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
|
||||
# 在 create-react-app 中使用
|
||||
|
||||
[create-react-app](https://github.com/facebookincubator/create-react-app) 是业界最优秀的 React 应用开发工具之一，本文会尝试在 create-react-app 创建的工程中使用 antd 组件，并自定义 webpack 的配置以满足各类工程化需求。
|
||||
|
||||
|
||||
## 安装和初始化
|
||||
|
||||
我们需要在命令行中安装 create-react-app 工具，你可能还需要安装 [yarn](https://github.com/yarnpkg/yarn/)。
|
||||
|
||||
```bash
|
||||
$ npm install -g create-react-app yarn
|
||||
```
|
||||
|
||||
然后新建一个项目。
|
||||
|
||||
```bash
|
||||
$ create-react-app antd-demo
|
||||
```
|
||||
|
||||
工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
|
||||
|
||||
然后我们进入项目并启动。
|
||||
|
||||
```bash
|
||||
$ cd antd-demo
|
||||
$ yarn start
|
||||
```
|
||||
|
||||
此时浏览器会访问 http://localhost:3000/ ，看到 `Welcome to React` 的界面就算成功了。
|
||||
|
||||
## 引入 antd
|
||||
|
||||
这是 create-react-app 生成的默认目录结构。
|
||||
|
||||
```
|
||||
├── README.md
|
||||
├── package.json
|
||||
├── public
|
||||
│ ├── favicon.ico
|
||||
│ └── index.html
|
||||
├── src
|
||||
│ ├── App.css
|
||||
│ ├── App.js
|
||||
│ ├── App.test.js
|
||||
│ ├── index.css
|
||||
│ ├── index.js
|
||||
│ └── logo.svg
|
||||
└── yarn.lock
|
||||
```
|
||||
|
||||
现在从 yarn 或 npm 安装并引入 antd。
|
||||
|
||||
```bash
|
||||
$ yarn add antd
|
||||
```
|
||||
|
||||
修改 `src/App.js`，引入 antd 的按钮组件。
|
||||
|
||||
```jsx
|
||||
import React, { Component } from 'react';
|
||||
import Button from 'antd/lib/button';
|
||||
import './App.css';
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
修改 `src/App.css`，在文件顶部引入 `antd/dist/antd.css`。
|
||||
|
||||
```css
|
||||
@import '~antd/dist/antd.css';
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的[官方文档](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md)。
|
||||
|
||||
## 高级配置
|
||||
|
||||
我们现在已经把组件成功运行起来了，但是在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。
|
||||
|
||||
此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 [react-app-rewired](https://github.com/timarney/react-app-rewired) （一个对 create-react-app 进行自定义配置的社区解决方案）。
|
||||
|
||||
引入 react-app-rewired 并修改 package.json 里的启动配置。
|
||||
|
||||
```
|
||||
$ yarn add react-app-rewired --dev
|
||||
```
|
||||
|
||||
```diff
|
||||
/* package.json */
|
||||
"scripts": {
|
||||
- "start": "react-scripts start",
|
||||
+ "start": "react-app-rewired start",
|
||||
- "build": "react-scripts build",
|
||||
+ "build": "react-app-rewired build",
|
||||
- "test": "react-scripts test --env=jsdom",
|
||||
+ "test": "react-app-rewired test --env=jsdom",
|
||||
}
|
||||
```
|
||||
|
||||
然后在项目根目录创建一个 `config-overrides.js` 用于修改默认配置。
|
||||
|
||||
```js
|
||||
module.exports = function override(config, env) {
|
||||
// do stuff with the webpack config...
|
||||
return config;
|
||||
};
|
||||
```
|
||||
|
||||
### 使用 babel-plugin-import
|
||||
|
||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/docs/react/getting-started#按需加载)），现在我们尝试安装它并修改 `config-overrides.js` 文件。
|
||||
|
||||
```bash
|
||||
$ yarn add babel-plugin-import --dev
|
||||
```
|
||||
|
||||
```diff
|
||||
+ const { injectBabelPlugin } = require('react-app-rewired');
|
||||
|
||||
module.exports = function override(config, env) {
|
||||
+ config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
|
||||
return config;
|
||||
};
|
||||
```
|
||||
|
||||
然后移除前面在 `src/App.css` 里全量添加的 `@import '~antd/dist/antd.css';` 样式代码，并且按下面的格式引入模块。
|
||||
|
||||
```diff
|
||||
// src/App.js
|
||||
import React, { Component } from 'react';
|
||||
- import Button from 'antd/lib/button';
|
||||
+ import { Button } from 'antd';
|
||||
import './App.css';
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
最后重启 `yarn start` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/docs/react/getting-started#按需加载)。
|
||||
|
||||
### 自定义主题
|
||||
|
||||
按照 [配置主题](/docs/react/customize-theme) 的要求，自定义主题需要用到 less 变量覆盖功能。我们可以引入 react-app-rewire 的 less 插件 [react-app-rewire-less](http://npmjs.com/react-app-rewire-less) 来帮助加载 less 样式，同时修改 `config-overrides.js` 文件。
|
||||
|
||||
```bash
|
||||
$ yarn add react-app-rewire-less --dev
|
||||
```
|
||||
|
||||
```diff
|
||||
const { injectBabelPlugin } = require('react-app-rewired');
|
||||
+ const rewireLess = require('react-app-rewire-less');
|
||||
|
||||
module.exports = function override(config, env) {
|
||||
- config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
|
||||
+ config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
|
||||
+ config = rewireLess.withLoaderOptions({
|
||||
+ modifyVars: { "@primary-color": "#1DA57A" },
|
||||
+ })(config, env);
|
||||
return config;
|
||||
};
|
||||
```
|
||||
|
||||
这里利用了 [less-loader](https://github.com/webpack/less-loader#less-options) 的 `modifyVars` 来进行主题配置，
|
||||
变量和其他配置方式可以参考 [配置主题](/docs/react/customize-theme) 文档。
|
||||
|
||||
修改后重启 `yarn start`，如果看到一个绿色的按钮就说明配置成功了。
|
||||
|
||||
## eject
|
||||
|
||||
你也可以使用 create-react-app 提供的 [yarn run eject](https://github.com/facebookincubator/create-react-app#converting-to-a-custom-setup) 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索，不在本文讨论范围内。
|
||||
|
||||
## 源码和其他脚手架
|
||||
|
||||
以上是在 create-react-app 中使用 antd 的相关实践，你也可以借鉴此文的做法在自己的 webpack 工作流中使用 antd，更多 webpack 配置可参考 [atool-build](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js)。（例如加入 [moment noParse](https://github.com/ant-tool/atool-build/blob/e4bd2959689b6a95cb5c1c854a5db8c98676bdb3/src/getWebpackCommonConfig.js#L90) 避免加载所有语言文件）
|
||||
|
||||
React 生态圈中还有很多优秀的脚手架，使用它们并引入 antd 时，你可能会遇到一些问题，下面是一些著名脚手架使用 antd 的范例，包括本文的 create-react-app。
|
||||
|
||||
- [react-boilerplate/react-boilerplate](https://github.com/ant-design/react-boilerplate)
|
||||
- [kriasoft/react-starter-kit](https://github.com/ant-design/react-starter-kit)
|
||||
- [create-react-app-antd](https://github.com/ant-design/create-react-app-antd)
|
||||
- [cra-ts-antd](https://github.com/comerc/cra-ts-antd)
|
||||
- [next.js](https://github.com/zeit/next.js/tree/master/examples/with-ant-design)
|
||||
- [nwb](https://github.com/insin/nwb-examples/tree/master/react-app-antd)
|
||||
|
|
@ -63,7 +63,7 @@ export default {
|
|||
const { name } = this.$route.params
|
||||
const isCN = isZhCN(name)
|
||||
const lang = isCN ? 'cn' : 'us'
|
||||
// name = name.replace('-cn', '')
|
||||
// name = name.replace(/-cn\/?$/, '')
|
||||
const titleMap = {}
|
||||
const menuConfig = {
|
||||
General: [],
|
||||
|
|
@ -81,7 +81,7 @@ export default {
|
|||
menuConfig[type] = menuConfig[type] || []
|
||||
menuConfig[type].push(d)
|
||||
}
|
||||
const Demo = AllDemo[titleMap[name.replace('-cn', '')]]
|
||||
const Demo = AllDemo[titleMap[name.replace(/-cn\/?$/, '')]]
|
||||
const MenuGroup = []
|
||||
for (const [type, menus] of Object.entries(menuConfig)) {
|
||||
const MenuItems = []
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export default {
|
|||
`not have usTitle`,
|
||||
)
|
||||
}
|
||||
const id = ['components', name.replace('-cn', ''), 'demo', ...usTitle.split(' ')].join('-').toLowerCase()
|
||||
const id = ['components', name.replace(/-cn\/?$/, ''), 'demo', ...usTitle.split(' ')].join('-').toLowerCase()
|
||||
|
||||
if (this._store.store) {
|
||||
const { currentSubMenu } = this._store.store.getState()
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { isZhCN } from '../util'
|
|||
export default {
|
||||
props: {
|
||||
num: Number,
|
||||
name: String,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -10,22 +11,24 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
const { name } = this.$route.params
|
||||
const newName = isZhCN(name) ? name.replace('-cn', '') : `${name}-cn`
|
||||
const name = this.name
|
||||
const path = this.$route.path
|
||||
const newName = isZhCN(name) ? name.replace(/-cn\/?$/, '') : `${name}-cn`
|
||||
this.$router.push({
|
||||
path: `/ant-design/components/${newName}/`,
|
||||
path: path.replace(name, newName),
|
||||
})
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const { name } = this.$route.params
|
||||
const name = this.name
|
||||
|
||||
const isCN = isZhCN(name)
|
||||
return (
|
||||
<header id='header'>
|
||||
<a-row>
|
||||
<a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
|
||||
<router-link to={{ path: '/ant-design' }} id='logo'>
|
||||
<img alt='logo' style="height: 32px" src='https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png' />
|
||||
<img alt='logo' height='32' src='https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png' />
|
||||
<span> VUE-ANTD</span>
|
||||
</router-link>
|
||||
</a-col>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,164 @@
|
|||
<script>
|
||||
import * as AllDemo from '../demo'
|
||||
import Header from './header'
|
||||
import zhCN from 'antd/locale-provider/zh_CN'
|
||||
import enUS from 'antd/locale-provider/default'
|
||||
import _ from 'lodash'
|
||||
import { isZhCN } from '../util'
|
||||
import { Provider, create } from '../../components/_util/store'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
name: String,
|
||||
},
|
||||
data () {
|
||||
this.store = create({
|
||||
currentSubMenu: [],
|
||||
})
|
||||
this.subscribe()
|
||||
return {
|
||||
currentSubMenu: [],
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route': function () {
|
||||
this.store.setState({ currentSubMenu: [] })
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
subscribe () {
|
||||
const { store } = this
|
||||
this.unsubscribe = store.subscribe(() => {
|
||||
this.currentSubMenu = this.store.getState().currentSubMenu
|
||||
})
|
||||
},
|
||||
getSubMenu (isCN) {
|
||||
const currentSubMenu = this.currentSubMenu
|
||||
const lis = []
|
||||
currentSubMenu.forEach(({ cnTitle, usTitle, id }) => {
|
||||
const title = isCN ? cnTitle : usTitle
|
||||
const className = window.location.hash === `#${id}` ? 'current' : ''
|
||||
lis.push(<li title={title}><a href={`#${id}`} class={className}>{title}</a></li>)
|
||||
})
|
||||
return (
|
||||
<a-affix>
|
||||
<ul id='demo-toc' class='toc'>
|
||||
{lis}
|
||||
<li title='API' key='API'>
|
||||
<a
|
||||
href='#api'
|
||||
class={{
|
||||
current: window.location.hash === '#api',
|
||||
}}
|
||||
>API</a>
|
||||
</li>
|
||||
</ul>
|
||||
</a-affix>
|
||||
)
|
||||
},
|
||||
getDocsMenu (isCN) {
|
||||
const docs = [
|
||||
{ key: 'introduce', enTitle: 'Ant Design of Vue', title: 'Ant Design of Vue' },
|
||||
{ key: 'getting-started', enTitle: 'Getting Started', title: '快速上手' },
|
||||
{ key: 'use-with-vue-cli', enTitle: 'Use in vue-cli', title: '在 vue-cli 中使用' },
|
||||
{ key: 'customize-theme', enTitle: 'Customize Theme', title: '定制主题' },
|
||||
{ key: 'i18n', enTitle: 'Internationalization', title: '国际化' },
|
||||
]
|
||||
const docsMenu = []
|
||||
docs.forEach(({ key, enTitle, title }) => {
|
||||
const k = isCN ? `${key}-cn` : key
|
||||
docsMenu.push(<a-menu-item key={k}>
|
||||
<router-link to={`/ant-design/docs/${k}/`}>{isCN ? enTitle : title}</router-link>
|
||||
</a-menu-item>)
|
||||
})
|
||||
return docsMenu
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const name = this.name
|
||||
const isCN = isZhCN(name)
|
||||
// name = name.replace(/-cn\/?$/, '')
|
||||
const titleMap = {}
|
||||
const menuConfig = {
|
||||
General: [],
|
||||
Layout: [],
|
||||
Navigation: [],
|
||||
'Data Entry': [],
|
||||
'Data Display': [],
|
||||
Feedback: [],
|
||||
Other: [],
|
||||
}
|
||||
for (const [title, d] of Object.entries(AllDemo)) {
|
||||
const type = d.type || 'Other'
|
||||
const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
|
||||
titleMap[key] = title
|
||||
menuConfig[type] = menuConfig[type] || []
|
||||
menuConfig[type].push(d)
|
||||
}
|
||||
const Demo = AllDemo[titleMap[name.replace(/-cn\/?$/, '')]]
|
||||
const MenuGroup = []
|
||||
for (const [type, menus] of Object.entries(menuConfig)) {
|
||||
const MenuItems = []
|
||||
_.sortBy(menus, ['title']).forEach(({ title, subtitle }) => {
|
||||
const linkValue = isCN
|
||||
? [<span>{title}</span>, <span class='chinese'>{subtitle}</span>]
|
||||
: [<span>{title}</span>]
|
||||
let key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
|
||||
if (isCN) {
|
||||
key = `${key}-cn`
|
||||
}
|
||||
MenuItems.push(<a-menu-item key={key}>
|
||||
<router-link to={`/ant-design/components/${key}/`}>{linkValue}</router-link>
|
||||
</a-menu-item>)
|
||||
})
|
||||
MenuGroup.push(<a-menu-item-group title={type}>{MenuItems}</a-menu-item-group>)
|
||||
}
|
||||
let locale = zhCN
|
||||
if (!isCN) {
|
||||
locale = enUS
|
||||
}
|
||||
return (
|
||||
<div class='page-wrapper'>
|
||||
<Header num={Object.keys(AllDemo).length} name={name}/>
|
||||
<a-locale-provider locale={locale}>
|
||||
<div class='main-wrapper'>
|
||||
<a-row>
|
||||
<a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
|
||||
<a-menu
|
||||
class='aside-container menu-site'
|
||||
selectedKeys={[name]}
|
||||
defaultOpenKeys={['Components']}
|
||||
inlineIndent={40}
|
||||
mode='inline'>
|
||||
{this.getDocsMenu(isCN)}
|
||||
<a-sub-menu title='Components' key='Components'>
|
||||
{MenuGroup}
|
||||
</a-sub-menu>
|
||||
</a-menu>
|
||||
</a-col>
|
||||
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
|
||||
<div class='content main-container'>
|
||||
<div class='toc-affix' style='width: 110px;'>
|
||||
{Demo ? this.getSubMenu(isCN) : ''}
|
||||
</div>
|
||||
{Demo ? <Provider store={this.store}>
|
||||
<Demo key={isCN ? 'cn' : 'en'}/>
|
||||
</Provider> : ''}
|
||||
<div class='markdown api-container'>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-locale-provider>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,12 +1,65 @@
|
|||
import Demo from './components/demo.vue'
|
||||
const AsyncComp = () => {
|
||||
import Layout from './components/layout.vue'
|
||||
|
||||
const AsyncTestComp = () => {
|
||||
const d = window.location.hash.replace('#', '')
|
||||
return {
|
||||
component: import(`../components/transfer/demo/${d}`),
|
||||
}
|
||||
}
|
||||
|
||||
export default [
|
||||
{ path: '/:prefix?/components/:name/', component: Demo },
|
||||
{ path: '/:prefix?/test/:demo?/', component: AsyncComp },
|
||||
{ path: '/*', redirect: '/ant-design/components/button/' },
|
||||
{ path: '/ant-design/components/:name/', component: Layout, props: true },
|
||||
{
|
||||
path: '/ant-design',
|
||||
component: Layout,
|
||||
props: (route) => {
|
||||
const name = route.path.split('/docs/')[1].split('/')[0]
|
||||
return { name }
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'docs/customize-theme',
|
||||
component: () => import('../docs/vue/customize-theme.en-US.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/customize-theme-cn',
|
||||
component: () => import('../docs/vue/customize-theme.zh-CN.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/getting-started',
|
||||
component: () => import('../docs/vue/getting-started.en-US.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/getting-started-cn',
|
||||
component: () => import('../docs/vue/getting-started.zh-CN.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/i18n',
|
||||
component: () => import('../docs/vue/i18n.en-US.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/i18n-cn',
|
||||
component: () => import('../docs/vue/i18n.zh-CN.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/introduce',
|
||||
component: () => import('../docs/vue/introduce.en-US.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/introduce-cn',
|
||||
component: () => import('../docs/vue/introduce.zh-CN.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/use-with-vue-cli',
|
||||
component: () => import('../docs/vue/use-with-vue-cli.en-US.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/use-with-vue-cli-cn',
|
||||
component: () => import('../docs/vue/use-with-vue-cli.zh-CN.md'),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{ path: '/:prefix?/test/:demo?/', component: AsyncTestComp },
|
||||
{ path: '/*', redirect: '/ant-design/docs/introduce/' },
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue