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

Z时代
2024-01-10
分类：综合

react

下载安装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

项目结构

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