antd 试水

简介: antd 试水

1.安装


sudo cnpm install antd --save
sudo cnpm install antd-init -g


2.创建


mkdir  antdtest && cd antdtest
antd-init


3.替换内容


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 ? 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 && this.state.date.toString()}</div>
        </div>
      </LocaleProvider>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));


4.启动


一键启动调试,访问 http://127.0.0.1:8000看效果。5


$ npm start


5.构建和部署


$ npm run build


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


上述例子用于帮助你理解 Ant Design React 的使用流程,并非真实的开发过程,你可以根据自己的项目开发流程进行接入。

 

备注:

完全走了一遍流程。


目录
相关文章
|
5月前
|
JavaScript API
再不学vue3就没有人要你了!速来围观vue3
这篇技术文章介绍了作者从最初对学习 Vue3 抵触到最终决定投入学习的心路历程,展示了 Vue3 相较于 Vue2 的诸多改进和新特性,如更优的性能、更小的代码体积及更佳的 TypeScript 支持。文章重点阐述了 Vue3 中 createApp 的使用变化、emits 机制、多事件处理、Fragment 的引入等重要功能升级。此外,还深入探讨了 Composition API 和 Options API 的区别,强调 Composition API 在代码组织和逻辑复用方面的优势,并给出了在不同项目规模中选择合适 API 的建议。
129 0
|
6月前
|
JavaScript 前端开发 开发者
决战前端之巅!Element UI与Vuetify谁才是Vue.js组件界的霸主?一场关于颜值与实力的较量!
【8月更文挑战第30天】本文对比了两款热门的Vue.js组件库——Element UI与Vuetify。Element UI由饿了么团队打造,提供多种高质量UI组件,设计简洁大方。Vuetify基于Material Design规范,支持Vue.js 2.0及3.0版本,具备前瞻性。两者均涵盖表单、导航、数据展示等组件,Element UI配置选项丰富,而Vuetify则提供了更深层的样式定制功能。开发者可根据项目需求及个人偏好选择合适的组件库。
483 0
|
JSON 前端开发 开发工具
Vue3 小兔鲜:项目起步
Vue3 小兔鲜:项目起步
310 0
|
存储 JavaScript
Vue3项目起步该做的二三事
Vue3项目起步该做的二三事
Vue3项目起步该做的二三事
|
JavaScript 前端开发 程序员
抱歉,久等了,基于Antd-Vue的VueAdminWorkA框架正式和大家开源见面了
抱歉,久等了,基于Antd-Vue的VueAdminWorkA框架正式和大家开源见面了
抱歉,久等了,基于Antd-Vue的VueAdminWorkA框架正式和大家开源见面了
|
JavaScript 前端开发 Go
【SolidJs】仅次于原生JS的超级性能!SolidJs框架教程【上】(1)
背景 今天被战友种草了一款前端框架,打开链接看文章,在各个指标的比较下,SolidJs脱颖而出,下面简单介绍一下这个框架,然后开始记录一下学习笔记。(Golang的事情暂时放一放,毕竟咱是专业前端「手动狗头」)。
496 0
|
JavaScript API
【SolidJs】仅次于原生JS的超级性能!SolidJs框架教程【中】
Children 在SolidJs中,如果在组件中写一些children,并非仅仅作为展示,而需要在子组件中处理children时,需要用到children函数。
409 0
|
前端开发 JavaScript 编译器
【SolidJs】仅次于原生JS的超级性能!SolidJs框架教程【上】(2)
背景 今天被战友种草了一款前端框架,打开链接看文章,在各个指标的比较下,SolidJs脱颖而出,下面简单介绍一下这个框架,然后开始记录一下学习笔记。(Golang的事情暂时放一放,毕竟咱是专业前端「手动狗头」)。
528 0
|
移动开发 前端开发 小程序
论如何搭上 antd 的快车-Form 篇
论如何搭上 antd 的快车-Form 篇
210 0
论如何搭上 antd 的快车-Form 篇
|
数据可视化 前端开发 开发工具
Umi UI 二期来了
Umi UI 二期来了
1575 0
Umi UI 二期来了

热门文章

最新文章