vite如何實(shí)現(xiàn)構(gòu)建vue3新項(xiàng)目
vite構(gòu)建vue3新項(xiàng)目
Vite 是新一代前端構(gòu)建工具，速度極快，是創(chuàng)建 Vue 3 項(xiàng)目的推薦方式。
一、環(huán)境準(zhǔn)備
確保你本地已安裝：
- Node.js（推薦版本 ≥ 16）
- npm 或 yarn 或 pnpm
檢查命令：
node -v pnpm -v
二、項(xiàng)目創(chuàng)建
1.使用命令快速創(chuàng)建
pnpm create vite kaishu-vue-ui # 或者使用 yarn # yarn create vite kaishu-vue-ui # 或者使用 pnpm # npm create vite@latest kaishu-vue-ui
2.選擇框架
命令行會(huì)提示選擇框架：選擇vue+ts(TypeScript)
- ①:Select a framework（選擇框架）
| * Select a framework: | Vanilla | > Vue | React | Preact | Lit | Svelte | Solid | Qwik | Angular | Marko | Others —
- ②Select a variant（選擇變體/版本）
| o Select a framework: | Vue | * Select a variant: | > TypeScript | JavaScript | Official Vue Starter ↗ | Nuxt ↗
3.安裝依賴(lài)
vscode等開(kāi)發(fā)軟件打開(kāi)項(xiàng)目，執(zhí)行命令：
pnpm i # 或者使用 # pnpm install
4.項(xiàng)目啟動(dòng)
同上，執(zhí)行命令：\
pnpm run dev
我這里有個(gè)報(bào)錯(cuò)，同樣情況的小伙伴可以關(guān)注一下，報(bào)錯(cuò)如下：
TypeError: crypto$2.getRandomValues is not a function
好像是因?yàn)関ite版本過(guò)高，將vite版本從^6.3.5降為4.5.11(該版本是安全版本，部分版本如果開(kāi)放外網(wǎng)的話有漏洞）即可正常啟動(dòng)，默認(rèn)運(yùn)行在 http://localhost:5173
在這里貼出具體的依賴(lài)版本，供大家參考：
{
"name": "kaishu-vue-ui",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc -b && vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.5.13"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.3",
"@vue/tsconfig": "^0.7.0",
"typescript": "~5.8.3",
"vite": "4.5.11",
"vue-tsc": "^2.2.8"
}
}ps：博主nodejs與pnpm版本如下，大家可以用以參考
node -v v16.19.1 pnpm -v 8.6.6
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在vite項(xiàng)目中使用@進(jìn)行文件的引入方式
這篇文章主要介紹了在vite項(xiàng)目中使用@進(jìn)行文件的引入方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
使用vue-cli創(chuàng)建vue項(xiàng)目介紹
這篇文章介紹了使用vue-cli創(chuàng)建vue項(xiàng)目的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
基于Vue實(shí)現(xiàn)一個(gè)"蛇形"步驟條
在現(xiàn)代Web應(yīng)用中,步驟條作為一種常見(jiàn)的UI組件,廣泛應(yīng)用于表單提交、任務(wù)進(jìn)度以及多步驟操作等場(chǎng)景,下面我們來(lái)看看如何利用Vue實(shí)現(xiàn)一個(gè)蛇形步驟條吧2024-11-11
這篇文章主要介紹了vue3將通用組件注冊(cè)成全局組件的方法，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
vue實(shí)現(xiàn)滾動(dòng)條到頂部或者到指定位置
這篇文章主要介紹了vue實(shí)現(xiàn)滾動(dòng)條到頂部或者到指定位置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue環(huán)境變量配置之process.env解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue+tsx使用slot沒(méi)有被替換的問(wèn)題
本文主要介紹了Vue+tsx使用slot沒(méi)有被替換的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Element通過(guò)v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)
日常業(yè)務(wù)開(kāi)發(fā)中，form表單校驗(yàn)是一個(gè)很常見(jiàn)的問(wèn)題，本文主要介紹了Element通過(guò)v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
uniapp小程序上傳文件webapi后端項(xiàng)目asp.net完整代碼
在uniapp中,實(shí)現(xiàn)文件上傳功能也變得非常簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序上傳文件webapi后端項(xiàng)目asp.net的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了Vue3中jsoneditor的使用相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起了解下2024-01-01