idea使用ant design, rcreate-react-app的使用

下载安装node npm
进入node 选择Windows 安装包 (.msi) 64bit 下载安装
使用msi会配置好环境变量path，方便

所有命令，基本都是在项目路径下，或者直接在idea的terminal里

//打开命令提示如测试安装是否成功
node -v
npm -v

全局安装rcreate-react-app yarn

npm install -g create-react-app yarn

//查看全局安装路径
npm root -g

创建项目工程

create-react-app antd-demo

完成后，使用idea打开antd-demo目录，可以在idea的terminal使用命令

//直接启动，因为create-react-app已经配置好了项目，看到react画面就好了，http://localhost:3000/
npm start

项目结构
rcreate-react-app

npm start启动后不要关闭（ctrl + c），直接写代码，直接页面自动刷新(修改public/index.html 的 title 试试)，生效

点击idea的terminal左侧+ ，新开一个命令窗口

//加入ant design
yarn add antd

src下是写react代码，public是页面文件

使用ant design

//  src/index.js
注释
// ReactDOM.render(<App />, document.getElementById('root'));

上面添加import
import { DatePicker, Button ,Pagination } from 'antd';
import 'antd/dist/antd.css';

文件末尾，添加渲染
ReactDOM.render(<DatePicker />, document.getElementById('root2'));
ReactDOM.render(
    <div>
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="danger">Danger</Button>
    </div>,
    document.getElementById('root3'));
ReactDOM.render(<Pagination defaultCurrent={1} total={50} />, document.getElementById('root4'));

//  public/index.html
<div id="root"></div>下面多加几个

<div id="root2"></div>
    <div id="root3"></div>
    <div id="root4"></div>

自动编译完成，看看效果

以后使用ant design 就是到 Ant Design, 找到需要的，然后点击右侧每个演示的右下角的 <> ,会在下面显示源代码

上面的import 是加入，下面主要替换mountNode，就是你要放入哪个dom节点

其他

按需加载

// https://github.com/ant-design/babel-plugin-import
npm install  babel-plugin-import

// .babelrc or babel-loader option  编辑器新建 .babelrc文件，libraryName: "antd-mobile"
{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 会加载 less 文件
    }]
  ]
}

手动引入
import DatePicker from 'antd/lib/date-picker';  // 加载 JS
import 'antd/lib/date-picker/style/css';        // 加载 CSS
// import 'antd/lib/date-picker/style';         // 加载 LESS

打包react项目

项目的build目录下
npm run build

静态服务器浏览build目录

npm install -g serve
serve -s build

rcreate-react-app创建的react脚手架项目里，npm start过程
npm看项目目录下的package.json，执行scripts节点下的命令

"start": "react-scripts start",
"build": "react-scripts build",

package.json  默认build后，加载是从/ 开始，加入下面，可以直接build后，浏览器访问

"homepage": ".",

idea使用ant design, rcreate-react-app的使用

猜你喜欢