第一章:项目创建以及引入(Ant Design) 配置全局less
项目创建
本次项目使用create-react-app命令进行创建
// 使用js创建项目
npx create-react-app react-demo
// yarn创建项目
yarn create react-app react-demo
// ts创建项目
npx create-react-app react-demo --typescript
// yarn ts
yarn create react-app react-demo --template typescript
这里我选择用Typescript作为开发语言。
create-react-app的目录结构
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ └── logo.svg
└── yarn.lock
引入Ant Design
// npm
npm install antd
// 使用yarn
yarn add antd
以上2个步骤也有antd官网提供简化版本。创建cra-antd typescript
yarn create react-app antd-demo
// or
npx create-react-app antd-demo
引入craco配置全局less
// 后续均使用yarn
yarn add @craco/craco
对package.json进行修改
/* package.json */
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}
在项目根目录创建一个 craco.config.js 用于修改默认配置。
然后安装 craco-less 并修改 craco.config.js 文件如下。
yarn add craco-less
配置craco.config.js,可以copy下来,然后根据需求自行修改。
以下是antd官方demo的配置,大家可以按需修改。
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
},
],
};
定义全局less
创建less
src/style/index.less
在该less下配置项目的主要样式等
@import "~antd/dist/antd.less";
@primary-color: #1890ff; //主题色
@border-radius-base: 2px;
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
在src/index.tsx下全局引入index.less
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './style/index.less'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
项目框架第一步骤搞定。