Vite搭建React項目的方法步驟
前言
日常放鴿，火鉗劉明
這是一個基于 vite 搭建的 React 的項目，開發(fā)體驗非常棒。
創(chuàng)建一個 Vite 項目
yarn create @vitejs/app
如上圖，選擇了 react-ts 預(yù)設(shè)模板，如果出現(xiàn)下圖一樣的工程
yarn // 安裝依賴 yarn dev // 啟動開發(fā)環(huán)境
打開瀏覽器輸入http://localhost:3000/#/，如上圖所示的話。那么恭喜你，你可以正常開發(fā) React 項目了。完結(jié)撒花
如果不行的話，直接看 vite 官網(wǎng)，它比我寫的詳細
改造工程
但上述只是一個基礎(chǔ)的 React demo，在實際開發(fā)項目中，是遠遠不夠的，需要額外做一些項目配置
目錄約定
根據(jù)日常的開發(fā)習慣，先進行基本的目錄約定
├── dist/ // 默認的 build 輸出目錄 └── src/ // 源碼目錄 ├── assets/ // 靜態(tài)資源目錄 ├── config ├── config.js // 項目內(nèi)部業(yè)務(wù)相關(guān)基礎(chǔ)配置 ├── components/ // 公共組件目錄 ├── service/ // 業(yè)務(wù)請求管理 ├── store/ // 共享 store 管理目錄 ├── until/ // 工具函數(shù)目錄 ├── pages/ // 頁面目錄 ├── router/ // 路由配置目錄 ├── .main.tsx // Vite 依賴主入口 ├── .env // 環(huán)境變量配置 ├── vite.config.ts // vite 配置選型，具體可以查看官網(wǎng) api └── package.json
配置路由
改造 main.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter, Route, Switch } from 'react-router-dom'
import routerConfig from './router/index'
import './base.less'
ReactDOM.render(
<React.StrictMode>
<HashRouter>
<Switch>
{
routerConfig.routes.map((route) => {
return (
<Route key={route.path} {...route} />
)
})
}
</Switch>
</HashRouter>
</React.StrictMode>,
document.getElementById('root')
)
router/index.ts 文件配置
import BlogsList from '@/pages/blogs/index'
import BlogsDetail from '@/pages/blogs/detail'
export default {
routes: [
{ exact: true, path: '/', component: BlogsList },
{ exact: true, path: '/blogs/detail/:article_id', component: BlogsDetail },
],
}
可以參考上述的配置，把其他的屬性也配置進去，比如重定向（redirect）、懶加載等常見路由配置項
另外個人比較傾向通過配置來生成路由，約定式路由總感覺不太方便。
service 管理
所有項目請求都放入 service，建議每個模塊都有對應(yīng)的文件管理，如下所示
import * as information from './information'
import * as base from './base'
export {
information,
base
}
這樣可以方便請求管理
base.ts 作為業(yè)務(wù)請求類，可以在這里處理一些業(yè)務(wù)特殊處理
import { request } from '../until/request'
const prefix = '/api'
export const getAllInfoGzip = () => {
return request({
url: `${prefix}/apis/random`,
method: 'GET'
})
}
until/request 作為統(tǒng)一引入的請求方法，可以自定義替換成 fetch、axios 等請求庫，同時可以在此方法內(nèi)封裝通用攔截邏輯。
import qs from 'qs'
import axios from "axios";
interface IRequest {
url: string
params?: SVGForeignObjectElement
query?: object
header?: object
method?: "POST" | "OPTIONS" | "GET" | "HEAD" | "PUT" | "DELETE" | undefined
}
interface IResponse {
count: number
errorMsg: string
classify: string
data: any
detail?: any
img?: object
}
export const request = ({ url, params, query, header, method = 'POST' }: IRequest): Promise<IResponse> => {
return new Promise((resolve, reject) => {
axios(query ? `${url}/?${qs.stringify(query)}` : url, {
data: params,
headers: header,
method: method,
})
.then(res => {
resolve(res.data)
})
.catch(error => {
reject(error)
})
})
}
具體通用攔截，請參考 axios 配置，或者自己改寫即可，需要符合自身的業(yè)務(wù)需求。
這里使用 axios 構(gòu)建出來的資源有問題，不要直接使用，請參考之前的請求封裝替換成 fetch，如果有同學(xué)構(gòu)建成功的，請留言 = =！
在具體業(yè)務(wù)開發(fā)使用的時候可以按照模塊名引入，容易查找對應(yīng)的接口模塊
import { information } from "@/service/index";
const { data } = await information.getAllInfoGzip({ id });
這套規(guī)則同樣可以適用于 store、router、utils 等可以拆開模塊的地方，有利于項目維護。
上述是針對項目做了一些業(yè)務(wù)開發(fā)上的配置與約定，各位同學(xué)可以根據(jù)自己團隊中的規(guī)定與喜好行修改。
其他配置
這里主要是關(guān)于 vite.config.ts 的配置，對項目整體做一些附加配置。
import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import vitePluginImp from 'vite-plugin-imp'
export default defineConfig({
plugins: [
reactRefresh(),
vitePluginImp({
libList: [
{
libName: 'antd-mobile',
style(name) {
return `antd-mobile/lib/${name}/style/index.css`
},
},
]
})
],
resolve: {
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
alias: {
'@': '/src'
}
},
server: {
proxy: {
// 選項寫法
'/api': {
target: 'https://www.xxx.xxx',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
}
},
css: {
postcss: {
plugins: [
require('postcss-pxtorem')({ // 把px單位換算成rem單位
rootValue: 32, // 換算基數(shù)，默認100，這樣的話把根標簽的字體規(guī)定為1rem為50px,這樣就可以從設(shè)計稿上量出多少個px直接在代碼中寫多上px了。
propList: ['*'], //屬性的選擇器，*表示通用
unitPrecision: 5, // 允許REM單位增長到的十進制數(shù)字,小數(shù)點后保留的位數(shù)。
exclude: /(node_module)/, // 默認false，可以（reg）利用正則表達式排除某些文件夾的方法
})
]
}
}
})
大體也是一些基本內(nèi)容：
- vitePluginImp 是將 antd-mobile 進行按需加載
- postcss-pxtorem 是配置移動端 px 轉(zhuǎn)換的插件
- server.proxy 配置項目代理
- resolve.alias 配置別名，如果需要 vscode 正常識別的話，需要 ts.config 也配置一下
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
},
}
其中 antd-mobile 可以自行替換成 antd，包括 postcss 也可以根據(jù)自己的喜好替換
通過上述的簡單改造，此時已經(jīng)可以進行正常的小項目開發(fā)了。完結(jié)撒花！
并且已經(jīng)在用此配置寫了一個簡單的 H5 項目，后續(xù)隨著項目的迭代會逐步完善一下模板。
到此這篇關(guān)于Vite搭建React項目的方法步驟的文章就介紹到這了,更多相關(guān)Vite搭建React項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解react-native WebView 返回處理(非回調(diào)方法可解決)
這篇文章主要介紹了詳解react-native WebView 返回處理(非回調(diào)方法可解決)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了React 高階組件應(yīng)用，詳細的介紹了什么是React高階組件和具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
Diffing?算法是?React?用于比較兩棵虛擬?DOM?樹差異的算法,用來確定需要更新的部分,從而最小化?DOM?操作,這篇文章主要介紹了React?Diffing?算法完整指南,需要的朋友可以參考下2024-12-12
這篇文章主要為大家介紹了React前端DOM常見Hook封裝示例上篇，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了React組件性能最佳優(yōu)化實踐分享，React組件性能優(yōu)化的核心是減少渲染真實DOM節(jié)點的頻率，減少Virtual?DOM比對的頻率，更多相關(guān)內(nèi)容需要的朋友可以參考一下2022-09-09
React Hooks: useEffect()調(diào)用了兩次問題分析
這篇文章主要為大家介紹了React Hooks: useEffect()調(diào)用了兩次問題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了React反向代理及樣式獨立詳解，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
本篇文章主要介紹了react實現(xiàn)菜單權(quán)限控制的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了解決react組件渲染兩次的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vite搭建React項目的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2021-04-04