2022 年 1 月 5 日

使用Tailwindcss+Vite+Pug+LESS 開發環境建置

本篇目錄

本篇與上一篇使用Vitawind安裝Vite+Tailwindcss+Pug+LESS 開發環境建置 非常的雷同,但上一篇我們的主體是使用 vitawind ,雖然很快、很便利,但有點遺憾的是 vitawind 目前是使用 Tailwindcss 2 的版本,可是現在 Tailwindcss 3 已經推出好一陣子了,所以如果想用新版本的 Tailwindcss 還是得換個方式才行,但 vite 真的不錯用,所以這篇我們就來看看怎麼在 vite 下使用新版 Tailwindcss 吧!

1.建立 vite 專案目錄並切換到專案目錄

在terminal 終端機裡輸入以下指令:

npm init vite 專案目錄
cd 專案目錄

2.安裝 Tailwindcss 與 Less 、 pug 、 vite-plugin-pug

在terminal 終端機裡輸入以下指令:

npm install -D tailwindcss postcss autoprefixer less pug vite-plugin-pug

3.建立 Tailwindcss 相關設定檔

在terminal 終端機裡輸入以下指令:

npx tailwindcss init -p

指令跑完後,你的專案資料夾就會多了「tailwind.config.js」和「postcss.config.js」兩個設定檔,打開tailwind.config.js 做以下修改:

module.exports = {
content: [
"./index.html",
"./src/*/.{vue,js,ts,jsx,tsx,pug}",
],

theme: {
extend: {},
},
plugins: [],
}

因為我們要整合pug,所以記得要把pug加進去,你也可以設定其他的路徑放置pug檔,但建議還是放在src裡統一管理會比較好。

4.在css 裡引用 Tailwindcss

在src資料夾裡新增index.css,貼上以下程式碼:

@tailwind base;
@tailwind components;
@tailwind utilities;

接著在mai.js裡引入css:

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')

你可以在index.html 或 App.vue 裡試著使用Tailwindcss

<h1 class="text-3xl font-bold underline"> Hello Tailwind! </h1>

在terminal 終端機裡輸入以下指令:

npm run dev

如此一來就可以進入開發模式,你就可以在你的本機電腦上看到結果了。

5.less 與 pug 的運用

由於我平常習慣使用less + pug 來開發,所以這裡我也講一下怎麼設定less 與pug 的部份。首先我們先講Less的部份,由於我們使用vite的關係,Less 已經可以直接使用,只要在src資料夾中新增「ooo.less」的檔案,然後在main.js引入即可。pug的部份稍微麻煩一點,要打開vite.config.js,然後做以下修改:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// pug
import pugPlugin from "vite-plugin-pug"
const options = { pretty: true } // FIXME: pug pretty is deprecated!
const locals = { name: "My Pug" }

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),pugPlugin(options, locals)]
})

接著可以在src資料夾裡新增一個Pug檔,我們就先取名叫template.pug 吧!然後記得在裡面寫一些pug,如果你跟我一樣懶,那你可以複製下面的code:

h1.text-green-500 Hello World
p I'm a cool Vite project!

再來我們到index.html裡,在body 裡使用以下方式引用 pug 進入頁面。

<pug src="./src/index.pug" />

在terminal 終端機裡輸入以下指令:

npm run dev

進入開發模式,你就可以看到 less 與 pug 的成果。

6.開發與打包

開發指我們前面已經用過很多次,

在terminal 終端機裡輸入以下指令:

npm run dev

就會進入開發模式,而輸出打包的指令是:

npm run build

指令跑完後,你會發現多了一個「dist 」 資料夾,這個資料夾裡的東西就是你的開發結果喔!

結語

使用Vitawind安裝Vite+Tailwindcss+Pug+LESS 開發環境建置 相比,這篇的方法只多了一點點步驟,但卻可以使用最新的Tailwindcss ,後續使用方式其實也差不多,所以我比較建議用這個方法,雖然麻煩了一點點,但可以用新版Tailwindcss 還是比較好啊!

文章分類:

6 comments on “使用Tailwindcss+Vite+Pug+LESS 開發環境建置”

  1. 你好,我是 Vitawind 的開發者,非常謝謝你的支持與指教。

    現在 Vitawind v2 已經推出囉! 更新到了 Tailwindcss v3 還預設定了 prettier 的 tailwind 插件在專案之中,讓專案可以被 prettier 自動排序 tailwindcss 的 class,以使開發上更加方便順利。

    另外,我推薦使用 Vitawind 文件中提供的 Creator 工具,這樣就可以確保指令無誤且更加的方便快速! (Creator 在新的文件首頁中也有)

    中文文件
    https://v2-vitawind.vercel.app/zh/

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

相關推薦文章

希望您會喜歡
2011 年 7 月 17 日
[應用]Find me by ip 從你的IP開始健診到瀏覽器

Findmebyip是一個很好玩的工具類型網站,透過網站的名稱你頂多知道你可以找到你的IP,但是其實這個網站可 […]

Read More
2014 年 10 月 4 日
[經驗] Nowill Design的作品刊登於Cssawards

Nowill Design 在2013年末最重要的一個作品——Ju Percussion Music Scho […]

Read More
2008 年 7 月 27 日
[思考]創意思考-李奧納多達文西的創意思考法(下)

心智圖(mind map),不免俗的還是要說一下歷史,心智圖是由英國的托尼·博贊(Tony Buzan)於19 […]

Read More
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram