快捷導(dǎo)航

前端新手小白的Vue3入坑超詳細(xì)指南

更新時(shí)間：2024年12月30日 08:50:20 作者：經(jīng)海路大白狗

這篇文章主要介紹了如何使用Vite安裝和啟動(dòng)Vue3項(xiàng)目,并推薦了一些常用的第三方庫(kù),如js-tool-big-box、less或sass預(yù)處理器、axios請(qǐng)求庫(kù)以及Element?Plus?UI庫(kù),需要的朋友可以參考下

1 項(xiàng)目安裝

這里我們推薦Vite安裝，Vite 是一個(gè) web 開(kāi)發(fā)構(gòu)建工具，由于其原生 ES 模塊導(dǎo)入方式，可以實(shí)現(xiàn)閃電般的冷服務(wù)器啟動(dòng)。通過(guò)在終端中運(yùn)行以下命令，可以使用 Vite 快速構(gòu)建 Vue 項(xiàng)目：

1.1 初始化項(xiàng)目

npm init vite-app js-tool-big-box-webiste

上面的命令是說(shuō)呢，我們想通過(guò)vite創(chuàng)建一個(gè)名為 js-tool-big-box-webiste 的項(xiàng)目。在控制臺(tái)終端輸入命令后，有提示，我們輸入 “y” 即可。

如上圖安裝完成后，你所執(zhí)行的電腦目錄下面會(huì)有對(duì)應(yīng)的項(xiàng)目文件，如下圖：

1.2 安裝初始化依賴

我們剛才創(chuàng)建了新項(xiàng)目（ js-tool-big-box-website ），那么項(xiàng)目中就生成了以這個(gè)項(xiàng)目名為名字的文件夾，通過(guò)終端，進(jìn)入到這個(gè)目錄的環(huán)境下，執(zhí)行以下命令：

cd js-tool-big-box-website

然后安裝初始化依賴

npm install

如下圖所示，已經(jīng)安裝完成：

而我們的文件夾下也生成了 node_modules 依賴目錄，如下圖所示：

1.3 啟動(dòng)項(xiàng)目

使用vite創(chuàng)建項(xiàng)目后，啟動(dòng)項(xiàng)目是非常快速的，如閃電般的速度，執(zhí)行下面的命令：

npm run dev

啟動(dòng)成功后，可以在終端看見(jiàn)如下界面：

如上圖所示，可以使用其中任意一個(gè)url，然后復(fù)制，粘貼到瀏覽器，就可以打開(kāi)項(xiàng)目了：

2 一定會(huì)用的第三方庫(kù)

項(xiàng)目安裝完成以后呢，就要著手項(xiàng)目開(kāi)發(fā)了。正所謂工欲善其事，必先利其氣。在項(xiàng)目開(kāi)發(fā)之前，我們先說(shuō)幾個(gè)，前端項(xiàng)目開(kāi)發(fā)中，一定會(huì)用到的第三方庫(kù)。用了這幾個(gè)第三方庫(kù)呢，可以幫我們開(kāi)發(fā)更高效。

2.1 js-tool-big-box

js-tool-big-box幾乎是前端開(kāi)發(fā)項(xiàng)目，必用的一個(gè)npm庫(kù)，他的功能豐富，使用便捷，可以讓前端開(kāi)發(fā)及其高效。目前他的功能包括但不限于：

時(shí)間日期轉(zhuǎn)換、

cookie的存取、

localStorage的存取、

防抖節(jié)流的快捷應(yīng)用、

number和字符串的常用方法封裝、

一些日常的正則匹配驗(yàn)證、

復(fù)制文字到剪貼板、

生成UUID、

數(shù)組去重、

隱藏關(guān)鍵字符串中間字符、

獲取詳細(xì)數(shù)據(jù)類型、

檢測(cè)密碼強(qiáng)度、

下載文件、

打開(kāi)全屏、

發(fā)送Jsonp跨域請(qǐng)求、

獲取瀏覽器詳細(xì)信息等