React_TS 学习笔记(1-2)依赖集成步骤

npm install react-router-dom

// src/router/index.tsximport { Routes, Route, Navigate } from 'react-router-dom';import LayoutManager from '@/layout';import Login from '@/pages/login';import Dashboard from '@/pages/dashboard';const AppRouter = () => {  return (    <Routes>      <Routepath="/login"element={<Login />} />      <Routepath="/"element={<LayoutManager />}>        <Routeindexelement={<Navigateto="/dashboard"replace />} />        <Routepath="dashboard"element={<Dashboard />} />      </Route>    </Routes>  );};export default AppRouter;

// src/App.tsximport { BrowserRouter } from 'react-router-dom';import AppRouter from './router';function App() {  return (    <BrowserRouter>      <AppRouter />    </BrowserRouter>  );}

npm install zustand

// src/store/user.tsimport { create } from 'zustand';import { persist } from 'zustand/middleware';interface UserState {  token: string;  userInfo: any;  setToken: (token: string) => void;  setUserInfo: (info: any) => void;  logout: () => void;}export const useUserStore = create<UserState>()(  persist(    set => ({      token: '',      userInfo: null,      setToken: token => set({ token }),      setUserInfo: userInfo => set({ userInfo }),      logout: () => set({ token: '', userInfo: null }),    }),    {      name: 'user-storage',    }  ));

