前言

日常放鴿，火鉗劉明

這是一個基于 vite 搭建的 React 的項目，開發(fā)體驗非常棒。

創(chuàng)建一個 Vite 項目

1. yarn create @vitejs/app

如上圖，選擇了 react-ts 預(yù)設(shè)模板，如果出現(xiàn)下圖一樣的工程

1. yarn // 安裝依賴
2. yarn dev // 啟動開發(fā)環(huán)境

打開瀏覽器輸入http://localhost:3000/#/，如上圖所示的話。那么恭喜你，你可以正常開發(fā) React 項目了。完結(jié)撒花

如果不行的話，直接看 vite 官網(wǎng)，它比我寫的詳細

改造工程

但上述只是一個基礎(chǔ)的 React demo，在實際開發(fā)項目中，是遠遠不夠的，需要額外做一些項目配置

目錄約定

根據(jù)日常的開發(fā)習(xí)慣，先進行基本的目錄約定

1. ├── dist/ // 默認的 build 輸出目錄
2. └── src/ // 源碼目錄
3. ├── assets/ // 靜態(tài)資源目錄
4. ├── config
5. ├── config.js // 項目內(nèi)部業(yè)務(wù)相關(guān)基礎(chǔ)配置
6. ├── components/ // 公共組件目錄
7. ├── service/ // 業(yè)務(wù)請求管理
8. ├── store/ // 共享 store 管理目錄
9. ├── until/ // 工具函數(shù)目錄
10. ├── pages/ // 頁面目錄
11. ├── router/ // 路由配置目錄
12. ├── .main.tsx // Vite 依賴主入口
13. ├── .env // 環(huán)境變量配置
14. ├── vite.config.ts // vite 配置選型，具體可以查看官網(wǎng) api
15. └── package.json

配置路由

改造 main.tsx

1. import React from 'react'
2. import ReactDOM from 'react-dom'
3. import { HashRouter, Route, Switch } from 'react-router-dom'
4. import routerConfig from './router/index'
5. import './base.less'
6.  
7. ReactDOM.render(
8. <React.StrictMode>
9. <HashRouter>
10. <Switch>
11. {
12. routerConfig.routes.map((route) => {
13. return (
14. <Route key={route.path} {...route} />
15. )
16. })
17. }
18. </Switch>
19. </HashRouter>
20. </React.StrictMode>,
21. document.getElementById('root')
22. )

router/index.ts 文件配置

1. import BlogsList from '@/pages/blogs/index'
2. import BlogsDetail from '@/pages/blogs/detail'
3.  
4. export default {
5. routes: [
6. { exact: true, path: '/', component: BlogsList },
7. { exact: true, path: '/blogs/detail/:article_id', component: BlogsDetail },
8. ],
9. }

可以參考上述的配置，把其他的屬性也配置進去，比如重定向（redirect）、懶加載等常見路由配置項

另外個人比較傾向通過配置來生成路由，約定式路由總感覺不太方便。

service 管理

所有項目請求都放入 service，建議每個模塊都有對應(yīng)的文件管理，如下所示

1. import * as information from './information'
2. import * as base from './base'
3.  
4. export {
5. information,
6. base
7. }

這樣可以方便請求管理

base.ts 作為業(yè)務(wù)請求類，可以在這里處理一些業(yè)務(wù)特殊處理

1. import { request } from '../until/request'
2.  
3. const prefix = '/api'
4.  
5. export const getAllInfoGzip = () => {
6. return request({
7. url: `${prefix}/apis/random`,
8. method: 'GET'
9. })
10. }

until/request 作為統(tǒng)一引入的請求方法，可以自定義替換成 fetch、axios 等請求庫，同時可以在此方法內(nèi)封裝通用攔截邏輯。

