使用vite創(chuàng)建vue3項目的詳細圖文教程
更新時間：2022年11月15日 11:12:30 作者：給你六圓錢
創(chuàng)建Vue3項目有兩種常見的方式,一種是想vue2版本一樣使用腳手架工具創(chuàng)建,創(chuàng)建vue3項目的腳手架必須是4版本以上的,另一種方法就是使用vite創(chuàng)建,這篇文章主要給大家介紹了關于如何使用vite創(chuàng)建vue3項目的相關資料,需要的朋友可以參考下
一.創(chuàng)建vite+vue項目
1.在命令行輸入以下創(chuàng)建語句。然后根據下圖所示，輸入項目名稱并選擇vue框架即可
npm create vite@latest
創(chuàng)建完項目后，根據提示依次輸入三條命令：
cd 項目名稱
npm install
npm run dev
二. 新建一個vue3項目
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)以下錯誤，是因為沒有配置別名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
})總結
到此這篇關于使用vite創(chuàng)建vue3項目的詳細圖文教程的文章就介紹到這了,更多相關vite創(chuàng)建vue3項目內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue3使用element-plus再次封裝table組件的基本步驟
這篇文章主要介紹了vue3使用element-plus再次封裝table組件的基本步驟,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了Vue使用CDN引用項目組件，減少項目體積的步驟，幫助大家提高項目加載速度，感興趣的朋友可以了解下2020-10-10
最近做時速云項目部署,需要將前端項目打成鏡像文件,下面這篇文章主要給大家介紹了關于Vue項目打包成Docker鏡像包的簡單步驟,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue input標簽通用指令校驗的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
vue清除瀏覽器全部cookie的問題及解決方法(絕對有效!)
最近項目要實現(xiàn)關閉瀏覽器清除用戶緩存的功能,下面這篇文章主要給大家介紹了關于vue清除瀏覽器全部cookie的問題及解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要給大家介紹了關于vue使用keep-alive后清除緩存的相關資料,這個問題在我們日常工作中經常會用到,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-08-08
這篇文章主要為大家詳細介紹了vue+Element?ui實現(xiàn)照片墻效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue 父組件通過v-model接收子組件的值的代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-10
vue cli3 調用百度翻譯API翻譯頁面的實現(xiàn)示例
這篇文章主要介紹了vue cli3 調用百度翻譯API翻譯頁面的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要給大家分享的是 Vue中props用法介紹，? 在Vue中通過props,可以將原本孤立的組件串聯(lián)起來，也就是可以子組件可以接收父組件傳遞過來的data，下面我們一起進入文章看看內容的詳細介紹吧,需要的朋友也可以參考一下2021-11-11