使用vite 建立一個react 專案,通常會搭配哪些套件呢?

  1. vite + react
  2. mui (material ui)
  3. react-router-dom v6
  4. zustand 狀態管理

使用vite建立新專案

vite建立新專案時,所有選項都會在終端機的時候詢問,所以你的指令也不用包含專案名稱。

yarn create vite

 

Q:專案名稱叫什麼

vite react project name 專案名稱
vite react project name 專案名稱

Q:要使用什麼JS框架?

也就是說你其實也可以用vite來建立vue專案。

vite 選擇 js 框架
vite 選擇 js 框架

Q:js or ts

vite 選擇 js or ts
vite 選擇 js or ts

建立完成

加入mui

mui 就是基於 Material UI 的設計規範的 react UI 框架,可以參考官網

1. 安裝

這邊的安裝,是他直接給你他推薦的css解決方案,但如果你想用例如 styled-components 這種的,那這步驟你就只要先安裝@mui/material就好,然後再自己安裝想用的套件。

yarn add @mui/material @emotion/react @emotion/styled

 

2. 加入字體

這步驟建議也是要加入的,因為要使用他們的components,英文的話會有好看的字體。

yarn add @fontsource/roboto

安裝完字體檔,就可以在main.js中引入。

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";

import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

3. 安裝icon字體

mui也有自己的icon字體,而且超多~ 就不用到處找icon來使用了:D

yarn add @mui/icons-material

到目前為止mui該裝的東西都好了,這時候可以把隨便一個mui的component放上去看看有沒有效果。

import { Button } from "@mui/material";

function App() {
  return <Button variant="contained">hello world</Button>;
}

export default App;

啟動專案來看看

yarn
yarn dev

這時候可以看到按鈕自動有顏色了,表示我們mui安裝成功。

但是這樣還不夠,因為通常我們網站主色不會是藍色,會有自己的企業色。

所以我們要設定主題來有系統的管理顏色,設定主題也可以方便我們切換亮/暗模式。

 

4. 設定主題

首先把main.js裡面引入的index.css移除。

src/下創建一個theme.js檔案

import { createTheme } from "@mui/material/styles";

// Create a theme instance.
const theme = createTheme({
  palette: {
    primary: {
      main: "#b34766",
    },
  },
});

export default theme;

在這邊我先把主色primary改成紫色,接著把theme.js引入App.jsx

import { Button } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
import theme from "./theme.js";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained">Hello World</Button>
    </ThemeProvider>
  );
}

export default App;

可以看到按鈕我並沒有改任何寫法,只是在最外層引入theme,按鈕的顏色就自動變成我設定的紫色了。

也就是說,整個網站只要你使用的 mui component 有用到primary顏色的,就都會是紫色。

(這邊背景變成白色是因為我們剛剛把index.css移除了)

還有一個問題就是通常我們會加上reset.css來清除html預設自帶的css,這個mui 也有做好的component,放在theme裡面就可以了。

import { Button } from "@mui/material";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import theme from "./theme.js";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Button variant="contained">Hello World</Button>
    </ThemeProvider>
  );
}

export default App;

react-router-dom v6

如果網頁有超過一頁的話,就要安裝router套件。

yarn add react-router-dom

在這之前我們要先有頁面,那就先創建兩個頁面吧!

創建檔案 src/views/Home.jsxsrc/views/About.jsx

import { Link } from "react-router-dom";

const Home = () => {
  return (
    <div>
      Home
      <br />
      <Link to="/about">前往 About</Link>
    </div>
  );
};

export default Home;
const About = () => {
  return <div>About</div>;
};

export default About;

src/下創建router.jsx

import { createBrowserRouter } from "react-router-dom";
import Home from "./views/Home";
import About from "./views/About";
const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

export default router;

然後在App.jsxrouter.js引入

import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import theme from "./theme.js";
import { RouterProvider } from "react-router-dom";
import router from "./router";

function App() {
  return (
    <ThemeProvider theme={theme(mode)}>
      <CssBaseline />
      <RouterProvider router={router} />
    </ThemeProvider>
  );
}

export default App;

這時候會出現首頁的畫面,並且有一個「前往 About」的連結,點下去之後如果有進入About頁面,就表示我們安裝成功囉!

(之後會補上如果要製作後台,並且有登入流程的router要怎麼設定)

zustand 狀態管理

現在大宗都還是使用 redux,但是 zustand 的下載量也有越來越多的趨勢,所以就來用用看,寫法也更簡潔。

安裝zustand

yarn add zustand

就做一個最簡單的點擊按鈕,數字加一來看看怎麼使用狀態。

src/stores/下新增檔案useCountStore.js

import { create } from "zustand";

const useCountStore = create((set) => ({
  count: 0,
  increasePopulation: () => set((state) => ({ count: state.count + 1 })),
  removeAllCount: () => set({ count: 0 }),
}));

export default useCountStore;

狀態和方法都是宣告在同一個create函式裡面。

接著改寫Home.jsx 把數字和按鈕加上去

import { Link } from "react-router-dom";
import { Button, Typography } from "@mui/material";

const Home = () => {
  return (
    <div>
      Home
      <br />
      <Link to="/about">前往 About</Link>
      <br />
      <br />
      <Typography variant="body1" gutterBottom>
        count:0
      </Typography>
      <Button variant="contained">加一</Button>
    </div>
  );
};

export default Home;

在Home頁面引入zustand

import { Link } from "react-router-dom";
import { Button, Typography } from "@mui/material";
import useCountStore from "../stores/useCountStore";
const Home = () => {
  const { count, increasePopulation } = useCountStore();

  return (
    <div>
      Home
      <br />
      <Link to="/about">前往 About</Link>
      <br />
      <br />
      <Typography variant="body1" gutterBottom>
        count:{count}
      </Typography>
      <Button variant="contained" onClick={increasePopulation}>
        加一
      </Button>
    </div>
  );
};

export default Home;

設定別名 alias

vite也可以設定別名,原本我們引入檔案都是用相對路徑,例如:../../components/Header.jsx

這樣專案一大,我們前面的點點就要寫很多,當我們設定完別名,就可以寫成:@/components.jsx

/* eslint-disable no-undef */
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

要記得加入第一行那邊忽略global參數的錯誤喔! 不然你的 __dirname 可能會報錯。

延伸閱讀

專案製作完成,接下來就要部署到線上給客戶驗收囉!

參考其他文章:『使用 docker 部署 vite + react 靜態網站

0
0 回復

發表評論

想要加入討論嗎?
請盡情發表您的想法!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。