tangjinzhou
parent
628a0f84b1
commit
15fd71224d
|
|
@ -4,7 +4,7 @@
|
|||
</a>
|
||||
</p>
|
||||
|
||||
# [Vue Ant Design](https://vuecomponent.github.io/ant-design/)
|
||||
# [Ant Design Vue](https://vuecomponent.github.io/ant-design/)
|
||||
[](https://travis-ci.org/vueComponent/ant-design)
|
||||
[](https://beta.gemnasium.com/projects/github.com/vueComponent/ant-design)
|
||||
[](https://www.npmjs.org/package/vue-antd-ui)
|
||||
|
|
|
|||
18
README.md
18
README.md
|
|
@ -4,7 +4,7 @@
|
|||
</a>
|
||||
</p>
|
||||
|
||||
# [Vue Ant Design](https://vuecomponent.github.io/ant-design/)
|
||||
# [Ant Design Vue](https://vuecomponent.github.io/ant-design/)
|
||||
[](https://travis-ci.org/vueComponent/ant-design)
|
||||
[](https://beta.gemnasium.com/projects/github.com/vueComponent/ant-design)
|
||||
[](https://www.npmjs.org/package/vue-antd-ui)
|
||||
|
|
@ -16,16 +16,16 @@ An enterprise-class UI components based on Ant Design 3.X and Vue.
|
|||
|
||||
[中文 README](README-zh_CN.md)
|
||||
|
||||
## 特性
|
||||
## Features
|
||||
|
||||
- An enterprise-class UI design system for desktop applications.
|
||||
- A set of high-quality React components out of the box.
|
||||
- The whole package of development and design resources and tools.
|
||||
- Shared [Ant Design of React](https://ant.design/docs/spec/introduce) design resources.
|
||||
|
||||
|
||||
## 安装
|
||||
## Using npm or yarn
|
||||
|
||||
### 使用 npm 或 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
|
||||
|
|
@ -35,12 +35,12 @@ $ npm install vue-antd-ui --save
|
|||
$ yarn add vue-antd-ui
|
||||
```
|
||||
|
||||
如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
|
||||
If you are in a bad network environment，you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
|
||||
|
||||
|
||||
## 链接
|
||||
## Links
|
||||
|
||||
- [首页](https://vuecomponent.github.io/ant-design/)
|
||||
- [Vue官方文档](https://cn.vuejs.org/)
|
||||
- [Home page](https://vuecomponent.github.io/ant-design/)
|
||||
- [Vue](https://vuejs.org/)
|
||||
- [Ant Design React](http://ant.design/)
|
||||
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@ function compile (modules) {
|
|||
return merge2([less, jsFilesStream, assets])
|
||||
}
|
||||
|
||||
gulp.task('dist', (done) => {
|
||||
gulp.task('dist', ['compile'], (done) => {
|
||||
dist(done)
|
||||
})
|
||||
gulp.task('compile', ['compile-with-es'], () => {
|
||||
|
|
|
|||
|
|
@ -1,123 +1,69 @@
|
|||
|
||||
# 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.
|
||||
Ant Design Vue 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.
|
||||
> Before delving into Ant Design Vue, a good knowledge base of [Vue](https://cn.vuejs.org/) 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)
|
||||
- [](https://codesandbox.io/s/2wpk21kzvr)
|
||||
|
||||
## 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.
|
||||
## Import vue-antd-ui
|
||||
|
||||
### 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.
|
||||
[vue-cli](https://github.com/vuejs/vue-cli)
|
||||
|
||||
```bash
|
||||
$ npm install antd-init -g
|
||||
$ npm install vue-cli -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
|
||||
$ vue init webpack antd-demo
|
||||
```
|
||||
|
||||
`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.
|
||||
```bash
|
||||
$ npm i --save vue-antd-ui
|
||||
```
|
||||
|
||||
```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';
|
||||
import Vue from 'vue'
|
||||
import { Button, message } from 'vue-antd-ui'
|
||||
import App from './App'
|
||||
|
||||
moment.locale('fr');
|
||||
Vue.config.productionTip = false
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Vue.component(Button.name, Button)
|
||||
Vue.prototype.$message = message
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
components: { App },
|
||||
template: '<App/>'
|
||||
})
|
||||
```
|
||||
|
||||
> All the components in antd are listed in the sidebar.
|
||||
|
||||
### 4. Development & Debugging
|
||||
### 4. Component list
|
||||
|
||||
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.
|
||||
[Component list](https://github.com/vueComponent/ant-design/blob/master/site/components.js)
|
||||
|
||||
## Compatibility
|
||||
|
||||
Ant Design React supports all the modern browsers and IE9+.
|
||||
Ant Design Vue 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.
|
||||
|
||||
|
|
@ -125,52 +71,10 @@ If you are using babel, we strongly recommend using [babel-polyfill](https://bab
|
|||
|
||||
> 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.
|
||||
If you see logs like below screenshot, you might be importing all components by writing `import { Button } from 'vue-antd-ui';`. 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.
|
||||
|
|
@ -181,26 +85,27 @@ You are using a whole package of antd, please use https://www.npmjs.com/package/
|
|||
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
|
||||
import Button from 'vue-antd-ui/lib/button';
|
||||
import 'vue-antd-ui/lib/button/style'; // or vue-antd-ui/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';
|
||||
import { Button } from 'vue-antd-ui';
|
||||
```
|
||||
|
||||
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.
|
||||
> 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 'vue-antd-ui/dist/antd.css'` and override the global reset styles.
|
||||
|
||||
## Customization
|
||||
|
||||
- [Customize Theme](/docs/react/customize-theme)
|
||||
- [Customize Theme](/ant-design/docs/vue/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.
|
||||
- Although Vue's official recommended template to write components, JSX is a better choice for complex components.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,123 +1,72 @@
|
|||
|
||||
# 快速上手
|
||||
|
||||
Ant Design React 致力于提供给程序员**愉悦**的开发体验。
|
||||
Ant Design Vue 致力于提供给程序员**愉悦**的开发体验。
|
||||
|
||||
> 在开始之前，推荐先学习 [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 框架作为你的第一步可能不是最好的主意。
|
||||
> 在开始之前，推荐先学习 [Vue](https://cn.vuejs.org/) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)，并正确安装和配置了 [Node.js](https://nodejs.org/) v6.5 或以上。
|
||||
> 官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 Vue 的正确开发方式。如果你刚开始学习前端或者 Vue，将 UI 框架作为你的第一步可能不是最好的主意。
|
||||
|
||||
## 在线演示
|
||||
|
||||
最简单的使用方式参照以下 CodeSandbox 演示，也推荐 Fork 本例来进行 `Bug Report`。
|
||||
|
||||
- [antd CodeSandbox](https://u.ant.design/codesandbox-repro)
|
||||
- [](https://codesandbox.io/s/2wpk21kzvr)
|
||||
|
||||
## 第一个本地实例
|
||||
|
||||
实际项目开发中，你会需要对 ES2015 和 JSX 代码的构建、调试、代理、打包部署等一系列工程化的需求。
|
||||
我们提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。
|
||||
## 引入vue-antd-ui
|
||||
|
||||
### 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) 进行搭建。
|
||||
[vue-cli](https://github.com/vuejs/vue-cli)
|
||||
|
||||
```bash
|
||||
$ npm install antd-init -g
|
||||
$ npm install vue-cli -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
|
||||
$ vue init webpack antd-demo
|
||||
```
|
||||
|
||||
antd-init 会自动安装 npm 依赖，若有问题则可自行安装。
|
||||
|
||||
若安装缓慢报错，可尝试用 `cnpm` 或别的镜像源自行安装：`rm -rf node_modules && cnpm install`。
|
||||
|
||||
### 3. 使用组件
|
||||
|
||||
脚手架会生成一个 Todo 应用实例（一个很有参考价值的 React 上手示例），先不管它，我们用来测试组件。
|
||||
|
||||
直接用下面的代码替换 `index.js` 的内容，用 React 的方式直接使用 antd 组件。
|
||||
```bash
|
||||
$ npm i --save vue-antd-ui
|
||||
```
|
||||
|
||||
```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';
|
||||
import Vue from 'vue'
|
||||
import { Button, message } from 'vue-antd-ui'
|
||||
import App from './App'
|
||||
|
||||
moment.locale('zh-cn');
|
||||
Vue.config.productionTip = false
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Vue.component(Button.name, Button)
|
||||
Vue.prototype.$message = message
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
components: { App },
|
||||
template: '<App/>'
|
||||
})
|
||||
```
|
||||
|
||||
> 你可以在左侧菜单选用更多组件。
|
||||
|
||||
### 4. 开发调试
|
||||
### 4. 组件列表
|
||||
|
||||
一键启动调试，访问 http://127.0.0.1:8000 查看效果。
|
||||
[完整组件列表](https://github.com/vueComponent/ant-design/blob/master/site/components.js)
|
||||
|
||||
```bash
|
||||
$ npm start
|
||||
```
|
||||
|
||||
### 5. 构建和部署
|
||||
|
||||
```bash
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。
|
||||
|
||||
> 上述例子用于帮助你理解 Ant Design React 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。
|
||||
|
||||
## 兼容性
|
||||
|
||||
Ant Design React 支持所有的现代浏览器和 IE9+。
|
||||
Ant Design Vue 支持所有的现代浏览器和 IE9+。
|
||||
|
||||
对于 IE 系列浏览器，需要提供 [es5-shim](https://github.com/es-shims/es5-shim) 和 [es6-shim](https://github.com/paulmillr/es6-shim) 等 Polyfills 的支持。
|
||||
|
||||
|
|
@ -125,51 +74,10 @@ Ant Design React 支持所有的现代浏览器和 IE9+。
|
|||
|
||||
> 避免同时使用 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 下所有的模块，这会影响应用的网络性能。
|
||||
如果你在开发环境的控制台看到下面的提示，那么你可能使用了 `import { Button } from 'vue-antd-ui';` 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。
|
||||
|
||||
```
|
||||
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
|
||||
|
|
@ -180,26 +88,26 @@ You are using a whole package of antd, please use https://www.npmjs.com/package/
|
|||
可以通过以下的写法来按需加载组件。
|
||||
|
||||
```jsx
|
||||
import Button from 'antd/lib/button';
|
||||
import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 加载 css 文件
|
||||
import Button from 'vue-antd-ui/lib/button';
|
||||
import 'vue-antd-ui/lib/button/style'; // 或者 vue-antd-ui/lib/button/style/css 加载 css 文件
|
||||
```
|
||||
|
||||
如果你使用了 babel，那么可以使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 来进行按需加载，加入这个插件后。你可以仍然这么写：
|
||||
|
||||
```jsx
|
||||
import { Button } from 'antd';
|
||||
import { Button } from 'vue-antd-ui';
|
||||
```
|
||||
|
||||
插件会帮你转换成 `antd/lib/xxx` 的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-import#usage) 属性可以做到模块样式的按需自动加载。
|
||||
插件会帮你转换成 `vue-antd-ui/lib/xxx` 的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-import#usage) 属性可以做到模块样式的按需自动加载。
|
||||
|
||||
> 注意，babel-plugin-import 的 `style` 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 `import 'antd/dist/antd.css` 手动引入，并覆盖全局样式。
|
||||
> 注意，babel-plugin-import 的 `style` 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 `import 'vue-antd-ui/dist/antd.css` 手动引入，并覆盖全局样式。
|
||||
|
||||
## 配置主题和字体
|
||||
|
||||
- [改变主题](/docs/react/customize-theme)
|
||||
- [改变主题](/ant-design/docs/vue/customize-theme-cn)
|
||||
- [使用本地字体](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) 的写法来提升编码的愉悦感。
|
||||
- 虽然Vue官方推荐模板编写组件，不过对于复杂组件，[jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx)未必不是一个更好的选择。
|
||||
|
|
|
|||
|
|
@ -56,6 +56,8 @@ $ 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).
|
||||
|
||||
> **Using the new features of vue, like `slot-scope`(2.5.0+), `provide / inject`(2.2.0+)**
|
||||
|
||||
### Import in Browser
|
||||
|
||||
Add `script` and `link` tags in your browser and use the global variable `antd`.
|
||||
|
|
@ -129,3 +131,6 @@ If you'd like to help us improve antd, just create a [Pull Request](https://gith
|
|||
|
||||
> 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!
|
||||
|
||||
## THANK YOU
|
||||
|
||||
[Ant Design Team](https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt)
|
||||
|
|
|
|||
|
|
@ -55,6 +55,8 @@ $ yarn add vue-antd-ui
|
|||
|
||||
如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
|
||||
|
||||
> **组件库使用了 vue 的新特性`slot-scope`(2.5.0新增), `provide / inject`(2.2.0新增)**
|
||||
|
||||
### 浏览器引入
|
||||
|
||||
在浏览器中使用 `script` 和 `link` 标签直接引入文件，并使用全局变量 `antd`。
|
||||
|
|
@ -128,3 +130,15 @@ import 'vue-antd-ui/dist/antd.css'; // or 'vue-antd-ui/dist/antd.less'
|
|||
|
||||
> 强烈推荐阅读 [《提问的智慧》](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)，更好的问题更容易获得帮助。
|
||||
|
||||
## 关于vue-antd-ui
|
||||
|
||||
众所周知，Ant Design作为一门设计语言面世，经历过多年的迭代和积累，它对UI的设计思想已经成为一套事实标准，受到众多前端开发者及企业的追捧和喜爱，也是React开发者手中的神兵利器。希望vue-antd-ui能够让Vue开发者也享受到Ant Design的优秀设计。
|
||||
|
||||
vue-antd-ui是Ant Design 3.X的Vue实现，该组件库目前以实现Ant Design React版80%以上的组件，组件的风格与Ant Design 3.4.0版本保持同步，组件的html结构和css样式也保持一致，真正做到了样式0修改，组件API也尽量保持了一致。
|
||||
|
||||
Ant Design Vue 致力于提供给程序员**愉悦**的开发体验。
|
||||
|
||||
## 特别感谢
|
||||
|
||||
[Ant Design Team](https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
|
||||
# Use in create-react-app
|
||||
# Use in vue-cli
|
||||
|
||||
[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.
|
||||
[vue-cli](https://github.com/vuejs/vue-cli) is one of the best Vue 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.
|
||||
We need to install `vue-cli` first, you may need install [yarn](https://github.com/yarnpkg/yarn/) too.
|
||||
|
||||
```bash
|
||||
$ npm install -g create-react-app yarn
|
||||
$ npm install -g vue-cli yarn
|
||||
```
|
||||
|
||||
Create a new project named `antd-demo`.
|
||||
|
||||
```bash
|
||||
$ create-react-app antd-demo
|
||||
$ vue init webpack antd-demo
|
||||
```
|
||||
|
||||
The tool will create and initialize environment and dependencies automatically,
|
||||
|
|
@ -26,10 +26,10 @@ Then we go inside `antd-demo` and start it.
|
|||
|
||||
```bash
|
||||
$ cd antd-demo
|
||||
$ yarn start
|
||||
$ npm run dev
|
||||
```
|
||||
|
||||
Open the browser at http://localhost:3000/. It renders a header saying "Welcome to React" on the page.
|
||||
Open the browser at http://localhost:8080/. It renders a header saying "Welcome to Your Vue.js App" on the page.
|
||||
|
||||
## Import antd
|
||||
|
||||
|
|
@ -38,58 +38,57 @@ Below is the default directory structure.
|
|||
```
|
||||
├── README.md
|
||||
├── package.json
|
||||
├── public
|
||||
│ ├── favicon.ico
|
||||
│ └── index.html
|
||||
├── index.html
|
||||
├── src
|
||||
│ ├── App.css
|
||||
│ ├── App.js
|
||||
│ ├── App.test.js
|
||||
│ ├── index.css
|
||||
│ ├── index.js
|
||||
│ └── logo.svg
|
||||
│ ├── assets
|
||||
│ │ └── logo.png
|
||||
│ ├── components
|
||||
│ │ └── HelloWorld.vue
|
||||
│ ├── App.vue
|
||||
│ └── main.js
|
||||
└── yarn.lock
|
||||
```
|
||||
|
||||
Now we install `antd` from yarn or npm.
|
||||
Now we install `vue-antd-ui` from yarn or npm.
|
||||
|
||||
```bash
|
||||
$ yarn add antd
|
||||
$ yarn add vue-antd-ui
|
||||
```
|
||||
|
||||
Modify `src/App.js`, import Button component from `antd`.
|
||||
Modify `src/main.js`, import Button component from `antd`.
|
||||
|
||||
```jsx
|
||||
import React, { Component } from 'react';
|
||||
import Button from 'antd/lib/button';
|
||||
import './App.css';
|
||||
import Vue from 'vue'
|
||||
import Button from 'vue-antd-ui/lib/button'
|
||||
import 'vue-antd-ui/dist/antd.css'
|
||||
import App from './App'
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Vue.component(Button.name, Button)
|
||||
|
||||
export default App;
|
||||
Vue.config.productionTip = false
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
components: { App },
|
||||
template: '<App/>'
|
||||
})
|
||||
```
|
||||
Modify `src/App.vue`。
|
||||
|
||||
Add `antd/dist/antd.css` at the top of `src/App.css`.
|
||||
|
||||
```css
|
||||
@import '~antd/dist/antd.css';
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
```jsx
|
||||
<template>
|
||||
<div id="app">
|
||||
<img src="./assets/logo.png">
|
||||
<a-button type="primary">Button></a-button>
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
...
|
||||
```
|
||||
|
||||
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).
|
||||
|
||||
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 `vue-cli` at its [User Guide ](https://github.com/vuejs/vue-cli/blob/master/README.md).
|
||||
|
||||
|
||||
## Advanced Guides
|
||||
|
|
@ -97,113 +96,62 @@ Ok, you should now see a blue primary button displayed on the page. Next you can
|
|||
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;
|
||||
};
|
||||
```
|
||||
Now we need to customize the default webpack 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`.
|
||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/ant-design/docs/vue/getting-started#Import-on-Demand)).
|
||||
|
||||
```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:
|
||||
Modify `.babelrc`.
|
||||
|
||||
```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>
|
||||
);
|
||||
}
|
||||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
||||
}
|
||||
}],
|
||||
"stage-2"
|
||||
],
|
||||
- "plugins": ["transform-vue-jsx", "transform-runtime"]
|
||||
+ "plugins": [
|
||||
+ "transform-vue-jsx",
|
||||
+ "transform-runtime",
|
||||
+ ["import", { "libraryName": "vue-antd-ui", "libraryDirectory": "es", "style": "css" }]
|
||||
+ ]
|
||||
}
|
||||
|
||||
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).
|
||||
Remove the `import 'vue-antd-ui/dist/antd.css';` statement added before because `babel-plugin-import` will import styles and import components like below:
|
||||
|
||||
```diff
|
||||
// src/main.js
|
||||
import Vue from 'vue'
|
||||
- import Button from 'vue-antd-ui/lib/button';
|
||||
+ import { Button } from 'vue-antd-ui';
|
||||
- import 'vue-antd-ui/dist/antd.css'
|
||||
import App from './App'
|
||||
|
||||
Vue.component(Button.name, Button)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
components: { App },
|
||||
template: '<App/>'
|
||||
})
|
||||
```
|
||||
|
||||
Then reboot with `npm run dev` 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](/ant-design/docs/vue/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)
|
||||
According to the [Customize Theme documentation](/ant-design/docs/vue/customize-theme), to customize the theme, we need to modify `less` variables with tools such as [less-loader](https://github.com/webpack/less-loader).
|
||||
|
|
|
|||
|
|
@ -1,208 +1,155 @@
|
|||
|
||||
# 在 create-react-app 中使用
|
||||
# 在 vue-cli 中使用
|
||||
|
||||
[create-react-app](https://github.com/facebookincubator/create-react-app) 是业界最优秀的 React 应用开发工具之一，本文会尝试在 create-react-app 创建的工程中使用 antd 组件，并自定义 webpack 的配置以满足各类工程化需求。
|
||||
[vue-cli](https://github.com/vuejs/vue-cli) 是业界最优秀的 Vue 应用开发工具之一，本文会尝试在 vue-cli 创建的工程中使用 antd 组件，并自定义 webpack 的配置以满足各类工程化需求。
|
||||
|
||||
|
||||
## 安装和初始化
|
||||
|
||||
我们需要在命令行中安装 create-react-app 工具，你可能还需要安装 [yarn](https://github.com/yarnpkg/yarn/)。
|
||||
我们需要在命令行中安装 vue-cli 工具，你可能还需要安装 [yarn](https://github.com/yarnpkg/yarn/)。
|
||||
|
||||
```bash
|
||||
$ npm install -g create-react-app yarn
|
||||
$ npm install -g vue-cli yarn
|
||||
```
|
||||
|
||||
然后新建一个项目。
|
||||
|
||||
```bash
|
||||
$ create-react-app antd-demo
|
||||
$ vue init webpack antd-demo
|
||||
```
|
||||
|
||||
工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
|
||||
工具会自动初始化一个脚手架并安装 Vue 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
|
||||
|
||||
然后我们进入项目并启动。
|
||||
|
||||
```bash
|
||||
$ cd antd-demo
|
||||
$ yarn start
|
||||
$ npm run dev
|
||||
```
|
||||
|
||||
此时浏览器会访问 http://localhost:3000/ ，看到 `Welcome to React` 的界面就算成功了。
|
||||
此时浏览器会访问 http://localhost:8080/ ，看到 `Welcome to Your Vue.js App` 的界面就算成功了。
|
||||
|
||||
## 引入 antd
|
||||
|
||||
这是 create-react-app 生成的默认目录结构。
|
||||
这是 vue-cli 生成的默认目录结构。
|
||||
|
||||
```
|
||||
├── README.md
|
||||
├── .babelrc
|
||||
├── package.json
|
||||
├── public
|
||||
│ ├── favicon.ico
|
||||
│ └── index.html
|
||||
├── index.html
|
||||
├── src
|
||||
│ ├── App.css
|
||||
│ ├── App.js
|
||||
│ ├── App.test.js
|
||||
│ ├── index.css
|
||||
│ ├── index.js
|
||||
│ └── logo.svg
|
||||
│ ├── assets
|
||||
│ │ └── logo.png
|
||||
│ ├── components
|
||||
│ │ └── HelloWorld.vue
|
||||
│ ├── App.vue
|
||||
│ └── main.js
|
||||
└── yarn.lock
|
||||
```
|
||||
|
||||
现在从 yarn 或 npm 安装并引入 antd。
|
||||
现在从 yarn 或 npm 安装并引入 vue-antd-ui。
|
||||
|
||||
```bash
|
||||
$ yarn add antd
|
||||
$ yarn add vue-antd-ui
|
||||
```
|
||||
|
||||
修改 `src/App.js`，引入 antd 的按钮组件。
|
||||
修改 `src/main.js`，引入 antd 的按钮组件以及全部样式文件。
|
||||
|
||||
```jsx
|
||||
import React, { Component } from 'react';
|
||||
import Button from 'antd/lib/button';
|
||||
import './App.css';
|
||||
import Vue from 'vue'
|
||||
import Button from 'vue-antd-ui/lib/button'
|
||||
import 'vue-antd-ui/dist/antd.css'
|
||||
import App from './App'
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Vue.component(Button.name, Button)
|
||||
|
||||
export default App;
|
||||
Vue.config.productionTip = false
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
components: { App },
|
||||
template: '<App/>'
|
||||
})
|
||||
```
|
||||
修改 `src/App.vue`的template内容。
|
||||
|
||||
修改 `src/App.css`，在文件顶部引入 `antd/dist/antd.css`。
|
||||
|
||||
```css
|
||||
@import '~antd/dist/antd.css';
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
```jsx
|
||||
<template>
|
||||
<div id="app">
|
||||
<img src="./assets/logo.png">
|
||||
<a-button type="primary">Button></a-button>
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
...
|
||||
```
|
||||
|
||||
好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的[官方文档](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md)。
|
||||
好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 vue-cli 的[官方文档](https://github.com/vuejs/vue-cli/blob/master/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;
|
||||
};
|
||||
```
|
||||
此时我们需要对 vue-cli 的默认配置进行自定义。
|
||||
|
||||
### 使用 babel-plugin-import
|
||||
|
||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/docs/react/getting-started#按需加载)），现在我们尝试安装它并修改 `config-overrides.js` 文件。
|
||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/ant-design/docs/vue/getting-started#按需加载)）。
|
||||
|
||||
```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';` 样式代码，并且按下面的格式引入模块。
|
||||
修改`.babelrc`文件，配置babel-plugin-import
|
||||
|
||||
```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>
|
||||
);
|
||||
}
|
||||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
||||
}
|
||||
}],
|
||||
"stage-2"
|
||||
],
|
||||
- "plugins": ["transform-vue-jsx", "transform-runtime"]
|
||||
+ "plugins": [
|
||||
+ "transform-vue-jsx",
|
||||
+ "transform-runtime",
|
||||
+ ["import", { "libraryName": "vue-antd-ui", "libraryDirectory": "es", "style": "css" }]
|
||||
+ ]
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
最后重启 `yarn start` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/docs/react/getting-started#按需加载)。
|
||||
|
||||
然后移除前面在 `src/main.js` 里全量添加的 `import 'vue-antd-ui/dist/antd.css';` 样式代码，并且按下面的格式引入模块。
|
||||
|
||||
```diff
|
||||
// src/main.js
|
||||
import Vue from 'vue'
|
||||
- import Button from 'vue-antd-ui/lib/button';
|
||||
+ import { Button } from 'vue-antd-ui';
|
||||
- import 'vue-antd-ui/dist/antd.css'
|
||||
import App from './App'
|
||||
|
||||
Vue.component(Button.name, Button)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
components: { App },
|
||||
template: '<App/>'
|
||||
})
|
||||
```
|
||||
|
||||
最后重启 `npm run dev` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/ant-design/docs/vue/getting-started-cn#按需加载)。
|
||||
|
||||
### 自定义主题
|
||||
|
||||
按照 [配置主题](/docs/react/customize-theme) 的要求，自定义主题需要用到 less 变量覆盖功能。我们可以引入 react-app-rewire 的 less 插件 [react-app-rewire-less](http://npmjs.com/react-app-rewire-less) 来帮助加载 less 样式，同时修改 `config-overrides.js` 文件。
|
||||
按照 [配置主题](/ant-design/docs/vue/customize-theme-cn) 的要求，自定义主题需要用到 less 变量覆盖功能。
|
||||
|
||||
```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)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "vue-antd-ui",
|
||||
"version": "0.1.1",
|
||||
"version": "0.2.1",
|
||||
"title": "Ant Design Vue",
|
||||
"description": "An enterprise-class UI design language and Vue-based implementation",
|
||||
"keywords": [
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ export default {
|
|||
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>
|
||||
<router-link to={`/ant-design/docs/vue/${k}/`}>{isCN ? title : enTitle }</router-link>
|
||||
</a-menu-item>)
|
||||
})
|
||||
return docsMenu
|
||||
|
|
|
|||
|
|
@ -13,54 +13,54 @@ export default [
|
|||
path: '/ant-design',
|
||||
component: Layout,
|
||||
props: (route) => {
|
||||
const name = route.path.split('/docs/')[1].split('/')[0]
|
||||
const name = route.path.split('/docs/vue/')[1].split('/')[0]
|
||||
return { name }
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'docs/customize-theme',
|
||||
path: 'docs/vue/customize-theme',
|
||||
component: () => import('../docs/vue/customize-theme.en-US.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/customize-theme-cn',
|
||||
path: 'docs/vue/customize-theme-cn',
|
||||
component: () => import('../docs/vue/customize-theme.zh-CN.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/getting-started',
|
||||
path: 'docs/vue/getting-started',
|
||||
component: () => import('../docs/vue/getting-started.en-US.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/getting-started-cn',
|
||||
path: 'docs/vue/getting-started-cn',
|
||||
component: () => import('../docs/vue/getting-started.zh-CN.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/i18n',
|
||||
path: 'docs/vue/i18n',
|
||||
component: () => import('../docs/vue/i18n.en-US.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/i18n-cn',
|
||||
path: 'docs/vue/i18n-cn',
|
||||
component: () => import('../docs/vue/i18n.zh-CN.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/introduce',
|
||||
path: 'docs/vue/introduce',
|
||||
component: () => import('../docs/vue/introduce.en-US.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/introduce-cn',
|
||||
path: 'docs/vue/introduce-cn',
|
||||
component: () => import('../docs/vue/introduce.zh-CN.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/use-with-vue-cli',
|
||||
path: 'docs/vue/use-with-vue-cli',
|
||||
component: () => import('../docs/vue/use-with-vue-cli.en-US.md'),
|
||||
},
|
||||
{
|
||||
path: 'docs/use-with-vue-cli-cn',
|
||||
path: 'docs/vue/use-with-vue-cli-cn',
|
||||
component: () => import('../docs/vue/use-with-vue-cli.zh-CN.md'),
|
||||
},
|
||||
{ path: '', redirect: '/ant-design/docs/introduce/' },
|
||||
{ path: '', redirect: '/ant-design/vue/docs/introduce/' },
|
||||
],
|
||||
},
|
||||
|
||||
{ path: '/:prefix?/test/:demo?/', component: AsyncTestComp },
|
||||
{ path: '/*', redirect: '/ant-design/docs/introduce/' },
|
||||
{ path: '/*', redirect: '/ant-design/docs/vue/introduce/' },
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue