配置项目
本项目采用React+Ant Design+TypeScript开发，React主要使用Function Component的形式做开发，结合路由与请求实现。
1.创建React项目
由于项目结合ts与antd开发，因此请使用以下方式创建项目并安装依赖：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| # 创建名为cms-manage的项目
$ npx create-react-app cms-manage --template typescript
# 或者
$ yarn create react-app cms-manage --template typescript
# 添加antd
npm install antd --save
# 或
yarn add antd
# 添加axios
npm install axios --save
# 或
yarn add axios
|
清空src下所有的内容，并且新建App.tsx与index.tsx，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
import React from "react";
export default function App() {
return (
<div>
<h2>App</h2>
</div>
);
}
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<App />
);
|
先把项目跑起来：
看到跑起来的界面即可。
2.Antd组件
打开Antd的官网：https://ant.design/index-cn (opens new window)。
在App.tsx中：
1
2
3
4
5
6
7
8
9
10
| import React, { FC } from "react";
import { Button } from 'antd';
const App: FC = () => (
<div>
<Button type="primary">Button</Button>
</div>
)
export default App;
|
看到蓝色按钮代表成功：
3.解包
解包之前必须做Git提交
a. Git提交
1
2
3
4
| $ git add .
$ git commit -m 'xxx'
$ git remote origin xxxx
$ git push origin master
|
b. 解包
解包后项目根目录出现config文件夹，代表解包成功。
4.配置Less
a. 安装Less
1
2
3
| $ npm install less less-loader@6.0.0 --save-dev
# 或
$ yarn add less less-loader@6.0.0
|
b. Webpack配置
找到 webpack.config.js ，搜索 sassModuleRegex 后，在其下方添加：
1
2
3
4
5
6
7
8
9
10
11
12
13
| module: {
...,
{
test: /\.less$/,
use: getStyleLoaders(
{
},
'less-loader'
),
},
}
|
修改了配置文件，记得重新 yarn start 哦！
c. Less测试
删掉 index.tsx 中的 antd.css 引入，在src下新建 App.less：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| @import '~antd/dist/antd.css';
@bg: #efefef;
body{
background: @bg;
}
#root{
font-size: 14px;
font-family: NotoSansHans;
color: #333333;
}
a{
color: #333333;
text-decoration: none;
}
|
注意：以上顺便把文字三属性等基本配置写了
然后在 App.tsx 中引入：
打开看到页面样式发生变化，即代表Less测试成功。
5.tsconfig
打开 tsconfig.json，修改下面出现的字段：
1
2
3
4
5
6
7
| {
"compilerOptions": {
"target": "ESNext",
"baseUrl": "./src",
"jsx": "preserve"
}
}
|
baseUrl配置其指向src，所有的相对路径都可以直接从src下的文件或文件夹写起，如：
1
2
3
4
5
|
import App from './App'
import App from 'App'
|
