使用vite創(chuàng)建vue3項(xiàng)目的詳細(xì)圖文教程
一.創(chuàng)建vite+vue項(xiàng)目
1.在命令行輸入以下創(chuàng)建語(yǔ)句。然后根據(jù)下圖所示，輸入項(xiàng)目名稱(chēng)并選擇vue框架即可
npm create vite@latest
創(chuàng)建完項(xiàng)目后，根據(jù)提示依次輸入三條命令：
cd 項(xiàng)目名稱(chē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. 安裝依賴(lài)：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)文章
vue3使用element-plus再次封裝table組件的基本步驟
這篇文章主要介紹了vue3使用element-plus再次封裝table組件的基本步驟,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
Vue使用CDN引用項(xiàng)目組件，減少項(xiàng)目體積的步驟
這篇文章主要介紹了Vue使用CDN引用項(xiàng)目組件，減少項(xiàng)目體積的步驟，幫助大家提高項(xiàng)目加載速度，感興趣的朋友可以了解下2020-10-10
Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟
最近做時(shí)速云項(xiàng)目部署,需要將前端項(xiàng)目打成鏡像文件,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟,需要的朋友可以參考下2023-10-10
vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)
這篇文章主要介紹了vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue清除瀏覽器全部cookie的問(wèn)題及解決方法(絕對(duì)有效!)
最近項(xiàng)目要實(shí)現(xiàn)關(guān)閉瀏覽器清除用戶(hù)緩存的功能,下面這篇文章主要給大家介紹了關(guān)于vue清除瀏覽器全部cookie的問(wèn)題及解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要給大家介紹了關(guān)于vue使用keep-alive后清除緩存的相關(guān)資料,這個(gè)問(wèn)題在我們?nèi)粘９ぷ髦薪?jīng)常會(huì)用到,本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
vue+Element?ui實(shí)現(xiàn)照片墻效果
這篇文章主要為大家詳細(xì)介紹了vue+Element?ui實(shí)現(xiàn)照片墻效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue 父組件通過(guò)v-model接收子組件的值的代碼
這篇文章主要介紹了vue 父組件通過(guò)v-model接收子組件的值的代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
vue cli3 調(diào)用百度翻譯API翻譯頁(yè)面的實(shí)現(xiàn)示例
這篇文章主要介紹了vue cli3 調(diào)用百度翻譯API翻譯頁(yè)面的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要給大家分享的是 Vue中props用法介紹，? 在Vue中通過(guò)props,可以將原本孤立的組件串聯(lián)起來(lái)，也就是可以子組件可以接收父組件傳遞過(guò)來(lái)的data，下面我們一起進(jìn)入文章看看內(nèi)容的詳細(xì)介紹吧,需要的朋友也可以參考一下2021-11-11