idea使用ant design, create-react-app的使用前端

下载安装node npm
进入node 选择Windows 安装包 (.msi) 64bit 下载安装
使用msi会配置好环境变量path，方便
所有命令，基本都是在项目路径下，或者直接在idea的terminal里

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

全局安装create-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(, document.getElementById('root')); 上面添加import import { DatePicker, Button ,Pagination } from 'antd'; import 'antd/dist/antd.css'; 文件末尾，添加渲染 ReactDOM.render(, document.getElementById('root2')); ReactDOM.render( , document.getElementById('root3')); ReactDOM.render(, document.getElementById('root4'));

//public/index.html 下面多加几个

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

文章图片

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

按需加载// https://github.com/ant-design/babel-plugin-import npm installbabel-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项目