vite如何實(shí)現(xiàn)構(gòu)建vue3新項(xiàng)目

更新時(shí)間：2025年05月31日 18:53:48 作者：weixin_45658815

這篇文章主要介紹了vite如何實(shí)現(xiàn)構(gòu)建vue3新項(xiàng)目方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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.安裝依賴

vscode等開發(fā)軟件打開項(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版本過高，將vite版本從^6.3.5降為4.5.11(該版本是安全版本，部分版本如果開放外網(wǎng)的話有漏洞）即可正常啟動(dòng)，默認(rèn)運(yùn)行在 http://localhost:5173

在這里貼出具體的依賴版本，供大家參考：

{
    "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)文章

vue封裝TabBar組件的完整步驟記錄
組件封裝是為了復(fù)用,換成大白話就是,同樣的事情我不想做第二遍,節(jié)省出來的時(shí)間用來看動(dòng)漫不香嗎,下面這篇文章主要給大家介紹了關(guān)于vue封裝TabBar組件的完整步驟,需要的朋友可以參考下
2021-10-10
Vue寫一個(gè)簡(jiǎn)單的倒計(jì)時(shí)按鈕功能
這篇文章主要介紹了基于Vue寫一個(gè)簡(jiǎn)單的倒計(jì)時(shí)按鈕功能，在項(xiàng)目開發(fā)的過程，經(jīng)常會(huì)遇到發(fā)送驗(yàn)證碼，點(diǎn)擊之后有60秒倒計(jì)時(shí)的按鈕，今天小編就給大家分享實(shí)例代碼，需要的朋友參考下吧
2018-04-04
vuejs手把手教你寫一個(gè)完整的購物車實(shí)例代碼
這篇文章主要介紹了vuejs-手把手教你寫一個(gè)完整的購物車實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
手把手教你拿捏vue?cale()計(jì)算函數(shù)使用
這篇文章手把手教你拿捏vue?cale()計(jì)算函數(shù)使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
Vue+element-ui 實(shí)現(xiàn)表格的分頁功能示例
這篇文章主要介紹了Vue+element-ui 實(shí)現(xiàn)表格的分頁功能示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
vue項(xiàng)目中路徑使用@和~的區(qū)別及說明
這篇文章主要介紹了vue項(xiàng)目中路徑使用@和~的區(qū)別及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
詳解Nuxt.js部署及踩過的坑
這篇文章主要介紹了詳解Nuxt.js部署及踩過的坑，Nuxt.js 提供了兩種發(fā)布部署應(yīng)用的方式：服務(wù)端渲染應(yīng)用部署和靜態(tài)應(yīng)用部署。本文主要說說服務(wù)端渲染應(yīng)用部署，感興趣的小伙伴們可以參考一下
2018-08-08
vue實(shí)現(xiàn)雙向綁定和依賴收集遇到的坑
這篇文章主要介紹了vue的雙向綁定和依賴收集，主要是通過Object.defineProperty() 實(shí)現(xiàn)雙向綁定，具體思路代碼大家跟隨小編一起看看吧
2018-11-11
解決vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)問題
這篇文章主要介紹了vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)的問題,本文通過實(shí)例結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2018-05-05
Vuejs 用$emit與$on來進(jìn)行兄弟組件之間的數(shù)據(jù)傳輸通信
本篇文章主要介紹了Vuejs 用$emit 與 $on 來進(jìn)行兄弟組件之間的數(shù)據(jù)傳輸示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。
2017-02-02