forked from alibaba-fusion/next
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
206 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,10 +9,93 @@ | |
[![Build Status](https://travis-ci.com/alibaba-fusion/next.svg?token=KAYresHL1UPaaLzUYyx6&branch=master)](https://travis-ci.com/alibaba-fusion/next) | ||
[![codecov](https://codecov.io/gh/alibaba-fusion/next/branch/master/graph/badge.svg?token=FSufKVDhmT)](https://codecov.io/gh/alibaba-fusion/next) | ||
|
||
- [Quick Start](./site/en-us/quick-start.md) | ||
# Quick Start | ||
|
||
## Install | ||
|
||
### 1.Use NPM ( Recommend ) | ||
|
||
``` | ||
npm install @alifd/next --save | ||
``` | ||
|
||
### 2.Import in Browser | ||
|
||
Use the script and link tags in the browser to directly import the file and use the global variable Next. We provide files such as next.js/next.min.js and next.css/next.min.css in the `@alifd/next/dist` directory in the npm package, or via [unpkg](https:/ /unpkg.com/@alifd/next/dist/) Download it. | ||
|
||
``` html | ||
<link rel="stylesheet" href="https://unpkg.com/@alifd/next/dist/next.css"> | ||
|
||
<script src="https://unpkg.com/@alifd/next/dist/next.js"></script> | ||
|
||
// The above ways import latest @alifd/next, we recommend you specify version. | ||
<script src="https://unpkg.com/@alifd/[email protected]/dist/next.min.js"></script> | ||
|
||
// Or import as your own static resource | ||
<script src="../build/public/@alifd/next.js"></script> | ||
``` | ||
|
||
## Dependencies | ||
|
||
* `@alifd/next` is based on `react@16` development and is currently not compatible with versions below `react@16`. react/react-dom is used as peerDependencies, which requires the user to manually install or import it. | ||
* `@alifd/next` use [moment](https://github.com/moment/moment) library to implement date-time related component. moment is also used as peerDependencies, which requires the user to manually install or import it. | ||
|
||
## Import | ||
|
||
### Import All | ||
|
||
|
||
``` js | ||
import '@alifd/next/dist/next.css'; | ||
// import '@alifd/next/index.scss'; | ||
|
||
import { Button, Input } from '@alifd/next'; | ||
``` | ||
|
||
### Import module with plugin | ||
|
||
|
||
#### 1. Import module manually | ||
|
||
``` js | ||
import Button from '@alifd/next/lib/button'; | ||
import '@alifd/next/lib/button/style'; | ||
``` | ||
|
||
#### 2. Use with [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) ( Recommend ) | ||
|
||
``` js | ||
// webpack babel loader option or .babelrc | ||
{ | ||
// ... | ||
plugins: [ | ||
['babel-plugin-import', { | ||
libraryName: '@alifd/next', | ||
style: true | ||
}] | ||
] | ||
} | ||
``` | ||
|
||
It will transform code as below | ||
|
||
``` js | ||
import { Button } from '@alifd/next'; | ||
``` | ||
|
||
To | ||
|
||
``` js | ||
import Button from '@alifd/next/lib/button'; | ||
import '@alifd/next/lib/button/style'; | ||
``` | ||
|
||
## Advanced | ||
- [Use with Theme Package](./site/en-us/theme.md) | ||
- [Internationalization](./site/en-us/i18n.md) | ||
- [Deploy Font File](./site/en-us/font-deploy.md) | ||
|
||
## Contributing | ||
- [Contributing](./site/en-us/contributing.md) | ||
|
||
## Join Group | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,10 +9,96 @@ | |
[![Build Status](https://travis-ci.com/alibaba-fusion/next.svg?token=KAYresHL1UPaaLzUYyx6&branch=master)](https://travis-ci.com/alibaba-fusion/next) | ||
[![codecov](https://codecov.io/gh/alibaba-fusion/next/branch/master/graph/badge.svg?token=FSufKVDhmT)](https://codecov.io/gh/alibaba-fusion/next) | ||
|
||
- [快速开始](./site/zh-cn/quick-start.md) | ||
# 快速开始 | ||
|
||
## 安装 | ||
|
||
### 1.使用 npm 安装(推荐) | ||
|
||
``` | ||
npm install @alifd/next --save | ||
``` | ||
|
||
### 2.浏览器直接引用 | ||
|
||
在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 Next。我们在 npm 包中提供了 `@alifd/next/dist` 目录下的 next.js/next.min.js 和 next.css/next.min.css 等文件,也可以通过 [unpkg](https://unpkg.com/@alifd/next/dist/) 进行下载。 | ||
|
||
``` html | ||
<link rel="stylesheet" href="https://unpkg.com/@alifd/next/dist/next.css"> | ||
|
||
<script src="https://unpkg.com/@alifd/next/dist/next.js"></script> | ||
|
||
// 以上引入都是引入的最新版本 @alifd/next ,但我们推荐引入固定版本的next组件,以保证代码稳定 | ||
<script src="https://unpkg.com/@alifd/[email protected]/dist/next.min.js"></script> | ||
|
||
// 或作为自己的静态资源引入 | ||
<script src="../build/public/@alifd/next.js"></script> | ||
``` | ||
|
||
## 依赖 | ||
|
||
* `@alifd/next` 基于 `react@16` 开发,目前并不兼容 `react@16` 以下的版本,且将 react/react-dom 作为 peerDependencies,需要用户手动提前安装或引入。 | ||
* `@alifd/next` 在处理日期时间相关组件逻辑时,使用了 [moment](https://github.com/moment/moment) 库,且将 moment 作为 peerDependencies,需要用户手动提前安装或引入。 | ||
|
||
## 引入 | ||
|
||
### 全量引入 | ||
|
||
|
||
``` js | ||
import '@alifd/next/dist/next.css'; | ||
// import '@alifd/next/index.scss'; | ||
|
||
import { Button, Input } from '@alifd/next'; | ||
``` | ||
|
||
### 按需引入 | ||
|
||
|
||
#### 1.手动引入 | ||
|
||
``` js | ||
import Button from '@alifd/next/lib/button'; | ||
import '@alifd/next/lib/button/style'; | ||
``` | ||
|
||
#### 2.使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐) | ||
|
||
但大多数人更习惯的写法如下: | ||
|
||
``` js | ||
import { Button } from '@alifd/next'; | ||
``` | ||
|
||
通过 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 插件,可以将上述代码转化为类似下面的代码: | ||
|
||
``` js | ||
import Button from '@alifd/next/lib/button'; | ||
import '@alifd/next/lib/button/style'; | ||
``` | ||
|
||
babel配置: | ||
``` js | ||
// webpack babel loader option or .babelrc | ||
{ | ||
// ... | ||
plugins: [ | ||
['babel-plugin-import', { | ||
libraryName: '@alifd/next', | ||
style: true | ||
}] | ||
] | ||
} | ||
``` | ||
|
||
|
||
|
||
## 高级用法 | ||
- [使用主题包](./site/zh-cn/theme.md) | ||
- [国际化](./site/zh-cn/i18n.md) | ||
- [字体文件私有化部署](./site/zh-cn/font-deploy.md) | ||
|
||
## 贡献代码 | ||
- [贡献代码](./site/zh-cn/contributing.md) | ||
|
||
## 加入社区 | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters