今天的越寫悅快樂之系列文章爲大家帶來Vite發佈了要不要嚐嚐鮮吶的文章。Vue.js的創建者尤大大最近發佈了Vite的2.0版本,也可以看作是Vite的第一個穩定版本。它利用現代瀏覽器的模塊導入的特性極大地提升了開發前端項目的效率,讓我們一起來看看這個項目吧,期待和你一起成長。
環境信息
- Windows - 10.0.17763
- VSCode - 1.53.2
版本信息
- node - 12.21.1
- vue - 3.0.5
- vite -2.0.2
Vite是什麼(What)
它是下一代前端開發與構建工具,來源於vite。
Vite的特點(What)
- 極速的服務啓動 - 使用原生 ESM 文件,無需打包
- 輕量快速的熱重載 - 無論應用程序大小如何,都始終極快的模塊熱重載(HMR)
- 豐富的功能 - 對 TypeScript、JSX、CSS 等支持開箱即用
- 優化的構建 - 可選 “多頁應用” 或 “庫” 模式的預配置 Rollup 構建
- 通用的插件 - 在開發和構建之間共享 Rollup-superset 插件接口
- 完全類型化的API - 靈活的 API 和完整 TypeScript 類型
使用Vite創建Vue應用(How)
Vite 需要 Node.js 版本 >= 12.0.0。
我們先通過文件資源管理器打開到某個目錄,隨後通過選擇目錄路徑的方式打開命令行,最後輸入以下命令來創建項目:
npm init @vitejs/app vite-go --template vue-ts
執行完成後可以看到以下信息:
隨後我們使用VSCode
打開項目。
運行項目
我們上一步通過VSCode
打開的項目,項目的目錄結構如下圖所示:
隨後我們在VSCode
的右下方終端
輸入yarn
來安裝項目的依賴並通過yarn run
查看支持運行的命令:
最後選擇dev
即可啓動項目:
Vite支持的模板
- vanilla
- vue
- vue-ts
- react
- react-ts
- preact
- preact-ts
- lit-element
- lit-element-ts
模板中以
ts
結尾的是指以TypeScript語言構建的模板來創建項目
參考(Where)
個人收穫及總結(With)
隨着前端應用場景的不斷延伸,我們可能要接觸的設備也再不斷更新迭代,我們該如何以不變應萬變來應對技術更新的浪潮,是我們深入思考的方向,也是我們不斷探索和學習的動力,當然這些都是要服務我們的客戶,基於我們的產品和服務,有信心和大家一起創造美好的未來,有什麼不明白的地方,歡迎和我交流喲。若是我的文章對你有所啓發,那將是我莫大的榮幸。希望和您一起精進,成爲更好的自己。