likes
comments
collection

React TS +Antd + Axios 项目创建

作者站长头像
站长
· 阅读数 39

一、 使用脚手架进行项目的创建

// 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

React TS +Antd + Axios 项目创建

项目创建完毕

三、添加必要模块

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;

展示效果:

React TS +Antd + Axios 项目创建

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

效果:

React TS +Antd + Axios 项目创建

此时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;

效果:

React TS +Antd + Axios 项目创建

四、配置目录结构

  ├── 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();

六、 未完待续