您好,欢迎来到二三四教育网。
搜索
您的当前位置:首页[FE] Hello Ant Design

[FE] Hello Ant Design

来源:二三四教育网

1. 环境搭建:

(1)安装node.js

(2)更换npm为淘宝的源

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

(3)安装webpack,babel和脚手架工具

$ sudo cnpm install -g webpack babel-cli antd-init

(4)创建一个项目并初始化

$ mkdir antd-demo && cd antd-demo
$ antd-init
$ cnpm install

(5)开发调试

$ cnpm run dev

(6)构建和部署

$ cnpm run build

2. 目录文件结构:

(1)index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" href="./index.css"/>
    <!--[if lt IE 10]>
    <script 
    <![endif]-->
</head>
<body>
<div id="react-content"></div>
</body>
<script src="./common.js"></script>
<script src="./index.js"></script>
</html>

(2)entry/index.jsx

import '../common/lib';
import App from '../component/App';
import ReactDOM from 'react-dom';
import React from 'react';

ReactDOM.render(<App />, document.getElementById('react-content'));

(3)component/App.jsx

import React, { Component } from 'react';
import { DatePicker } from 'antd';
import './App.less';

class App extends Component {
  render() {
    return <DatePicker />;
  }
}

export default App;

Copyright © 2019- how234.cn 版权所有 赣ICP备2023008801号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务