[ Vue ] 使用 Vitawind 1.2 来建置 Vite + Tailwind JIT 专案

建立 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>

替换完之後都按储存，再来看一下网页...