Ant Design 常用命令汇总

最新推荐文章于 2023-08-17 14:52:49 发布

weixin_30908941

最新推荐文章于 2023-08-17 14:52:49 发布

阅读量350

点赞数

文章标签： javascript git ui ViewUI

原文链接：http://www.cnblogs.com/cube/p/8431522.html

版权

Ant Design React

安装

1. 安装脚手架工具#

antd-init 是一个用于演示 antd 如何使用的脚手架工具，真实项目建议使用 dva-cli。

$ npm install antd-init -g

更多功能请参考脚手架工具和开发工具文档。

除了官方提供的脚手架，您也可以使用社区提供的脚手架和范例：

antd-admin

reactSPA

react-redux-antd by Justin-lu

react-redux-antd by okoala

react-antd-admin

react-antd-redux-router-starter

react-redux-antd-starter

更多脚手架可以查看脚手架市场

2. 创建一个项目#

使用命令行进行初始化。

$ 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 组件。

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 查看效果。

$ npm start

5. 构建和部署#

$ npm run build

入口文件会构建到 dist 目录中，你可以自由部署到不同环境中进行引用。

Ant Design Pro安装#

有两种方式进行安装：

直接 clone git 仓库#

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project

使用命令行工具#

你可以使用集成化的命令行工具 ant-design-pro-cli。

$ npm install ant-design-pro-cli -g
$ mkdir my-project && cd my-project $ pro new # 安装脚手架

目录结构#

我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

├── mock                     # 本地模拟数据
├── public
│   └── favicon.ico          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── common               # 应用公用配置，如导航信息
│   ├── components           # 业务通用组件 │ ├── e2e # 集成测试用例 │ ├── layouts # 通用布局 │ ├── models # dva model │ ├── routes # 业务页面入口和常用模板 │ ├── services # 后台接口服务 │ ├── utils # 工具库 │ ├── g2.js # 可视化图形配置 │ ├── theme.js # 主题配置 │ ├── index.ejs # HTML 入口模板 │ ├── index.js # 应用入口 │ ├── index.less # 全局样式 │ └── router.js # 路由入口 ├── tests # 测试工具 ├── README.md └── package.json

本地开发#

安装依赖。

$ npm install

如果网络状况不佳，可以使用 cnpm 进行加速。

$ npm start

启动完成后会自动打开浏览器访问 http://localhost:8000，你看到下面的页面就代表成功了。

1. 创建一个项目#

可以是已有项目，或者是使用 dva / create-react(-native)-app 新创建的空项目，你也可以从官方示例脚手架里拷贝并修改

参考更多官方示例集或者你可以利用 React 生态圈中的各种脚手架

2. 安装#

$ npm install antd-mobile --save

3. 使用#

Web 使用方式

React Native 使用方式

入口页面 (html 或模板) 相关设置：

引入 FastClick 并且设置 html meta (更多参考 #576)

引入 Promise 的 fallback 支持 (部分安卓手机不支持 Promise)

<!DOCTYPE html>
<html> <head> <!-- set `maximum-scale` for some compatibility issues --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script> <script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } if(!window.Promise) { document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>'); } </script> </head> <body></body> </html>

组件使用实例：

import { Button } from 'antd-mobile'; ReactDOM.render(<Button>Start</Button>, mountNode);

引入样式：

import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'

按需加载#

注意：强烈推荐使用。

下面两种方式都可以只加载用到的组件，选择其中一种方式即可。

使用 babel-plugin-import（推荐）。

// .babelrc or babel-loader option
{
  "plugins": [ ["import", { libraryName: "antd-mobile", style: "css" }] // `style: true` 会加载 less 文件 ] }

然后只需从 antd-mobile 引入模块即可，无需单独引入样式。

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd-mobile';

手动引入

import DatePicker from 'antd-mobile/lib/date-picker';  // 加载 JS import 'antd-mobile/lib/date-picker/style/css'; // 加载 CSS // import 'antd-mobile/lib/date-picker/style'; // 加载 LESS

更多增强 (非必须):#

如何自定义主题？见此文档，基于 antd-mobile 的自定义 UI 库：web-custom-ui / web-custom-ui-pro

转载于:https://www.cnblogs.com/cube/p/8431522.html

weixin_30908941

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ant Design 常用命令汇总

Ant Design React安装1. 安装脚手架工具#antd-init是一个用于演示 antd 如何使用的脚手架工具，真实项目建议使用dva-cli。$ npm install antd-init -g更多功能请参考脚手架工具和开发工具文档。除了官方提供的脚手架，您也可以使用社区提供的脚手架和范例：antd-adminreact...
复制链接

扫一扫