Vite+Antd+tailwind初始化项目（React）

Vite+Antd+tailwind初始化项目

使用vite创建项目

首先选择一个文件夹

进入命令窗口

使用vite创建项目

npm create vite@latest

初始化项目后

进入项目安装依赖

npm install

运行

npm run dev

使用Ant Design组件

安装

npm install antd --save

直接使用

组件汉化

在main.jsx中

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

import 'dayjs/locale/zh-cn'

import zhCN from 'antd/locale/zh_CN'
import { ConfigProvider } from 'antd'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ConfigProvider locale={zhCN}>
      <App />
    </ConfigProvider>
  </React.StrictMode>
)

tailwind的使用安装

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

//tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      // gridTemplateColumns: {
      //   'responsive':repeat(autofill,minmax('300px',1fr))
      // }
    }
  }
  // plugins: [],
  // corePlugins: {
  //   preflight: false
  // }
}

@tailwind base;
@tailwind components;
@tailwind utilities;


/* @layer base { 
  button, [type='button'], [type='reset'], [type='submit']
  { background-color: #3b82f6; 
  }
} */

导入

import './styles/index.css'

antd跟tailwind会有样式冲突

参考：https://www.cnblogs.com/sxliu414/p/17816969.html

路由

安装

npm i react-router-dom

npm install axios 

router.jsx

import { createBrowserRouter } from 'react-router-dom';
import { Navigate } from 'react-router-dom';

import Layout from '../layout/layout';

import Login from '../pages/login';
import Welcome from '../pages/welcome.jsx';
import NotFound from '../pages/notFound.jsx';

const router = createBrowserRouter([
  {
    path: '/login',
    element: <Login />,
    children: [],
  },
  {
    path: '/',
    element: <Login />,
    children: [],
  },
  {
    path: '/layout',
    element: <Layout />,
    children: [
      {
        path: '/layout',
        //重定向到 '/layout/welcome'
        element: <Navigate to="/layout/welcome" />,
        // element: <Welcome />,
      },
      {
        path: '/layout/welcome',
        element: <Welcome />,
      },
    ],
  },
  {
    path: '*',
    element: <NotFound />,
    children: [],
  },
]);

export default router;

导航守卫

......

API请求axios拦截

import http from '../utils/http';

//POST
// 登录后，获取token
export const UserLogin = (data) => {
  return http({
    url: '/Login/Authenticate',
    method: 'POST',
    data,
  });
};

//GET
//查询文件列表
// export const getFileData = (data) => {
//     return http({
//         url: '/FileMgmt/GetFileList',
//         params: data
//     })
// }

http.js文件

import axios from 'axios';

import { message } from 'antd';

const service = axios.create({
  baseURL: '/apiUrl',
  // baseURL: 'http://iot-bbs.yangzijiang.com/',
  timeout: 5000,
});

//响应拦截器
service.interceptors.response.use(
  (response) => {
    if (response.status === 200) {
      return response.data;
    } else if (response.status === 401) {
      // message.error('请重新登录')
      // sessionStorage.clear()

      // if (isMobileTerminal.value) {
      //   sessionStorage.setItem('token', '')
      // } else {
      //   console.log('401')
      // router.push('/login')
      sessionStorage.clear();
      // Router.push('/')
      //请求要求身份验证 跳转到登录页
      window.location.href = '/login';

      return response;
      // }
    } else {
      return Promise.reject(new Error(response.status));
    }
  },
  (error) => {
    if (error.message && error.message.indexOf('401') > -1) {
      message.error('请重新登录！');
      sessionStorage.clear();
      //请求要求身份验证 跳转到登录页
      window.location.href = '/login';
      // location.reload()
    }
  }
);

// 请求拦截
service.interceptors.request.use(
  (config) => {
    if (sessionStorage.getItem('token')) {
      config.headers.Authorization =
        `Bearer ` + sessionStorage.getItem('token');
    } else {
      // console.log(isMobileTerminal.value)
      //   if (isMobileTerminal.value) {
      //     sessionStorage.setItem('token', '')
      //   } else {
      //     router.push('/login')
      //   }
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default service;