【Javascript学习笔记】
目录
使用antdDesign
可参照antdDesign官网文档中的资料 ClickHere 》
yarn安装antdDesign
yarn add antd
安装成功:
yarn引入antdDesign
App.js:
import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
}
export default App;
src/App.css:
@import '~antd/dist/antd.css';
引用于学习笔记中的效果:
高级配置方便引用
引入 react-app-rewired 并修改 package.json 里的启动配置。
yarn add react-app-rewired --dev
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}
在项目根目录创建一个 config-overrides.js 用于修改默认配置
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
使用 babel-plugin-import
yarn add babel-plugin-import --dev
修改 config-overrides.js:
+ const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
+ config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
return config;
};
src/App.css 里全量添加的 @import ‘~antd/dist/antd.css’;
各模块代码改写参考
- import Button from 'antd/lib/button';
+ import { Button } from 'antd';
优化好了的评论功能
效果
源码下载
(github:KuanG97) 下载实战代码 ClickHere》
快捷链接
全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你,无限欢迎给我的github库点个收藏Star~0v 0~