1. import qs from 'qs'
2. import axios from "axios";
3.  
4. interface IRequest {
5. url: string
6. params?: SVGForeignObjectElement
7. query?: object
8. header?: object
9. method?: "POST" | "OPTIONS" | "GET" | "HEAD" | "PUT" | "DELETE" | undefined
10. }
11.  
12. interface IResponse {
13. count: number
14. errorMsg: string
15. classify: string
16. data: any
17. detail?: any
18. img?: object
19. }
20.  
21. export const request = ({ url, params, query, header, method = 'POST' }: IRequest): Promise<IResponse> => {
22. return new Promise((resolve, reject) => {
23. axios(query ? `${url}/?${qs.stringify(query)}` : url, {
24. data: params,
25. headers: header,
26. method: method,
27. })
28. .then(res => {
29. resolve(res.data)
30. })
31. .catch(error => {
32. reject(error)
33. })
34. })
35. }

具體通用攔截，請參考 axios 配置，或者自己改寫即可，需要符合自身的業(yè)務(wù)需求。

這里使用 axios 構(gòu)建出來的資源有問題，不要直接使用，請參考之前的請求封裝替換成 fetch，如果有同學(xué)構(gòu)建成功的，請留言 = =！

在具體業(yè)務(wù)開發(fā)使用的時候可以按照模塊名引入，容易查找對應(yīng)的接口模塊

1. import { information } from "@/service/index";
2.  
3. const { data } = await information.getAllInfoGzip({ id });

這套規(guī)則同樣可以適用于 store、router、utils 等可以拆開模塊的地方，有利于項目維護。

上述是針對項目做了一些業(yè)務(wù)開發(fā)上的配置與約定，各位同學(xué)可以根據(jù)自己團隊中的規(guī)定與喜好行修改。

其他配置

這里主要是關(guān)于 vite.config.ts 的配置，對項目整體做一些附加配置。

1. import { defineConfig } from 'vite'
2. import reactRefresh from '@vitejs/plugin-react-refresh'
3. import vitePluginImp from 'vite-plugin-imp'
4.  
5. export default defineConfig({
6. plugins: [
7. reactRefresh(),
8. vitePluginImp({
9. libList: [
10. {
11. libName: 'antd-mobile',
12. style(name) {
13. return `antd-mobile/lib/${name}/style/index.css`
14. },
15. },
16. ]
17. })
18. ],
19. resolve: {
20. extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
21. alias: {
22. '@': '/src'
23. }
24. },
25. server: {
26. proxy: {
27. // 選項寫法
28. '/api': {
29. target: 'https://www.xxx.xxx',
30. changeOrigin: true,
31. rewrite: (path) => path.replace(/^\/api/, '')
32. },
33. }
34. },
35. css: {
36. postcss: {
37. plugins: [
38. require('postcss-pxtorem')({ // 把px單位換算成rem單位
39. rootValue: 32, // 換算基數(shù)，默認100，這樣的話把根標(biāo)簽的字體規(guī)定為1rem為50px,這樣就可以從設(shè)計稿上量出多少個px直接在代碼中寫多上px了。
40. propList: ['*'], //屬性的選擇器，*表示通用
41. unitPrecision: 5, // 允許REM單位增長到的十進制數(shù)字,小數(shù)點后保留的位數(shù)。
42. exclude: /(node_module)/, // 默認false，可以（reg）利用正則表達式排除某些文件夾的方法
43. })
44. ]
45. }
46. }
47. })

大體也是一些基本內(nèi)容：

• vitePluginImp 是將 antd-mobile 進行按需加載
• postcss-pxtorem 是配置移動端 px 轉(zhuǎn)換的插件
• server.proxy 配置項目代理
• resolve.alias 配置別名，如果需要 vscode 正常識別的話，需要 ts.config 也配置一下

1. {
2. "compilerOptions": {
3. "baseUrl": "./",
4. "paths": {
5. "@/*": [
6. "src/*"
7. ]
8. },
9. }

其中 antd-mobile 可以自行替換成 antd，包括 postcss 也可以根據(jù)自己的喜好替換

通過上述的簡單改造，此時已經(jīng)可以進行正常的小項目開發(fā)了。完結(jié)撒花！

并且已經(jīng)在用此配置寫了一個簡單的 H5 項目，后續(xù)隨著項目的迭代會逐步完善一下模板。

到此這篇關(guān)于Vite搭建React項目的方法步驟的文章就介紹到這了,更多相關(guān)Vite搭建React項目內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！

原文鏈接：https://juejin.cn/post/6948103204060004359