在你要放置專案的地方執行這個指令來建立 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。執行這個指令,把所需的東西一起裝下去~
npm install -D vitawind
然後要建立 tailwind 和 postcss 的設定檔以及其他所需的檔案,所以我們要執行 npx vitawind
:
npx vitawind
建立完成後會發現專案根目錄多出了一些檔案,像是 tailwind.config.js
、postcss.config.js
和 src 資料夾內的 index.css
等等。
這些都完成之後還有一些小手續,是要開始在 vite 專案中使用 tailwind 的前置準備。
使用之前,我們必須先在 ./src
找到 main.js
,然後在裡面引用 index.css,只要加上一行 import 即可~
import { createApp } from 'vue'
import App from './App.vue'
+ import './index.css'
createApp(App).mount('#app')
加完之後就都安裝和設定完成囉!是不是很快很方便呀?
接下來蓄勢待發,及將要再開啟 vite 囉!!
在使用之前,我們先打開 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 的語法也順利生效了呢,這樣就完成囉!