import { useUserStore } from '@/store/user';function UserProfile() {  const { userInfo, setUserInfo } = useUserStore();  // ...}

npm install axios

// src/utils/request.tsimport axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';import { message } from 'antd';import { useUserStore } from '@/store/user';const request: AxiosInstance = axios.create({  baseURL: import.meta.env.VITE_APP_BASE_API,  timeout: 50000,  headers: { 'Content-Type': 'application/json' },});// 请求拦截器request.interceptors.request.use(  config => {    const token = useUserStore.getState().token;    if (token) {      config.headers.Authorization = `Bearer ${token}`;    }    return config;  },  error => Promise.reject(error));// 响应拦截器request.interceptors.response.use(  (response: AxiosResponse) => {    const { code, data, msg } = response.data;    if (code === 200) {      return data;    } else {      message.error(msg || '请求失败');      return Promise.reject(new Error(msg));    }  },  error => {    message.error(error.message || '网络错误');    return Promise.reject(error);  });export default request;

npm install qsnpm install @types/qs -D

import qs from 'qs';import axios from 'axios';const request = axios.create({  baseURL: import.meta.env.VITE_APP_BASE_API,  timeout: 50000,  headers: { 'Content-Type': 'application/json' },  paramsSerializer: {    serialize(params) {      return qs.stringify(params, { allowDots: true });    },  },});

npm install js-cookienpm install @types/js-cookie -D

// src/utils/storage.tsimport Cookies from 'js-cookie';export const TOKEN_KEY = 'access_token';export const getToken = () => Cookies.get(TOKEN_KEY);export const setToken = (token: string) => Cookies.set(TOKEN_KEY, token);export const removeToken = () => Cookies.remove(TOKEN_KEY);

npm install i18next react-i18next i18next-browser-languagedetector i18next-http-backend

// src/i18n/index.tsimport i18n from 'i18next';import { initReactI18next } from 'react-i18next';import LanguageDetector from 'i18next-browser-languagedetector';import zhCN from './locales/zh-CN.json';import enUS from './locales/en-US.json';i18n  .use(LanguageDetector)  .use(initReactI18next)  .init({    resources: {      'zh-CN': { translation: zhCN },      'en-US': { translation: enUS },    },    fallbackLng: 'zh-CN',    interpolation: {      escapeValue: false,    },  });export default i18n;

// 组件中使用import { useTranslation } from 'react-i18next';function MyComponent() {  const { t, i18n } = useTranslation();  return (    <div>      <h1>{t('welcome')}</h1>      <buttononClick={() => i18n.changeLanguage('en-US')}>English</button>    </div>  );}

npm install antdnpm install @ant-design/icons

// src/App.tsximport { ConfigProvider } from 'antd';import zhCN from 'antd/locale/zh_CN';import 'antd/dist/reset.css';function App() {  return <ConfigProviderlocale={zhCN}>{/* 应用内容 */}</ConfigProvider>;}

npm install sass

// vite.config.tsexport default defineConfig({  css: {    preprocessorOptions: {      scss: {        additionalData: `@use "@/styles/variables.scss" as *;`,      },    },  },});

// src/styles/variables.scss$primary-color: #1890ff;$font-size-base: 14px;

// 组件中使用import './index.scss';function MyComponent() {  return <divclassName="my-component">Hello</div>;}

// index.scss.my-component {  color: $primary-color;  font-size: $font-size-base;}

npm install tailwindcss @tailwindcss/postcss autoprefixer

// vite.config.tsimport tailwindcss from '@tailwindcss/vite';export default defineConfig({  plugins: [react(), tailwindcss()],});

// tailwind.config.jsmodule.exports = {  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],  theme: {    extend: {},  },  plugins: [],};

/* src/index.css */@import 'tailwindcss';

function Button() {  return (    <buttonclassName="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Click me</button>  );}

npm install nprogressnpm install @types/nprogress -D

// src/utils/nprogress.tsimport NProgress from 'nprogress';import 'nprogress/nprogress.css';// 配置 NProgressNProgress.configure({  showSpinner: false, // 不显示右上角的旋转图标  trickleSpeed: 200, // 自动递增间隔  minimum: 0.3, // 初始化时的最小百分比  easing: 'ease', // 动画方式  speed: 500, // 递增进度条的速度});/** * 开始加载进度条 */export const startProgress = (): void => {  NProgress.start();};/** * 完成加载进度条 */export const doneProgress = (): void => {  NProgress.done();};/** * 设置进度条百分比 */export const setProgress = (n: number): void => {  NProgress.set(n);};export default {  start: startProgress,  done: doneProgress,  set: setProgress,};

// src/styles/nprogress.scss#nprogress {  pointer-events: none;}#nprogress .bar {  background: linear-gradient(90deg, #1890ff 0%, #52c41a 100%);  position: fixed;  z-index: 9999;  top: 0;  left: 0;  width: 100%;  height: 3px;  box-shadow: 0 0 10px rgba(24, 144, 255, 0.5);}#nprogress .peg {  display: block;  position: absolute;  right: 0;  width: 100px;  height: 100%;  box-shadow:    0 0 10px rgba(24, 144, 255, 0.8),    0 0 5px rgba(24, 144, 255, 0.8);  opacity: 1;  transform: rotate(3deg) translate(0px, -4px);}

// src/router/index.tsximport { Routes, Route, useLocation } from 'react-router-dom';import { useEffect } from 'react';import { startProgress, doneProgress } from '@/utils/nprogress';import '@/styles/nprogress.scss';/** * 路由加载进度条组件 * 监听路由变化，自动显示/隐藏加载进度条 */function RouteProgress() {  const location = useLocation();  useEffect(() => {    startProgress();    const timer = setTimeout(() => {      doneProgress();    }, 300);    return () => {      clearTimeout(timer);      doneProgress();    };  }, [location.pathname]);  return null;}const AppRouter = () => {  return (    <>      <RouteProgress />      <Routes>{/* 路由配置 */}</Routes>    </>  );};export default AppRouter;

// src/App.tsximport { BrowserRouter } from 'react-router-dom';import AppRouter from './router';function App() {  return (    <BrowserRouter>      <AppRouter />    </BrowserRouter>  );}

import { startProgress, doneProgress, setProgress } from '@/utils/nprogress';// 开始加载startProgress();// 设置进度（0-1）setProgress(0.5);// 完成加载doneProgress();

import { startProgress, doneProgress } from '@/utils/nprogress';const fetchData = async () => {  startProgress();  try {    const data = await api.getData();    return data;  } finally {    doneProgress();  }};

// src/router/index.tsximport '@/styles/nprogress.scss';

#nprogress .bar {  background: linear-gradient(90deg, #1890ff 0%, #52c41a 100%);}

NProgress.configure({  trickleSpeed: 200, // 调整这个值  speed: 500, // 调整这个值});

npm install gm-crypt

declare module 'gm-crypt' {  export class sm4 {    constructor(config: SM4Config);    encrypt(plaintext: string): string;    decrypt(ciphertext: string): string;  }  export interface SM4Config {    key: string;    mode: 'ecb' | 'cbc';    iv?: string;    outType?: 'base64' | 'text';  }}

npm install crypto-jsnpm install @types/crypto-js -D

// src/utils/crypto.tsimport CryptoJS from 'crypto-js';// 默认密钥（建议从环境变量读取）const DEFAULT_SECRET_KEY = import.meta.env.VITE_CRYPTO_SECRET_KEY || 'react19-ts-default-key';/** * AES 加密 */export const encryptAES = (data: string, secretKey: string = DEFAULT_SECRET_KEY): string => {  try {    return CryptoJS.AES.encrypt(data, secretKey).toString();  } catch (error) {    console.error('AES 加密失败:', error);    return '';  }};/** * AES 解密 */export const decryptAES = (ciphertext: string, secretKey: string = DEFAULT_SECRET_KEY): string => {  try {    const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey);    return bytes.toString(CryptoJS.enc.Utf8);  } catch (error) {    console.error('AES 解密失败:', error);    return '';  }};/** * MD5 加密（不可逆） */export const encryptMD5 = (data: string): string => {  return CryptoJS.MD5(data).toString();};/** * SHA256 加密（不可逆） */export const encryptSHA256 = (data: string): string => {  return CryptoJS.SHA256(data).toString();};/** * Base64 编码 */export const encodeBase64 = (data: string): string => {  return CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(data));};/** * Base64 解码 */export const decodeBase64 = (base64String: string): string => {  return CryptoJS.enc.Base64.parse(base64String).toString(CryptoJS.enc.Utf8);};/** * 加密对象（先转 JSON 再 AES 加密） */export const encryptObject = (obj: any, secretKey?: string): string => {  try {    const jsonString = JSON.stringify(obj);    return encryptAES(jsonString, secretKey);  } catch (error) {    console.error('对象加密失败:', error);    return '';  }};/** * 解密对象（先 AES 解密再解析 JSON） */export const decryptObject = <T = any>(ciphertext: string, secretKey?: string): T | null => {  try {    const jsonString = decryptAES(ciphertext, secretKey);    return JSON.parse(jsonString) as T;  } catch (error) {    console.error('对象解密失败:', error);    return null;  }};

import {  encryptAES,  decryptAES,  encryptMD5,  encryptSHA256,  encryptObject,  decryptObject,} from '@/utils/crypto';// AES 加密/解密const password = '123456';const encrypted = encryptAES(password);console.log('加密后:', encrypted);const decrypted = decryptAES(encrypted);console.log('解密后:', decrypted);// MD5 加密（不可逆）const md5Hash = encryptMD5(password);console.log('MD5:', md5Hash);// SHA256 加密（不可逆）const sha256Hash = encryptSHA256(password);console.log('SHA256:', sha256Hash);// 对象加密/解密const userInfo = { username: 'admin', role: 'admin' };const encryptedObj = encryptObject(userInfo);console.log('加密对象:', encryptedObj);const decryptedObj = decryptObject(encryptedObj);console.log('解密对象:', decryptedObj);

// src/pages/login/index.tsximport { encryptAES } from '@/utils/crypto';import { login } from '@/services/auth';const handleLogin = async (values: LoginForm) => {  // 加密密码  const encryptedPassword = encryptAES(values.password);  const res = await login({    username: values.username,    password: encryptedPassword,  });  // 处理登录结果...};

// 自动类型推断const encrypted: string = encryptAES('hello');const decrypted: string = decryptAES(encrypted);// 泛型支持interface User {  id: number;  name: string;}const user: User = { id: 1, name: 'Admin' };const encryptedUser = encryptObject(user);const decryptedUser = decryptObject<User>(encryptedUser);// decryptedUser 的类型为 User | null

# 加密密钥（建议生产环境使用不同的密钥）VITE_CRYPTO_SECRET_KEY=your-secret-key-here

const secretKey = import.meta.env.VITE_CRYPTO_SECRET_KEY;const encrypted = encryptAES(data, secretKey);

npm install lodash-esnpm install @types/lodash-es -D

import { debounce, cloneDeep, isEmpty } from 'lodash-es';// 防抖const handleSearch = debounce((value: string) => {  console.log(value);}, 300);// 深拷贝const newObj = cloneDeep(originalObj);// 判空if (isEmpty(data)) {  // ...}

npm install localforage

// src/utils/storage.tsimport localforage from 'localforage';localforage.config({  name: 'react19_ts',  storeName: 'app_storage',});export const setItem = async (key: string, value: any) => {  await localforage.setItem(key, value);};export const getItem = async (key: string) => {  return await localforage.getItem(key);};export const removeItem = async (key: string) => {  await localforage.removeItem(key);};

npm install @logicflow/core @logicflow/extension

import LogicFlow from '@logicflow/core';import '@logicflow/core/dist/style/index.css';import { useEffect, useRef } from 'react';functionFlowChart() {  const containerRef = useRef<HTMLDivElement>(null);  useEffect(() => {    if(!containerRef.current) return;    const lf = new LogicFlow({      container: containerRef.current,      grid: true,    });    lf.render({      nodes: [        { id: '1', type: 'rect', x: 100, y: 100, text: '节点1' },        { id: '2', type: 'circle', x: 300, y: 100, text: '节点2' },      ],      edges: [{ sourceNodeId: '1', targetNodeId: '2' }],    });  }, []);  return <div ref={containerRef} style={{ width: '100%', height: '500px' }} />;}

npm install animate.css

import 'animate.css';function AnimatedComponent() {  return <divclassName="animate__animated animate__fadeIn">Hello World</div>;}

npm install vite-plugin-obfuscator -D

// vite.config.tsimport obfuscator from 'vite-plugin-obfuscator';export default defineConfig(({ mode }) => ({  plugins: [    react(),    mode === 'production' &&      obfuscator({        options: {          compact: true,          controlFlowFlattening: false,          deadCodeInjection: false,          debugProtection: false,          debugProtectionInterval: 0,          disableConsoleOutput: true,          identifierNamesGenerator: 'hexadecimal',          log: false,          renameGlobals: false,          rotateStringArray: true,          selfDefending: true,          stringArray: true,          stringArrayEncoding: ['base64'],          stringArrayThreshold: 0.75,          unicodeEscapeSequence: false,        },      }),  ].filter(Boolean),}));

npm run build

declare module 'vite-plugin-obfuscator' {  import { Plugin } from 'vite';  interface ObfuscatorOptions {    compact?: boolean;    controlFlowFlattening?: boolean;    deadCodeInjection?: boolean;    debugProtection?: boolean;    disableConsoleOutput?: boolean;    identifierNamesGenerator?: 'hexadecimal' | 'mangled' | 'dictionary';    selfDefending?: boolean;    stringArray?: boolean;    stringArrayEncoding?: Array<'none' | 'base64' | 'rc4'>;    stringArrayThreshold?: number;    // ... 更多选项  }  interface ObfuscatorConfig {    options?: ObfuscatorOptions;  }  function obfuscator(config?: ObfuscatorConfig): Plugin;  export default obfuscator;}

npm install eslint @eslint/js typescript-eslint -Dnpm install eslint-plugin-react-hooks eslint-plugin-react-refresh -D

// eslint.config.jsimport js from '@eslint/js';import tseslint from 'typescript-eslint';import reactHooks from 'eslint-plugin-react-hooks';import reactRefresh from 'eslint-plugin-react-refresh';export default [  js.configs.recommended,  ...tseslint.configs.recommended,  {    plugins: {      'react-hooks': reactHooks,      'react-refresh': reactRefresh,    },    rules: {      'react-hooks/rules-of-hooks': 'error',      'react-hooks/exhaustive-deps': 'warn',      'react-refresh/only-export-components': 'warn',    },  },];

npm install prettier -D

// .prettierrc{  "semi": true,  "trailingComma": "es5",  "singleQuote": true,  "printWidth": 100,  "tabWidth": 2,  "useTabs": false,  "bracketSpacing": true,  "arrowParens": "always"}

# 构建目录distbuild.out# 依赖目录node_modules# 缓存目录.cache# 系统文件.DS_Store# 环境配置.env.env.local.env.development.local.env.test.local.env.production.local# 其他*.min.js*.min.css

// package.json [npm run format] 运行项目代码格式化命令{  "scripts": {    "format": "prettier --write .",    "format:check": "prettier --check ."  }}

{  "editor.defaultFormatter": "esbenp.prettier-vscode",  "editor.formatOnSave": true}

# 格式化所有文件npm run format# 检查格式（不修改文件）npm run format:check

`npm install mockjs vite-plugin-mock -D`

 const env = loadEnv(mode, process.cwd());  const runMode = mode;  const isMock = runMode === "mock";  return{    plugins: [      react() as PluginOption,      // mock环境      viteMockServe({        mockPath: 'mock',        watchFiles: true,        enable: isMock,      })    ],  }

---mock-----login--------index.ts-----index.ts

"scripts": {"mock": "vite --mode mock",},

npm install uuid

npm installnpm run dev

# 安装 pnpmnpm install -g pnpm# 配置镜像源（可选）pnpm config set registry https://registry.npmmirror.com# 安装依赖pnpm install# 启动项目pnpm run dev

`npm install echarts`

| 依赖             | 版本    | 说明           || ---------------- | ------- | -------------- || react            | ^19.2.0 | React 核心库   || react-dom        | ^19.2.0 | React DOM 渲染 || react-router-dom | ^7.12.0 | React 路由     || zustand          | ^5.0.9  | 状态管理       || antd             | ^6.1.4  | UI 组件库      || axios            | ^1.13.2 | HTTP 客户端    || tailwindcss      | ^4.1.18 | 原子化 CSS     || vite             | ^7.2.4  | 构建工具       || typescript       | ~5.9.3  | TypeScript     |

`npm i react-markdown``npm i remark-gfm`

import ReactMarkdown from "react-markdown";import remarkGfm from "remark-gfm";<ReactMarkdownremarkPlugins={[remarkGfm]}>  {docContent}</ReactMarkdown>

# 清除缓存npm cache clean --force# 删除 node_modules 和 lock 文件rm -rf node_modules package-lock.json# 重新安装npm install

npm install @types/node @types/react @types/react-dom -D