Vite安装及项目初始化

安装脚手架

pnpm create vite

选择 --> React --> TypeScript SWC

项目已经引入 eslint 做代码格式化了

prettier代码格式化

安装vscode插件 Prettier - Code formatter 链接
搜索框贴入files.autoSave筛出设置项，并把设置项属性选择为onFocuschange
设置默认代码格式化（美化）的插件为Prettier，在搜索设置框输入editor.defaultFormatter，将配置项选择为Prettier
设置Prettier插件保存时自动格式化代码，搜索设置项贴入editor.formatOnSave，将如下图所示的选项框打钩即可。
根目录创建prettier配置文件.prettierrc

{
  "printWidth": 100,
  "tabWidth": 4,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "auto",
  "embeddedLanguageFormatting": "auto",
  "singleAttributePerLine": true,
  "jsxBracketSameLine": false
}

Less 与 CSS Module

pnpm add less -D

安装基础配置

pnpm add @types/node -D

配置修改vite.config.ts为

import path from 'node:path'
export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        additionalData: `@import "${path.resolve(__dirname, 'src/global/theme.less')}";`,
      },
    },
  },
  // ...
});

别名

react 使用vite resolve.alias配置@代替src

//...
import path from 'node:path'

export default defineConfig({
    //...
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src"),
        },
    },
    //...
});

修改tsconfig.json文件

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

转换svg

pnpm add vite-plugin-svgr -D

然后再vite.config.js中配置一下：

import svgr from 'vite-plugin-svgr'

export default {
  // ...
  plugins: [svgr()],
  // ...
}

因为使用了typescript，还需要在src/vite-env.d.ts中配置一下：

// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference types="vite/client" />

最后的使用方法：

import { ReactComponent as Logo } from './logo.svg'

封装Axios

API请求工具

pnpm add axios -S

教程链接

安装其他依赖

路由

pnpm add react-router-dom@6 -S

拓展函数

pnpm add ahooks -S

UI框架

pnpm add antd -S

拓展design/pro组件

pnpm add @ant-design/pro-components -S

mock工具

pnpm add mockjs @types/mockjs -D

图标库

pnpm add @ant-design/icons -S

Mock数据模拟及proxy代理转发

mock使用vite-plugin-mock-dev-server插件
官网
 github
MOCK官网示例

安装

pnpm add -D vite-plugin-mock-dev-server

使用

Step1 在你的项目的 `vite.config.{ts,js}`文件中，引入并配置插件:

import { defineConfig } from 'vite'

import mockDevServerPlugin from 'vite-plugin-mock-dev-server' 

export default defineConfig({
  plugins: [
    mockDevServerPlugin(), 
  ],
})

Step2 配置 `server.proxy`

本插件会直接读取 server.proxy 配置的请求路径前缀，作为请求拦截路径匹配。因为在一般场景中，在开发环境中，我们配置的 server.proxy 代理转发配置，会直接转发后端服务的开发环境的地址，在后端服务未完成接口开发但已经提供了接口文档时，我们也只需要对这部分接口进行 mock，使得前端的接口接入流程能并行开发。因此，本插件直接读取 server.proxy 配置，从而减少插件需要配置的参数复杂度。

import { defineConfig } from 'vite'
import mockDevServerPlugin from 'vite-plugin-mock-dev-server'

export default defineConfig({
  plugins: [
    mockDevServerPlugin(),
  ],
  server: { 
    proxy: { 
      '^/api': 'http://example.com/', 
    }, 
  }, 
})

Step3: 添加 `/mock` 目录

在你的项目根目录下，添加 /mock 目录，mock 目录将用于统一保存并管理所有的 mock配置文件。

.
├── mock
├── src
└── package.json

Step4: 编写 mock配置文件

在 /mock 目录中，新增 **/*.mock.{js,ts,cjs,cts,mjs,mts,json,json5} 格式文件。

本插件通过 fast-glob 模块进行文件匹配，自动加载文件，并监听文件以及依赖文件，实现热更新。

同时，支持使用 javascript/typescript/json/json5 等文件格式，还支持 ESModule/Commonjs 模块规范编写代码。

插件会根据项目 package.json 的 type 字段值判断项目默认使用的模块类型，并通过文件后缀格式判断模块类型。

{
  "esm": [".mjs", ".mts"],
  "cjs": [".cjs", ".cts"]
}

.js/.ts 文件根据 package.json 的 type 字段值判断，默认为 cjs。

新增 *.mock.ts 文件：

.
├── mock
│   └── api.mock.ts 
├── src
└── package.json

插件提供了 [defineMock()] 函数帮助编写 mock 配置。

api.mock.ts

import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock({
  url: '/api/test',
  body: {}
})

最后一步导入环境变量基础地址环境变量设置 .env.development 和 .env.production

# 接口请求地址，会设置到 axios 的 baseURL 参数上
VITE_APP_API_BASEURL = http://adminapi.l11.cn/
# 是否在打包时启用 Mock
VITE_BUILD_MOCK = false

请求基础地址

const baseURL = import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL

如何通过react-router-dom V6.4 中的loader优雅的实现菜单权限和登陆拦截功能

juejin.cn/post/714810…

状态管理valtio

官网 valtio.pmnd.rs/
github github.com/pmndrs/valt…

pnpm add valtio -S