创建使用AntDesign组件库的React项目步骤
1、使用create-react-app创建空的React项目。
npx create-react-app 项目名
2、安装使用scss预处理器的包。
yarn add sass -D
// npm add sass -D 另一种安装方法
3、安装配置基础路由包。
yarn add react-router-dom
// npm add react-router-dom 另一种安装方法
4、安装AntDesign组件库。
yarn add antd
// npm add antd 另一种安装方法
5、配置别名路径。
实现步骤:
1. 安装修改 CRA 配置的包:`yarn add -D @craco/craco`
2. 在项目根目录中创建 craco 的配置文件:`craco.config.js`,并在配置文件中配置路径别名
3. 修改 `package.json` 中的脚本命令
4. 在代码中,就可以通过 `@` 来表示 src 目录的绝对路径
5. 重启项目,让配置生效
6. 在项目根目录创建 `jsconfig.json` 配置文件,让vscode识别@路径并给出路径提示
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}
//craco.config.js页的代码实现:
const path = require('path')
module.exports = {
// webpack 配置
webpack: {
// 配置别名
alias: {
// 约定:使用 @ 表示 src 文件所在路径
'@': path.resolve(__dirname, 'src')
}
}
}
package.json 页的代码实现:
// 将 start/build/test 三个命令修改为 craco 方式
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}