//不使用vite
npx create-react-app reactproject --template typescript
//使用npm
npm init vite@latest
//使用yarn
yarn create vite
//使用pnpm
pnpm create vite
//需要下载依赖
npm install
npm install @types/node --save-dev//如找不到path
//然后关闭开发工具重新打开后再次运行项目
//下载ant
yarn add antd
import React, { FC } from 'react';
import { Button } from 'antd';
import './App.css';
const App: FC = () => (
);
export default App;
src/App.css
,在文件顶部引入 antd 的样式@import '~antd/dist/antd.css';//vite搭建不需要~
yarn add @craco/craco
/* package.json */
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
"start": "craco start",
"build": "craco build",
"test": "craco test",
}
module.exports = {
};
src/App.css====》src/App.less
import "./App.css"======》import "./App.less"
yarn add [email protected]
yarn add [email protected]
yarn add [email protected]
这里利用了 less-loader 的 modifyVars
来进行主题配置,变量和其他配置方式可以参考 配置主题 文档。修改后重启 yarn start
,如果看到一个绿色的按钮就说明配置成功了。
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
},
],
};
yarn add http-proxy-middleware
//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": ""//路径重写
},
}));
};
注意:不要高于5.2.0
yarn add [email protected]
yarn add @types/react-router-dom
//加入以下代码
//解决打包空白问题
"homepage": "."`
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/, '')
}
}
}
})
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
//解决ts爆红线问题
npm install @types/node --save-dev//如找不到path
@import 'antd/dist/antd.less';//直接修改为less引入