使用vite創(chuàng)建vue3項(xiàng)目的詳細(xì)圖文教程
一.創(chuàng)建vite+vue項(xiàng)目
1.在命令行輸入以下創(chuàng)建語(yǔ)句。然后根據(jù)下圖所示，輸入項(xiàng)目名稱并選擇vue框架即可
npm create vite@latest
創(chuàng)建完項(xiàng)目后，根據(jù)提示依次輸入三條命令：
cd 項(xiàng)目名稱
npm install
npm run dev
二. 新建一個(gè)vue3項(xiàng)目
1.替換掉vite文件夾下的src文件夾
2.替換vite -> package.json中的dependencies為
“dependencies”: {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->
“core-js”: “^3.6.5”,
“vue”: “^3.2.37”,
“vue-router”: “^4.0.13”
}
3. 安裝依賴：npm i
4. npm run dev
三.修改vite.config.js
出現(xiàn)以下錯(cuò)誤，是因?yàn)闆](méi)有配置別名alias ：src到@
在vite.config.js文件中修改為
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": "/src",
},
},
})
四.修改router
router -> index.js
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
// 替換為
const router = createRouter({
history: createWebHistory(),
routes
})總結(jié)
到此這篇關(guān)于使用vite創(chuàng)建vue3項(xiàng)目的詳細(xì)圖文教程的文章就介紹到這了,更多相關(guān)vite創(chuàng)建vue3項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue+Echarts實(shí)現(xiàn)分時(shí)圖和交易量圖的繪制
近來(lái)發(fā)現(xiàn)Echarts?API越發(fā)的強(qiáng)大，對(duì)于繪制各類圖形可以使用Echarts實(shí)現(xiàn)。本文將利用Echarts實(shí)現(xiàn)分時(shí)圖和交易量圖的繪制，希望對(duì)大家有所幫助2023-03-03
這篇文章主要介紹了vue3聲明字段名為枚舉的類型方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
詳解Vue中l(wèi)ocalstorage和sessionstorage的使用
這篇文章主要介紹了詳解Vue中l(wèi)ocalstorage和sessionstorage的使用方法和經(jīng)驗(yàn)心得，有需要的朋友跟著小編參考學(xué)習(xí)下吧。2017-12-12
在vue中使用inheritAttrs實(shí)現(xiàn)組件的擴(kuò)展性介紹
這篇文章主要介紹了在vue中使用inheritAttrs實(shí)現(xiàn)組件的擴(kuò)展性介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-12-12
解決Vue 移動(dòng)端點(diǎn)擊出現(xiàn)300毫秒延遲的問(wèn)題
這篇文章主要介紹了解決Vue 移動(dòng)端點(diǎn)擊出現(xiàn)300毫秒延遲的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vuejs實(shí)現(xiàn)帶樣式的單文件組件新方法
這篇文章主要為大家詳細(xì)為大家詳細(xì)介紹了Vuejs實(shí)現(xiàn)帶樣式的單文件組件的新方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
本文通過(guò)實(shí)例代碼給大家介紹了vue中的inject學(xué)習(xí)教程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-04-04
element-ui 實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄的示例代碼
這篇文章主要介紹了element-ui 實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
在 Vue 中編寫(xiě) SVG 圖標(biāo)組件的方法
這篇文章主要介紹了在 Vue 中編寫(xiě) SVG 圖標(biāo)組件的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
解決Echarts2豎直datazoom滑動(dòng)后顯示數(shù)據(jù)不全的問(wèn)題
這篇文章主要介紹了解決Echarts2豎直datazoom滑動(dòng)后顯示數(shù)據(jù)不全的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07