【入門】React 17 + Vite + ECharts 實現(xiàn)疫情數(shù)據(jù)可視化「02 快速搭建項目」
往期文章目錄：
【入門】React + Vite 實現(xiàn)疫情數(shù)據(jù)可視化
快速搭建項目
在上一篇
2021-08-23
我們進(jìn)行了項目的介紹，非常高興能與大家在第二篇相見，本篇我們將教大家如何快速搭建項目，思維導(dǎo)圖如下，給本文「點贊+評論+關(guān)注」三連，支持一下博主哈。
介紹 Vite
在介紹之前，給大家先放上 Vite 官方中文文檔，以官網(wǎng)最新為準(zhǔn)哈。
https://cn.vitejs.dev/
尤大還是比較敬佩的，在這里放上他在知乎的一個回答：
在官方文檔中，標(biāo)題的一句介紹：「下一代前端開發(fā)與構(gòu)建工具」，還有尤大也提及了，使用 Vite 的用戶會越來越多。
現(xiàn)在工作就正在使用 Vite，就是我工作中的導(dǎo)師搭建的，之前使用 webpack，由于項目越來越復(fù)雜，頁面逐漸變多了，每次啟動項目構(gòu)建了許久，其次是更新時的打包時間也變久了，這樣對于編程體驗來說就不是很好了。
于是乎，通過一周的工作之余學(xué)習(xí)，接入了 Vite，然后對我說：別學(xué) webpack 了，趕緊來用 Vite，當(dāng)我把公司項目下載來之后，啟動構(gòu)建，起飛，確實很快。
Vite 特點
引用自 Vite 官方中文文檔
?? 極速的服務(wù)啟動「使用原生 ESM 文件，無需打包!」
?? 輕量快速的熱重載「無論應(yīng)用程序大小如何，都始終極快的模塊熱重載（HMR）」
??? 豐富的功能「對 TypeScript、JSX、CSS 等支持開箱即用。」
?? 優(yōu)化的構(gòu)建「可選 “多頁應(yīng)用” 或 “庫” 模式的預(yù)配置 Rollup 構(gòu)建」
?? 通用的插件「在開發(fā)和構(gòu)建之間共享 Rollup-superset 插件接口。」
?? 完全類型化的API「靈活的 API 和完整 TypeScript 類型。」
當(dāng)初看過一篇博文，就有說尤大當(dāng)初是不打算引入 TypeScript 的，后面出了 Vite 之后，完整支持 TypeScript 類型，一句話：「真香」。
哈哈哈，上述文字大家就當(dāng)開個玩笑看看好了，也是從網(wǎng)絡(luò)上看到的，并不保證真實性哈，當(dāng)然，如果是確定的，小伙伴們可以告訴我下哈。
搭建第一個 Vite 項目
老規(guī)矩，先給大家貼上鏈接，以防大家不知道我在說的是哪里。
https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project
「兼容性注意」Vite 需要 Node.js 版本 >= 12.0.0。
本項目采用的是 React 17 + Vite ，因此我們的執(zhí)行命令如下：
# npm 6.x
npm init vite@latest my-react-vite-app --template react
# yarn
yarn create vite my-react-vite-app --template react
在這里，我就采用 yarn 來安裝模塊了，安裝完成之后，會有如下命令提示：
Done. Now run:
cd my-react-vite-app
yarn
yarn dev
執(zhí)行 yarn dev 之后，就可以看到 React 17 + Vite 創(chuàng)建的小 demo 啦，顯示界面就是一個 react 圖標(biāo)旋轉(zhuǎn)效果。（類似于下圖，這里拿的是我之前用 ts 創(chuàng)建的項目 gif 圖）
項目結(jié)構(gòu)介紹
因為面向初學(xué)者來說的話，許多同學(xué)目錄結(jié)構(gòu)都不是很清楚（比如說當(dāng)初的我），因此在這里對于目錄結(jié)構(gòu)進(jìn)行一下解讀，目錄結(jié)構(gòu)如下圖所示：
node_modules ---------- 依賴包文件
src ---------- 源代碼、參與打包工具打包的文件夾
App.css ---------- App 樣式文件
App.jsx ---------- 描述 App 本身
favicon.svg ---------- 網(wǎng)站標(biāo)簽頁上的小 logo
index.css ---------- 主入口樣式文件
logo.svg ---------- svg格式圖片
main.jsx ---------- 入口文件、做一些準(zhǔn)備工作
.gitignore ---------- git 提交時忽略哪些文件
index.html ---------- 最終要渲染的頁面
package.json ---------- 前端項目的入口文件，包括項目基本信息、版本號、依賴、啟動服務(wù)腳本等
vite.config.js ---------- vite 相關(guān)配置
README.md ---------- 對項目的說明文件，以 Markdown 來編寫
yarn.lock ---------- 鎖定版本號
整體目錄結(jié)構(gòu)大致如上，當(dāng)然，上述文件僅個人平常遇到所總結(jié)，難免還是與官方有點差異，小伙伴們可以指正。
聯(lián)系 & 期待下一篇
項目介紹本篇就到此結(jié)束了，讓我們期待接下來的文章吧。
現(xiàn)在關(guān)注以后就是老粉了，希望小伙伴們能夠喜歡我的文章，這里是小獅子前端，保持獅子座的熱情帶給你學(xué)習(xí)的動力，愿我們成為最好的自己~
好文不白嫖哈，「點贊+評論+關(guān)注」就是給我最大更新的動力啦～
QQ交流群：666151691
- END -
如下是小獅子春秋招過程中學(xué)習(xí)整理的思維導(dǎo)圖以及 PDF 文檔，會不斷更新，目前已有 9 份思維導(dǎo)圖，現(xiàn)在分享給大家，在公眾號后臺回復(fù)「小獅子」，關(guān)注領(lǐng)取
學(xué)如逆水行舟，不進(jìn)則退
點贊 + 在看，好文不白嫖嗷~