昨天有同學說想暑假在家學一學Vue3，問我有沒有什么好的文檔，我給他找了一些，然后順帶著，自己也寫一篇吧，希望可以給新手小白們一些指引，Vue3歡迎你。

1 項目安裝

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

1.1 初始化項目

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

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

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

1.2 安裝初始化依賴

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

cd js-tool-big-box-website

然后安裝初始化依賴

npm install

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

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

1.3 啟動項目 

使用vite創(chuàng)建項目后，啟動項目是非?？焖俚模玳W電般的速度，執(zhí)行下面的命令：

npm run dev

啟動成功后，可以在終端看見如下界面： 

如上圖所示，可以使用其中任意一個url，然后復制，粘貼到瀏覽器，就可以打開項目了：

2  一定會用的第三方庫

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

2.1 js-tool-big-box

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

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

cookie的存取、

localStorage的存取、

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

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

一些日常的正則匹配驗證、

復制文字到剪貼板、

生成UUID、

數(shù)組去重、

隱藏關鍵字符串中間字符、

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

檢測密碼強度、

下載文件、

打開全屏、

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

獲取瀏覽器詳細信息等

2.2 less或者sass預處理器

傳統(tǒng)的css編寫方式比較低端，使用less或者sass這種預處理器，可以讓CSS開發(fā)高效起來，非常推薦使用。

less學習文檔：less學習文檔

2.3 axios請求庫

一般項目都會涉及到與服務端交互，而這個時候你可以使用axios發(fā)送請求。

axios學習文檔：axios學習文檔

2.4 UI庫

針對Vue3，如果是C端開發(fā)呢，我們還是希望可以手寫一些比較輕量級的UI庫，但如果是B端呢，我們推薦Element Plus。

學習文檔：一個 Vue 3 UI 框架 | Element Plus (element-plus.org)

總結(jié)

到此這篇關于前端新手小白的Vue3入坑指南的文章就介紹到這了,更多相關前端新手Vue3入坑內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論