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

建立 Vite 专案

在你要放置专案的地方执行这个指令来建立 vue 模板的 vite 专案

# npm 6npm init vite [专案名称] --template vue# npm 7+npm init vite [专案名称] -- --template vue

比如

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

建好之后，他会提示你说切换到专案里面执行指令，那他应该会显示你的专案名称，像我这边呢就是：

cd vite-appnpm installnpm 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 的语法也顺利生效了呢，这样就完成啰！