React TS +Antd + Axios 项目创建
站长
· 阅读数 43
一、 使用脚手架进行项目的创建
// npx 安装
npx create-react-app my-app
// npm 安装
npm init react-app my-app
// yarn安装
yarn create react-app my-app
// 设置TS模板类型需要后面追加 --template typescript
npx create-react-app my-app --template typescript
安装结果：
D:\workSpace
$ npx create-react-app my-app --template typescript
npx: 67 安装成功，用时 4.77 秒
...
...
We suggest that you begin by typing:
cd my-app
npm start
Happy hacking!
二、 项目启动查看效果
cd my-app
npm start
执行结果:
Compiled successfully!
You can now view sss-admin in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.8.116:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
打开浏览器访问地址：http://localhost:3000
项目创建完毕
三、添加必要模块
1. ant dsign
安装：
npm install antd
引入：
修改 src/App.css
/* src/App.less */
@import '~antd/dist/antd.css';
修改 src/app.ts 引入Button组件
/* src/app.ts */
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Button } from 'antd'
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Button type='primary'>Button</Button>
</header>
</div>
);
}
export default App;
展示效果：
2. axios
安装：
npm install axios
3. craco
背景：由于需要对antd的默认配置进行修改，而使用 create-react-app 脚手架创建的项目，原本webpack的配置文件都被隐藏了，然而一旦暴露webpack的配置文件就无法在隐藏回去，所以需要一些第三方解决方案，而and design默认推荐的是craco，所以本项目就采用craco进行配置项的修改
安装: 此处由于craco只作用于webpack打包之前，当项目打包部署后，就不需要此类依赖，所以使用 --save-dev 可以将依赖放入package.json中的devDependencies，打包的时候就不会打包其中包含的依赖，减少打包后的体积
npm install @craco/craco --save-dev
使用：
a. 修改项目启动脚本
/* package.json */
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}
b. 项目的根目录下创建craco专用的配置文件 craco.config.js,用于覆盖修改默认配置
/* craco.config.js */
module.exports = {
...
}
c. 安装 craco-less 用于加载和修改 ant design 中的样式或者覆盖样式变量
npm install craco-less --save-dev
d. 配置craco-less
/* craco.config.js */
/* 引入craco-less */
const CracoLessPlugin = require('craco-less')
module.exports = {
plugins: [{
/* 添加craco-less配置项 */
plugin: CracoLessPlugin,
options: {
/* 设置less加载器的选项 */
lessLoaderOptions: {
lessOptions: {
/* 修改less中的变量 */
modifyVars: {
'@color-blue-1': '#F9FAFF',
'@color-blue-2': '#6C72F3',
'@primary-color': '#1DA57A', // 修改antd中默认颜色
},
javascriptEnabled: true,
}
}
}
}]
}
e. 修改ant design中样式引入的方式
将 src/App.css 文件修改为 src/App.less ，同时修改 src/App.js 中的引入 /* src/App.js */
- import './App.css';
- import './App.less';
修改 src/App.less 中的引入样式
/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';
重启项目
npm start
效果：
此时antd中的默认蓝色的按钮已经变成绿色
f. 配置项目中引入文件时的路径别名
/* craco.config.js */
...
const path = require('path')
module.exports = {
wabpack: {
alias: {
'@': path.resolve('src'),
'@layout': path.resolve('src/layouts'),
'@utils': path.resolve('src/utils'),
'@styles': path.resolve('src/styles'),
'@views': path.resolve('src/views'),
'@assets': path.resolve('src/assets'),
}
},
...
}
4. ant design icon
背景：antd v4.0后就不包含Icon组件，所以想要使用antd中的矢量图形，需要安装其图表组件包
安装：
npm install @ant-design/icons
使用：
import React from 'react';
import './App.less';
import { SmileOutlined } from '@ant-design/icons';
function App() {
return (
<div className="App">
<header className="App-header">
<SmileOutlined style={{ 'fontSize': '36px' }} />
</header>
</div>
);
}
export default App;
效果：
四、配置目录结构
├── public // 项目的静态资源
│ ├── favicon.ico // 图标
│ └── index.html // 项目的承载页面
├── src // 项目的主目录
│ ├── assets // 资源目录
│ │ ├── fonts // 字体目录
│ │ ├── images // 图片目录
│ │ └── styles // 样式目录
│ ├── components // 组件目录
│ ├── data // 数据目录
│ ├── hooks // hook文件目录
│ ├── layouts // 布局文件目录
│ ├── model // 模型目录
│ ├── types // 数据类型目录
│ ├── utils // 工具类目录
│ ├── views // 视图页面目录
│ ├── App.css //
│ ├── App.js //
│ ├── App.test.js // app测试文件
│ ├── index.css //
│ ├── index.js // React的主文件
│ └── logo.svg // 脚手架生成的React logo图片
├── README.md // 项目的介绍文件
├── package.json // 依赖和项目配置信息
├── package-lock.json // 依赖版本锁定文件
├── .gitignore // git忽略文件
├── craco.config.js // craco配置文件
└── tsconfig.json // ts配置文件
五、配置 antd 的国际化设置
背景： antd 默认文案是用的是英文，所以有些组件默认提示都是使用的英文，所以需要设置默认语言为中文简体，antd提供了一个组件 ConfigProvider ,使用此组件配置语言类型
使用：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import zhCN from 'antd/lib/locale/zh_CN';
import { ConfigProvider } from 'antd';
ReactDOM.render(
<ConfigProvider locale={zhCN}>
<App />
</ConfigProvider>,
document.getElementById('root')
);
reportWebVitals();