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 前端开发 UED
【绝技大公开】Vue.js高手教你如何从零到英雄,构建梦幻电商平台前端!
【8月更文挑战第30天】本文通过对比传统网页开发方式,介绍了使用Vue.js及其生态构建电商平台前端的方法。从初始化项目到配置路由、状态管理,再到实现首页、商品列表与详情页,每个环节都提供了具体代码示例,展示了Vue.js在提升开发效率与应用可维护性方面的优势。适合希望了解现代前端技术栈的开发者阅读。通过本教程,读者可以学习到如何利用Vue Router、Vuex等工具搭建完整的Web应用。
66 0
|
5月前
|
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则提供了更深层的样式定制功能。开发者可根据项目需求及个人偏好选择合适的组件库。
399 0
|
5月前
|
JavaScript 前端开发 开发者
Vue.js的未来已来:掌握最新功能,驾驭前端开发的新浪潮!
【8月更文挑战第30天】Vue.js作为前端开发领域的明星框架,凭借其轻量级、响应式及组件化特性,深受全球开发者喜爱。它持续进化,引入新功能并优化性能,如提升渲染速度和减小打包体积,增强TypeScript支持,简化组件编写流程,进一步提升应用响应性和加载速度,改善开发者体验。活跃的社区和丰富的开源项目如“vuejs-challenges”推动其不断发展。未来,Vue.js将探索更多新特性,如宏和非虚拟DOM模式,巩固其在现代前端框架中的领先地位。
70 0
|
5月前
|
JavaScript 前端开发 应用服务中间件
Vue.js项目部署与优化:一场从本地到生产环境的华丽蜕变,见证你的应用如何凤凰涅槃,惊艳上线!
【8月更文挑战第30天】作为一名前端开发者,掌握从本地开发环境到生产环境的迁移至关重要。本文将带你了解如何使用 Vue.js 构建和打包应用,确保其在生产环境中流畅运行。首先,通过 `npm run build` 或 `yarn build` 命令生成生产环境文件;接着,配置服务器(如 Nginx)以支持静态文件服务;最后,通过代码分割、资源压缩、CDN 使用、服务端渲染及缓存策略等手段优化应用性能。跟随本文,你将学会如何让 Vue.js 应用在真实环境中表现优异,为用户提供流畅体验。
76 0
|
JSON 前端开发 开发工具
Vue3 小兔鲜:项目起步
Vue3 小兔鲜:项目起步
296 0
|
前端开发 大数据 API
详细剖析|袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路
在数栈过去的产品迭代中受限于当前组件的版本,积累了很多待解决的问题,随着新的功能需求不断增加,很多原先的组件以及交互设计需要进行优化。 2月,伴随着数栈 UI5.0 的焕新升级,数栈前端团队一起将组件框架 antd 从 v3.x 升级到了 v4.x,更新组件的 UI,提升产品的交互体验,使数栈产品能够更加灵活地适应未来产品功能迭代的需求。 本文将总结归纳袋鼠云数栈前端框架Antd 从3.x 升级到4.x 的相关步骤,及在这个过程中踩过的坑,解决的问题。
572 0
详细剖析|袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路
|
存储 JavaScript
Vue3项目起步该做的二三事
Vue3项目起步该做的二三事
Vue3项目起步该做的二三事
|
移动开发 前端开发 小程序
论如何搭上 antd 的快车-Form 篇
论如何搭上 antd 的快车-Form 篇
206 0
论如何搭上 antd 的快车-Form 篇
好客租房99-react路由基础总结
好客租房99-react路由基础总结
123 0
好客租房99-react路由基础总结
|
缓存 JavaScript 前端开发
《Vue入门》| 一记敲门砖,敲近你我它!
本文主要介绍 Vue 入门介绍
151 0

热门文章

最新文章