vite+react+ts+mobx+antd+react-router-dom+sass+tailwindcss

私は Vue プロジェクトをたくさん書いてきました。最近、React テクノロジースタックを変更して自分のスキルを鍛えたいと思っています。早速、プロジェクトの作成を始めましょう。このブログは作成のプロセスを記録するためのものです。使用できないバージョンには必然的に落とし穴。共有やディスカッションを歓迎します。

1. npm create vite // vite を使用してプロジェクトを作成します。下の図は、作成用に選択した構成です。以下を参照してください。

作成後、対応するフォルダーに cd し、コマンドコード . で vscode ソフトウェアを開き、依存関係をインストールします。この手順は非常に簡単です。pnpmは直接インストールできます

依存関係をインストールした後、プロジェクトは正常に実行されます。次は構成ディレクトリファイルです。私のプロジェクトディレクトリを参照できます。このディレクトリはすべてカスタマイズされており、自分のプログラミング習慣に依存します。固定のものはありません。標準、基本的に私が使用しているためです。会社のプロジェクトに一人で取り組む。

2. antd UI コンポーネントをインストールします (デフォルトのインストールは antd UI の最新バージョンです)
pnpm i antd -S
私のプロジェクトはすべて pnpm を使用してプラグインと依存関係をインストールしています。pnpm の方が使いやすいと思いますが、インストールされるイメージはまだ比較的小さいです。

3. インストールが完了したら、UIのCSSを導入します。

エントリファイル main.tsx に直接導入できます。
import 'antd/dist/reset.css';
4. src ディレクトリに style フォルダーを作成し、その中にindex.css ファイルを置き、次のように記述することもできます。
@import 'antd/dist/reset.css';
どちらも効果は同じですが、導入方法が異なりますので、注意してください。CSSに@記号を追加する必要があります。

インストール後、App.tsx で試してみると基本的には成功します。

私のインストール方法は、オンデマンドでロードするのではなく、すべてをインポートすることです。

5. vite.config.ts でプロジェクトのパスと実行ポート番号を設定します。

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path, { resolve } from "path";

export default defineConfig({
  server: {
    host: "0.0.0.0", //解决 vite use--host to expose
    port: 8888, //配置端口
    open: true, //配置默认打开浏览器
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"), //配置@别名
    },
  },
  plugins: [react()],
});

tsconfig.json でパスを構成する必要もあります。

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./",  // 这个重要
    "paths": { //  // 这个重要
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

プロジェクトを再起動し、設定を更新します。実際には、@/ は src から開始して、対応するディレクトリのフォルダーを見つけることを意味します。

6. ルーティングのreact-router-dom v6バージョンをインストールします。

pnpm i react-router-dom -S // 默认安装就是最新的版本的

main.tsx でルーティングを使用し、アプリ全体に適用します

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "mobx-react";
import App from "./App";
import "@/style/index.css";
import store from "./store/index";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter> // 使用历史模式，
      <Provider store={store}> // 这个是仓库，mobx，晚点会讲
        <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
);

次に、新しいルーターフォルダを作成し、その中に対応するルーティングファイルを置きます Vueのルーティングを真似て書きました。

