参考文章： Antd Design官方文档
初级配置
创建新应用
$ mkdir demo //创建空目录
$ cd demo
$ yarn create react-app antd-demo //用yarn初始化一个脚手架并安装各种必要依赖
$ cd antd-demo //进入项目
$ yarn start //启动项目
此时浏览器会访问http://localhost:3000/ 看到界面就算成功了
引入 antd
$ yarn add antd //从yarn安装并引入 antd
- 修改 src/App.js 引入 antd 的按钮组件
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 在文件顶部引入 antd/dist/antd.css
@import '~antd/dist/antd.css';
.App {
text-align: center;
}
看到页面中显示一个按钮即为成功
在我自己按照流程走的时候出现的问题：
在创建typescript的时候，出现button没有被定义的报错
控制台报错
可能是由于版本号导致这样的问题，所以通过修改版本号来解决（若以及修改版本号之后问题还没有解决，就将node_modules删除重新下载）
"@types/react": "16.8.8", //将 package.json 中的这个版本号改成这样
$ npm install --save // 若改完版本号问题没解决 就重新下载node_modules
自动生成的项目目录以及文件解析：
- node_modules: 项目依赖包目录；
- public：公共目录，该目录下的文件都不会被webpack进行加载、解析、打包；通过npm run build进行打包时该项目下的所有文件将会直接被复制到build目录下；
- favicon.ico：是网站图标（可替换删除）
- index.html：页面模版，webpack打包后将输出文件引入到该模版内；index.html中通过环境变量 %PUBLIC_URL% 来指向public目录路径
- manifest.json：PWA将应用添加至桌面的功能的实现依赖与 manifest.json。 通过该文件可以对图标、名称等信息进行配置。
- src：是源码目录（该目录下除了 index.js、registerServiceWorker.js 文件具有一定的意义其余文件都是演示使用，可直接删除）
- index.js：是整个项目的入口文件
- registerServiceWorker.js：service worker 是在后台运行的一个线程，可以用来处理离线缓存、消息推送、后台自动更新等任务； registerServiceWorker就是为react项目注册了一个service worker，用来做资源的缓存，这样你下次访问时，就可以更快的获取资源。而且因为资源被缓存，所以即使在离线的情况下也可以访问应用（此时使用的资源是之前缓存的资源）。注意，registerServiceWorker注册的 service worker 只在生产环境中生效，并且该功能只在https下才能有效果
- .gitignore：该文件是 github 过滤文件配置
- README.md：该文件是github项目描述文件
- package.json：定义了项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等数据）。部分依赖模块被隐藏
- yarn.lock：每次通过yarm添加依赖或者更新包版本时 yarn 都会把相关版本信息写入 yarn.lock文件，npm同理
高级配置
需要引入 react-app-rewired 是为了在不暴露配置的情况下修改 webpack配置
引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x版本的关系，需要还需要安装 customize-cra。
$ yarn add react-app-rewired customize-cra
/* 修改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",
+ "test": "react-app-rewired test",
}
然后在项目的根目录创建一个 config-overrides.js 用于修改默认配置
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
使用bable-plugin-import
babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。
$ yarn add babel-plugin-import
+ const { override, fixBabelImports } = require('customize-cra');
- module.exports = function override(config, env) {
- // do stuff with the webpack config...
- return config;
- };
+ module.exports = override(
+ fixBabelImports('import', {
+ libraryName: 'antd',
+ libraryDirectory: 'es',
+ style: 'css',
+ }),
+ );
然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 样式代码，并且按下面的格式引入模块
然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 样式代码，并且按下面的格式引入模块
至此 搭建基本结束
网友评论