react+vite+ts+antdesign项目搭建-20220802_react vite ts

react+vite+ts+antdesign项目搭建（可同时参考vue3+vite+ts+Elementplus项目搭建）—20220802

1.创建react项目|使用vite直接创建项目

//不使用vite
npx create-react-app reactproject --template typescript
//使用npm
npm init vite@latest
//使用yarn
yarn create vite
//使用pnpm
pnpm create vite
//需要下载依赖
npm install
1
2
3
4
5
6
7
8
9
10

2.解决ts爆红线问题

npm install @types/node --save-dev//如找不到path
//然后关闭开发工具重新打开后再次运行项目
1
2

3.在src/App.tsx中引入antd的按钮组件

//下载ant
yarn add antd
1
2

import React, { FC } from 'react';
import { Button } from 'antd';
import './App.css';

const App: FC = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;
1
2
3
4
5
6
7
8
9
10
11

4.修改 src/App.css，在文件顶部引入 antd 的样式

@import '~antd/dist/antd.css';//vite搭建不需要~
1

5.高级配置//vite搭建不需要

5.1修改主题颜色

yarn add @craco/craco
1

5.2修改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",
}
1
2
3
4
5
6
7
8
9

5.3根目录下创建craco.config.js

module.exports = {
  
};
1
2
3

5.4 修改src/App.css名字,修改引入

src/App.css====》src/App.less

import "./App.css"======》import "./App.less"
1
2
3

5.5安装craco-less，并修改craco.config.js

yarn add craco-less@2.0.0
yarn add less@4.1.2
yarn add less-loader@5.0.0
1
2
3

这里利用了 less-loader 的 modifyVars 来进行主题配置，变量和其他配置方式可以参考 配置主题 文档。修改后重启 yarn start，如果看到一个绿色的按钮就说明配置成功了。

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

6.http-proxy-middleware 代理服务器//vite搭建不需要

6.1下载插件

yarn add  http-proxy-middleware
1

6.2src目录下创建文件setupProxy.js

//src/setupProxy.js
//配置如下（新版的用如下操作，旧版的自行百度）
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(createProxyMiddleware('/api',//拦截字段
        {
            target: 'http://localhost:4000/',//发送到的目标地址
            changeOrigin: true,//是否启用代理
            pathRewrite: {
                "^/api": ""//路径重写
            },
        }));

};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

7.下载路由

注意:不要高于5.2.0

yarn add react-router-dom@5.2.0
yarn add @types/react-router-dom
1
2

8.package.json 解决打包空白问题（如果打包空白）//vite搭建不需要

//加入以下代码
//解决打包空白问题
"homepage": "."`
1
2
3

9.使用vite+react+ts+antd

1.vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// const postCssPxToRem = require("postcss-pxtorem")//px to rem
const postcsspxtoviewport = require("postcss-px-to-viewport"); //px to vw
// https://vitejs.dev/config/
import { join } from "path";
export default defineConfig({
  plugins: [react()],
  base: "./",
    resolve: {
        alias: {
            "@": join(__dirname, "src"), //需要配合tsconfig.json文件配置baseUrl和paths设置src别名@
        },
    },
    css: {
        postcss: {
            // //rem的适配方案，需要下载插件
            // plugins: [
            //   postCssPxToRem({
            //     rootValue: 37.5, // 1rem的大小 以375px原型图为基准
            //     propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
            //   })
            // ],
            // //vw的适配方案，需要下载插件
            plugins: [
                postcsspxtoviewport({
                    unitToConvert: "px", // 要转化的单位
                    viewportWidth: 375, // UI设计稿的宽度
                    unitPrecision: 2, // 转换后的精度，即小数点位数
                    propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
                    viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
                    fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
                    selectorBlackList: ["ignore-"], // 指定不转换为视窗单位的类名，
                    minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
                    mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
                    replace: true, // 是否转换后直接更换属性值
                    // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
                    exclude: [],
                    landscape: false, // 是否处理横屏情况
                }),
            ],
        },
        preprocessorOptions: {
      		less: {
        		javascriptEnabled: true,
        		modifyVars: {
          			'@primary-color': '#4377FE',//设置antd主题色
        		},
      		},
   	 	}
    },
    server:{
        port: 3000,
        proxy: {
            '/api': {
              target: 'http://127.0.0.1:27017',
              changeOrigin: true,
              rewrite: (path) => path.replace(/^\/api/, '')
            }
          }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

2.tsconfig.json

"compilerOptions": {
    "baseUrl": ".",
     "paths": {
         "@/*": ["src/*"]
      }
}
1
2
3
4
5
6

3.解决爆红线问题

//解决ts爆红线问题
npm install @types/node --save-dev//如找不到path
1
2

4.修改引入antd样式

@import 'antd/dist/antd.less';//直接修改为less引入
1

5.关闭项目，重新打开开发工具重启项目