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

在scr資料夾裡新增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 還是比較好啊!

文章分類:

發佈留言

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

相關推薦文章

希望您會喜歡
2009 年 6 月 29 日
[免費]Wild West Pinball 西部荒野大鏢客彈珠檯

如果你非常喜歡玩彈珠檯,你真的不能錯過這款Wild West Pinball彈珠檯遊戲,而且最重要的是他現在式 […]

Read More
2011 年 8 月 24 日
[心得]超速習法 (中) -遺忘與學習-1

上篇說到速習法就是運用一些方法加上速讀來快速學習,速讀是需要時間練習的,練習越多次速度就會跟著越來越快,同樣的 […]

Read More
2008 年 12 月 7 日
[旅行]我的香港之旅(二)

香港自由行,在香港旅遊是非常容易的,一下機場就不得感嘆機場的雄偉,真的非常的大,我朋友跟我說這個機場除了自己一 […]

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