前言
日常放鴿，火鉗劉明
這是一個(gè)基于 vite 搭建的 React 的項(xiàng)目，開發(fā)體驗(yàn)非常棒。
創(chuàng)建一個(gè) Vite 項(xiàng)目
- yarn create @vitejs/app
如上圖，選擇了 react-ts 預(yù)設(shè)模板，如果出現(xiàn)下圖一樣的工程
- yarn // 安裝依賴
- yarn dev // 啟動(dòng)開發(fā)環(huán)境
打開瀏覽器輸入http://localhost:3000/#/，如上圖所示的話。那么恭喜你，你可以正常開發(fā) React 項(xiàng)目了。完結(jié)撒花
如果不行的話，直接看 vite 官網(wǎng)，它比我寫的詳細(xì)
改造工程
但上述只是一個(gè)基礎(chǔ)的 React demo，在實(shí)際開發(fā)項(xiàng)目中，是遠(yuǎn)遠(yuǎn)不夠的，需要額外做一些項(xiàng)目配置
目錄約定
根據(jù)日常的開發(fā)習(xí)慣，先進(jìn)行基本的目錄約定
- ├── dist/ // 默認(rèn)的 build 輸出目錄
- └── src/ // 源碼目錄
- ├── assets/ // 靜態(tài)資源目錄
- ├── config
- ├── config.js // 項(xiàng)目?jī)?nèi)部業(yè)務(wù)相關(guān)基礎(chǔ)配置
- ├── components/ // 公共組件目錄
- ├── service/ // 業(yè)務(wù)請(qǐng)求管理
- ├── 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 },
- ],
- }
可以參考上述的配置，把其他的屬性也配置進(jìn)去，比如重定向（redirect）、懶加載等常見路由配置項(xiàng)
另外個(gè)人比較傾向通過配置來生成路由，約定式路由總感覺不太方便。
service 管理
所有項(xiàng)目請(qǐng)求都放入 service，建議每個(gè)模塊都有對(duì)應(yīng)的文件管理，如下所示
- import * as information from './information'
- import * as base from './base'
- export {
- information,
- base
- }
這樣可以方便請(qǐng)求管理
base.ts 作為業(yè)務(wù)請(qǐng)求類，可以在這里處理一些業(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)一引入的請(qǐng)求方法，可以自定義替換成 fetch、axios 等請(qǐng)求庫(kù)，同時(shí)可以在此方法內(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)
- })
- })
- }
具體通用攔截，請(qǐng)參考 axios 配置，或者自己改寫即可，需要符合自身的業(yè)務(wù)需求。
這里使用 axios 構(gòu)建出來的資源有問題，不要直接使用，請(qǐng)參考之前的請(qǐng)求封裝替換成 fetch，如果有同學(xué)構(gòu)建成功的，請(qǐng)留言 = =！
在具體業(yè)務(wù)開發(fā)使用的時(shí)候可以按照模塊名引入，容易查找對(duì)應(yīng)的接口模塊
- import { information } from "@/service/index";
- const { data } = await information.getAllInfoGzip({ id });
這套規(guī)則同樣可以適用于 store、router、utils 等可以拆開模塊的地方，有利于項(xiàng)目維護(hù)。
上述是針對(duì)項(xiàng)目做了一些業(yè)務(wù)開發(fā)上的配置與約定，各位同學(xué)可以根據(jù)自己團(tuán)隊(duì)中的規(guī)定與喜好行修改。
其他配置
這里主要是關(guān)于 vite.config.ts 的配置，對(duì)項(xiàng)目整體做一些附加配置。
- 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: {
- // 選項(xiàng)寫法
- '/api': {
- target: 'https://www.xxx.xxx',
- changeOrigin: true,
- rewrite: (path) => path.replace(/^\/api/, '')
- },
- }
- },
- css: {
- postcss: {
- plugins: [
- require('postcss-pxtorem')({ // 把px單位換算成rem單位
- rootValue: 32, // 換算基數(shù)，默認(rèn)100，這樣的話把根標(biāo)簽的字體規(guī)定為1rem為50px,這樣就可以從設(shè)計(jì)稿上量出多少個(gè)px直接在代碼中寫多上px了。
- propList: ['*'], //屬性的選擇器，*表示通用
- unitPrecision: 5, // 允許REM單位增長(zhǎng)到的十進(jìn)制數(shù)字,小數(shù)點(diǎn)后保留的位數(shù)。
- exclude: /(node_module)/, // 默認(rèn)false，可以（reg）利用正則表達(dá)式排除某些文件夾的方法
- })
- ]
- }
- }
- })
大體也是一些基本內(nèi)容：
- vitePluginImp 是將 antd-mobile 進(jìn)行按需加載
- postcss-pxtorem 是配置移動(dòng)端 px 轉(zhuǎn)換的插件
- server.proxy 配置項(xiàng)目代理
- resolve.alias 配置別名，如果需要 vscode 正常識(shí)別的話，需要 ts.config 也配置一下
- {
- "compilerOptions": {
- "baseUrl": "./",
- "paths": {
- "@/*": [
- "src/*"
- ]
- },
- }
其中 antd-mobile 可以自行替換成 antd，包括 postcss 也可以根據(jù)自己的喜好替換
通過上述的簡(jiǎn)單改造，此時(shí)已經(jīng)可以進(jìn)行正常的小項(xiàng)目開發(fā)了。完結(jié)撒花！
并且已經(jīng)在用此配置寫了一個(gè)簡(jiǎn)單的 H5 項(xiàng)目，后續(xù)隨著項(xiàng)目的迭代會(huì)逐步完善一下模板。
到此這篇關(guān)于Vite搭建React項(xiàng)目的方法步驟的文章就介紹到這了,更多相關(guān)Vite搭建React項(xiàng)目?jī)?nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://juejin.cn/post/6948103204060004359
