? React項(xiàng)目搭建與運(yùn)行
源碼地址
記得給個(gè)star呀伙伴
Github（https://github.com/NexusLin/NexusReact）
Gitee（https://gitee.com/NexusLinNoa/NexusReact）
環(huán)境介紹
node v20.11.0
react 18.2
react-dom 18.2.0
一、React環(huán)境搭建
第一種普通cra搭建
1、檢查本地環(huán)境
node版本 18.17.0
檢查node和npm環(huán)境
node -v
npm -v
2、安裝yarn
npm install -g yarn
yarn --version
3、創(chuàng)建一個(gè)新的React項(xiàng)目
npx create-react-app ltbreact
4、進(jìn)入并運(yùn)行項(xiàng)目
// 進(jìn)入項(xiàng)目
cd my_react
// 啟動(dòng)項(xiàng)目
yarn start項(xiàng)目啟動(dòng)成功，在瀏覽器 輸入 http://localhost:3000/ 即可訪問(wèn)react
5、嘗試打包
yarn build打包完成以后能在我們項(xiàng)目里面看到一個(gè)包
6、下載插件(安裝xxx 插件 )
yarn add 插件名稱
二、第二種方式vite搭建
1、檢查本地環(huán)境
node版本 18.17.0
檢查node和npm環(huán)境
node -v
npm -v
2、安裝yarn
npm install -g yarn
yarn --version
3、使用vite創(chuàng)建一個(gè)新的React項(xiàng)目
npm create vite@latest 第一種版本
yarn create vite ltbreact --template react-ts //node大于20.0.0 才可以使用
yarn create vite ltbreact --template react-js
4、進(jìn)入并運(yùn)行項(xiàng)目
// 進(jìn)入項(xiàng)目
cd my_react
//安裝依賴
yarn
// 啟動(dòng)項(xiàng)目
yarn start (之前的)
yarn dev項(xiàng)目啟動(dòng)成功，在瀏覽器 輸入 ?? http://localhost:??5173/? 即可訪問(wèn)react
5、嘗試打包
yarn build打包完成以后能在我們項(xiàng)目里面看到一個(gè)包
6、下載插件(安裝xxx 插件 )
yarn add 插件名稱
三、項(xiàng)目信息配置
1、項(xiàng)目目錄
打開(kāi)Vite構(gòu)建的項(xiàng)目，項(xiàng)目的目錄結(jié)構(gòu)如下：
.
├── index.html
├── package.json
├── src
│ ├── App.css
│ ├── App.tsx
│ ├── favicon.svg
│ ├── index.css
│ ├── logo.svg
│ ├── main.tsx
│ └── vite-env.d.ts
├── tsconfig.json
└── vite.config.js
2、配置resolve.alias 文件導(dǎo)入路徑別名
簡(jiǎn)單介紹一下：
resolve.alias 配置項(xiàng)通過(guò)別名來(lái)把原導(dǎo)入路徑映射成一個(gè)新的導(dǎo)入路徑。例如使用以下配置：
在項(xiàng)目的 vite.config.ts 之中配置：
默認(rèn)跟文件為顯示src的目錄
默認(rèn)跟組件目錄為文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-849604.html
// vite.config.ts
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')
}
}
})
雖然配置好了@但是輸入@沒(méi)有提示，找到tsconfig.json文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-849604.html
配置 tsconfig.json
// tsconfig.json
{
"compilerOptions": {
"paths": 到了這里，關(guān)于? React18 環(huán)境搭建項(xiàng)目與運(yùn)行（地址已經(jīng)放Gitee開(kāi)源--新體系為webpack搭建）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
