建立 Vite 專案

在你要放置專案的地方執行這個指令來建立 vue 模板的 vite 專案

# npm 6
npm init vite [專案名稱] --template vue

# npm 7+
npm init vite [專案名稱] -- --template vue

比如

# npm 6
npm init vite vite-app --template vue

# npm 7+
npm init vite vite-app -- --template vue

建好之後，他會提示你說切換到專案裡面執行指令，那他應該會顯示你的專案名稱，像我這邊呢就是：

cd vite-app
npm install
npm run dev

執行 npm run dev 之後，會看到他給你一個網址讓你可以瀏覽你剛剛建立的網站 (你們會因為電腦的 ip 跟我不同而在 Network 部分顯示不同的網址)

執行了之後，就可以去瀏覽網站了！ 畫面大概會長這樣：

測試完畢、能瀏覽之後就可以先關掉了，因為後面要來安裝 tailwind

使用 vitawind 來安裝 tailwind

接著我們要用 vitawind 來安裝 tailwind。執行這個指令，把所需的東西一起裝下去～

npm install -D vitawind

然後要建立 tailwind 和 postcss 的設定檔以及其他所需的檔案，所以我們要執行 npx vitawind：

npx vitawind

建立完成後會發現專案根目錄多出了一些檔案，像是 tailwind.config.js、postcss.config.js 和 src 資料夾內的 index.css 等等。

這些都完成之後還有一些小手續，是要開始在 vite 專案中使用 tailwind 的前置準備。

在頁面中增添 css 檔

使用之前，我們必須先在 ./src 找到 main.js ，然後在裡面引用 index.css，只要加上一行 import 即可～

    import { createApp } from 'vue'
    import App from './App.vue'
+   import './index.css'

    createApp(App).mount('#app')

加完之後就都安裝和設定完成囉！是不是很快很方便呀？
接下來蓄勢待發，及將要再開啟 vite 囉！！

使用 Tailwind

在使用之前，我們先打開 vite dev server。
(非必要，你也可以後面的步驟都做完再打開，只是先打開會比較爽)

npm run dev

瀏覽畫面，你會發現全都跑版了 QQ

因為我們再來就是要體驗 vite 的熱更新速度以及 tailwind 帶來的美好！！！

dev server 先不用關，只要把兩個 .vue 檔的內容換一下就好了～
先來全部覆蓋掉 ./src/App.vue 的內容：

<template>
  <div class="text-center">
    <img class="mx-auto mt-12 mb-8" alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Hello Vue 3 + Vite" />
  </div>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</script>

再來是 ./src/components/HelloWorld.vue：

<template>

  <h1 class="text-3xl font-bold">{{ msg }}</h1>

  <p class="text-green-500 space-x-4 mt-4">
    <a
      class="underline hover:text-green-400 transition-all"
      href="https://vitejs.dev/guide/features.html"
      target="_blank"
    >
      Vite Documentation
    </a>
    <a 
      class="underline hover:text-green-400 transition-all" 
      href="https://v3.vuejs.org/"
      target="_blank"
    >
      Vue 3 Documentation
    </a>
  </p>

  <button
    class="rounded bg-gray-300 px-2 py-2 my-6 hover:bg-gray-200 transition-all" 
    @click="state.count++"
  >
    count is: {{ state.count }}
  </button>

  <p>
    Edit
    <code class="text-gray-500">components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<script setup>
import { defineProps, reactive } from 'vue'

defineProps({
  msg: String
})

const state = reactive({ count: 0 })
</script>

替換完之後都按儲存，再來看一下網頁...

是不是！！！ 馬上就更新了！
而且看來 tailwind 的語法也順利生效了呢，這樣就完成囉！