私の書き方はボスの書き方を参考にして、サブルートを全てモジュールに入れてimport.meta.globEager(./modules/*.tsx)で全てロードし、再度ロードした後にデータ形式を処理するというものです。これにはルーティングログインインターセプトも含まれており、すべてコードで記述されています。

// インデックス.tsx

import { Navigate, Route, RouteProps } from "react-router-dom";
import BasicLayout from "@/layouts/BasicLayout/BasicLayout";
import SignIn from "@/pages/login";
import cookies from "js-cookie";
import {
  ReactElement,
  JSXElementConstructor,
  ReactFragment,
  ReactPortal,
} from "react";

const modules = import.meta.globEager("./modules/*.tsx");

let routerModuleList: any[] = [];

Object.keys(modules).forEach((key) => {
  const mod = modules[key].default || {};
  const modList = Array.isArray(mod) ? [...mod] : [mod];
  routerModuleList.push(...modList);
});

// 升序排序
routerModuleList = routerModuleList.sort((a, b) => {
  // a-b 小于0 升序，大于零，是降序
  return (a.sort || 99) - (b.sort || 100);
});

const routes: any = [
  {
    path: "/",
    element: <Navigate to={"/layout/homePage"} />,
  },
  {
    path: "/layout",
    element: <VerifyLogin element={<BasicLayout />} />,
    children: [],
  },
  {
    path: "/login",
    element: <login/>,
  },
];

// 实现路由拦截
function VerifyLogin(prop: { element: ReactElement }) {
  const isLogin = cookies.get("token");
  return isLogin ? prop.element : <Navigate to="/login" replace />;
}

routes[1].children = routerModuleList;

export default routes;

次に、サブルーティング仕様

サブルーティングの具体的なコード方法

import { Navigate, Outlet } from "react-router-dom";
import Home from "@/pages/home/index";

const routes = [
  {
    sort: 1,
    path: "/layout/homePage",
    element: <Outlet />,
    meta: {
      title: "首页",
    },

    children: [
      {
        path: "/layout/homePage/homeDetail",
        element: <Home />,
        meta: {
          title: "首页详情",
        },
      },
    ],
  },
];

export default routes;

7.sassのインストール

npm install --save-dev sass

私はそれを直接使用し、コンパイルのために sass-loader をインストールする必要はありませんでした。私はかなり変わっています。基本的に、index.scss を各ページの対応するファイルに直接インポートしました。スタイル汚染の問題はありませんでした。もしあなたのものであれば、今、あなたはこれは、index.module.scss を使用できます。スタイルを分離するために module キーワードを使用します。sass をインストールするために何も設定する必要はありません。直接使用できます。

8. 複数の環境の変数を構成する package.json ファイルを変更することで、--mode を使用して、さまざまな環境の実行構成を指定します。

このルートディレクトリに、対応するさまざまな環境ファイルを作成します (もちろん、後でプロジェクトで使用します)。

このようにして、ログを記録して閲覧することに同意することもできます。これは非常に簡単です。
const { VITE_BASE_URL, VITE_NODE_ENV } = import.meta.env;

9.mobxをインストールする

pnpm i mobx mobx-react -S

もともとreduxを使っていたのですが、修正に時間がかかったのですがうまくできず、プロジェクトもそれほど大きくないのでmobxで十分です。

具体的な使い方

Index.ts 内

import MenuStore from "./menu";
class Store {
  menuStore: MenuStore;

  constructor() {
    this.menuStore = new MenuStore();
  }
}

export default new Store();

menu.ts 中

import { runInAction, makeAutoObservable } from "mobx";

// 对初始化数据进行响应式处理 mobx v6不支持装饰器写法
export default class MenuStore {
  constructor() {
    makeAutoObservable(this);
  }

  // 导航
  breadcrumbData = [];
  // 处理面包屑导航
  currentPath(path: string) {
    this.breadcrumbData = treeFindPath(
      routes[1].children,
      (data) => data.path === path,
      "meta"
    );

// 发起请求
 async fetchProjects() {
        try {
            const projects = await fetchGithubProjectsSomehow()
            // await 之后，再次修改状态需要动作:
            runInAction(() => {
                this.githubProjects = filteredProjects
            })
        } catch (error) {
            runInAction(() => {
                this.state = "error"
            })
        }
    }


  //销毁组件时重置参数
  reset() {}
}

10. 次に、tailwindcss をインストールします。
pnpm i tailwindcss@latest postcss@latest autoprefixer@latest
インストールが成功したら、引き続き設定する必要があります。コマンドを実行します。

npx tailwindcss init はルートディレクトリに 2 つのファイルを生成しますが、そうでない場合は自分で作成できます。

これらはそれぞれ tailwind.config.cjs と postcss.config.cjs である必要があり、サフィックスは cjs である必要があります。

tailwind.config.cjs ファイル構成
module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
postcss.config.cjs ファイルの構成
const tailwindcss = require("tailwindcss");

module.exports = {
  plugins: [tailwindcss("./tailwind.config.cjs"), require("autoprefixer")],
};
作成したtailwindcssのスタイルは参照されるので、スタートアップファイルのApp.tsxに直接スタイルファイルを導入することもできますし、汎用のスタイルファイルを自分で作成して統一的にスタイルファイルを導入することもできます。

tailwind.css ファイルを作成する
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
私のファイルのディレクトリ構造

11. ブラウザのリセットスタイルをリセットするには、reset をインストールします。
pnpm install --save normalize.css
これはスタイルファイル全体に導入され、最後にエントリファイル (main.tsx) に導入されます。
@import 'antd/dist/reset.css';

@import './normal.scss';

import 'normalize.css/normalize.css' // 这个是安装的重置样式

@import './tailwind.css'

12. vite+reatc が実行されるようにアドレスを設定し、パッケージ化後に実行します。

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path, { resolve } from "path";

export default defineConfig({
  base: "/test", // 配置运行的地址
  server: {
    host: "0.0.0.0", //解决 vite use--host to expose
    port: 8888, //配置端口
    open: true, //配置默认打开浏览器
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"), //配置@别名
    },
  },
  plugins: [react()],
});

Vite ドキュメントのアドレス

vite+react+ts+mobx+antd+react-router-dom+sass+tailwindcss

おすすめ