原文地址：Vite⚡ - Vue no-bundler dev setup

眾所周知，Evan You（Vue.js建立者）某天晚上都毫無睡意，因此建立了Vite。

Vite允許你使用單頁元件開發Vue應用，而不需要任何的打包步驟。瀏覽被要求使用Imports就像使用原生ES那樣匯入模組。dev server可以在執行的時候對.vue檔案進行攔截並編譯它們，而且速度很快。

請注意，Vite 是試驗性的 ⚠️ ，我不知道Vite未來會怎麼樣或者這篇文章的有效時間會持續多久。但是，把它當作未來的快餐或者一些有趣的東西。

讓我們嘗試一下

建立如下檔案

Comp.vue

<template>
  <button @click="count++">⚡ {{ count }}</button> 
</template>

<script>
export default {
  data: () => ({ count: 0 })
}
</script>

<style scoped>
button{
  font-size: 2rem;
}
</style>
 

index.html

<div id="app"></div>
<script type="module">
  import { createApp } from 'vue'
  import Comp from './Comp.vue'

  createApp(Comp).mount('#app')
</script>

然後執行命令:

npx vite

訪問 http://localhost:3000, 編輯.vue檔案使之變化來檢視熱過載.

Bundle for Production

現在，讓我們來構建生產環境下的app

新建package.json

{
  "scripts": {
    "build": "vite build"
  }
}

執行命令

npm i -D vite
npm run build

檢查一下dist資料夾下的程式碼

我偶然發現的問題

• Error: Cannot find module 'tslib'
  • Fix: npm i -D tslib
• Error: ENOENT: no such file or director
  • Fix: 手動新建一個dist資料夾

感想

這很容易上手，開發過程也很快，同時我能夠實時看到更改後的變化。這就像在執行時進行編譯。因此，這看起來很有希望，可能以後，這將成為我們開發所有Vue專案的方式。

Evan You，繼續你的魔法