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

青山绿水的蓝

已于 2023-12-27 17:50:15 修改

阅读量3.7k

点赞数 1

分类专栏： web前端文章标签： react.js javascript 前端

于 2022-07-27 15:10:41 首次发布

本文链接：https://blog.csdn.net/m0_49827178/article/details/126009418

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

2.解决ts爆红线问题

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

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

//下载ant
yarn add antd

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;

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

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

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

5.1修改主题颜色

yarn add @craco/craco

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",
}

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

module.exports = {
  
};

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

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

import "./App.css"======》import "./App.less"

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

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

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

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

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

6.1下载插件

yarn add  http-proxy-middleware

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": ""//路径重写
            },
        }));

};

7.下载路由

注意:不要高于5.2.0

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

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

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

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/, '')
            }
          }
    }
})

2.tsconfig.json

"compilerOptions": {
    "baseUrl": ".",
     "paths": {
         "@/*": ["src/*"]
      }
}

3.解决爆红线问题

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

4.修改引入antd样式

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

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