今天的越寫悅快樂(lè)之系列文章為大家?guī)?lái)Vite發(fā)布了要不要嘗嘗鮮吶的文章。Vue.js的創(chuàng)建者尤大大最近發(fā)布了Vite的2.0版本负乡，也可以看作是Vite的第一個(gè)穩(wěn)定版本贯吓。它利用現(xiàn)代瀏覽器的模塊導(dǎo)入的特性極大地提升了開發(fā)前端項(xiàng)目的效率喇聊，讓我們一起來(lái)看看這個(gè)項(xiàng)目吧，期待和你一起成長(zhǎng)堪簿。
環(huán)境信息
- Windows - 10.0.17763
- VSCode - 1.53.2
版本信息
- node - 12.21.1
- vue - 3.0.5
- vite -2.0.2
Vite是什么（What）
它是下一代前端開發(fā)與構(gòu)建工具，來(lái)源于vite皮壁。
Vite的特點(diǎn)（What）
- 極速的服務(wù)啟動(dòng) - 使用原生 ESM 文件椭更，無(wú)需打包
- 輕量快速的熱重載 - 無(wú)論應(yīng)用程序大小如何，都始終極快的模塊熱重載（HMR）
- 豐富的功能 - 對(duì) TypeScript蛾魄、JSX虑瀑、CSS 等支持開箱即用
- 優(yōu)化的構(gòu)建 - 可選 “多頁(yè)應(yīng)用” 或 “庫(kù)” 模式的預(yù)配置 Rollup 構(gòu)建
- 通用的插件 - 在開發(fā)和構(gòu)建之間共享 Rollup-superset 插件接口
- 完全類型化的API - 靈活的 API 和完整 TypeScript 類型
使用Vite創(chuàng)建Vue應(yīng)用（How）
Vite 需要 Node.js 版本 >= 12.0.0。
我們先通過(guò)文件資源管理器打開到某個(gè)目錄滴须，隨后通過(guò)選擇目錄路徑的方式打開命令行舌狗，最后輸入以下命令來(lái)創(chuàng)建項(xiàng)目：
npm init @vitejs/app vite-go --template vue-ts
執(zhí)行完成后可以看到以下信息：
隨后我們使用VSCode打開項(xiàng)目。
運(yùn)行項(xiàng)目
我們上一步通過(guò)VSCode打開的項(xiàng)目扔水，項(xiàng)目的目錄結(jié)構(gòu)如下圖所示：
隨后我們?cè)?code>VSCode的右下方終端輸入yarn來(lái)安裝項(xiàng)目的依賴并通過(guò)yarn run查看支持運(yùn)行的命令：
最后選擇dev即可啟動(dòng)項(xiàng)目：
Vite支持的模板
- vanilla
- vue
- vue-ts
- react
- react-ts
- preact
- preact-ts
- lit-element
- lit-element-ts
模板中以
ts結(jié)尾的是指以TypeScript語(yǔ)言構(gòu)建的模板來(lái)創(chuàng)建項(xiàng)目
參考（Where）
個(gè)人收獲及總結(jié)（With）
隨著前端應(yīng)用場(chǎng)景的不斷延伸痛侍，我們可能要接觸的設(shè)備也再不斷更新迭代，我們?cè)撊绾我圆蛔儜?yīng)萬(wàn)變來(lái)應(yīng)對(duì)技術(shù)更新的浪潮魔市，是我們深入思考的方向主届，也是我們不斷探索和學(xué)習(xí)的動(dòng)力赵哲，當(dāng)然這些都是要服務(wù)我們的客戶，基于我們的產(chǎn)品和服務(wù)君丁，有信心和大家一起創(chuàng)造美好的未來(lái)枫夺，有什么不明白的地方，歡迎和我交流喲谈截。若是我的文章對(duì)你有所啟發(fā)筷屡，那將是我莫大的榮幸。希望和您一起精進(jìn)簸喂，成為更好的自己毙死。
