react+ts+antd项目搭建

前言: 基于ts语言创建react项目,node版本是v16.14.2

一、 脚手架创建项目

  1. 全局安装
javascript 复制代码
 npm install -g creacte-react-app
  1. 创建项目file-management,ts需要添加--template typescript
javascript 复制代码
npx create-react-app file-management --template typescript

二、 添加craco.config.js配置文件,类似于vue的vue.config.js文件

  1. 安装
javascript 复制代码
npm i -D @craco/craco
  1. 在项目根目录添加craco.config.js文件并添加路径别名
javascript 复制代码
const path = require('path')

module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}
  1. 修改 package.json 中的脚本命令

修改前:

javacsript 复制代码
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

修改后:

javacsript 复制代码
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },
  1. 配置路径识别,在根目录tsconfig.json文件中添加baseUrl和paths
javascript 复制代码
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src"
  ]
}

更多配置参见craco配置文档

三、使用第三方组件库antd

需要注意的是antd是按需导入的,react并不能像vue一样把组件全部引用并注册。所以在react中使用antd只能是需要什么组件在页面中引入使用

  1. 安装
javascript 复制代码
npm install antd --save
  1. 引入,以app.tsx为例
javascript 复制代码
import { ConfigProvider } from 'antd';
import './App.css';

function App() {
  return (
    <ConfigProvider>
      
    </ConfigProvider>
  );
}

export default App;

四、使用less

  1. 安装,我们使用craco方式
javascript 复制代码
npm i craco-less
  1. 在craco.config.js文件中添加配置
javascript 复制代码
const CracoLessPlugin = require('craco-less')

module.exports = {
  plugins:[
    {
      // less
      plugin: CracoLessPlugin,
      options: {
        // resolve-url-loader只对sass生效,craco-less默认使用sass配置,所以这里手动过滤掉resolve-url-loader
        modifyLessRule: (lessRule) => {
          lessRule.use = lessRule.use.filter(
            (i) => !i.loader.includes('resolve-url-loader')
          );
          return lessRule;
        },
      },
    },
  ],
}
  1. 把app.css改为app.less并在app.tsx中引入

五、使用路由

  1. 安装
javascript 复制代码
npm install react-router react-router-dom
  1. 使用 app.tsx
javascript 复制代码
import { ConfigProvider } from 'antd';
import { BrowserRouter as Router } from 'react-router-dom';
import './App.less';

function App() {
  return (
    <Router>
      <ConfigProvider>

      </ConfigProvider>
    </Router>
  );
}

export default App;
相关推荐
Zsnoin能6 分钟前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房6 分钟前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
摆烂为不摆烂10 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue7711 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor
伟笑40 分钟前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js
Sapphire~1 小时前
重学前端003 --- CSS 颜色
前端·css
慧一居士1 小时前
CSS和CSS3区别对比
前端·css3
我血条子呢1 小时前
动态组件和插槽
前端·javascript·vue.js
中微子1 小时前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端
前端付豪1 小时前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构