局部安裝vite
npm install vite -D
全局安裝vite
npm install vite -g
使用
npm init vite@latest
//選擇react（windows使用gitbush無(wú)法選擇時(shí)料睛，使用cmd執(zhí)行）
安裝完成之后運(yùn)行：
cd vite-project
npm install
npm run dev
image.png
可以配置.env的開(kāi)發(fā)環(huán)境刚陡、測(cè)試環(huán)境躏升、生產(chǎn)環(huán)境
image.png
配置路徑別名vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import url from 'url';
import path from 'path'
//聲明變量__filename蛙讥，__dirname會(huì)報(bào)錯(cuò)嫉鲸，改為_(kāi)_filename2价说，__dirname2
const __filename2 = url.fileURLToPath(import.meta.url);
const __dirname2 = path.dirname(__filename2);
console.log(__filename2);
console.log(__dirname2);
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
//配置別名 @為src 引入
alias: {
'@': path.resolve(__dirname2, 'src')
}
}
})
接著新建一個(gè)Home.jsx文件假颇，并在App.jsx中引入
import React from 'react';
class Home extends React.Component{
render(){
return <h2 style={{color: 'red'}}>Hello, Home</h2>
}
}
export default Home
App.jsx（這里去掉了一些無(wú)用的代碼）
import reactLogo from './assets/react.svg'
import './App.css'
import Home from '@/pages/Home'
function App() {
return (
<div className="App">
<div>
<a target="_blank">
<img src="/vite.svg" className="logo" alt="Vite logo" />
</a>
<a target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<Home></Home>
</div>
)
}
export default App
image.png
到這里胚鸯，最基礎(chǔ)的vite+react搭建就ok了
