2022 年 1 月 1 日

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

本篇目錄

前言

最近的新專案想導入Tailwindcss,主要是希望在團隊合作上可以有個前端共用的framework,降低協作時各寫各的的情況,尤其是我個人的寫法其實比較接近Tailwindcss,所以我在HTML的class name 總是很長,當然有同事跟我反應這樣寫好像很亂很複雜,但我卻覺得這樣才會達到CSS 最少化的情況,減少我們一直重複輸入同樣的CSS,替代成剪短的class name,如果css 架構規劃的好,最終會變成自己的framework,而且幾乎不需要再寫CSS,開發速度會更快,可以把時間花在更重要的事情上,這個想法我已經有4~5年以上了,遺憾的是這4~5年我很少自己開發前端,所以我的想法一直沒有實現,然後這2~3年左右的時間,我從發現Tailwindcss 到等他普遍被使用的這段時間,證明了我的想法是對的,大家逐漸採用或願意試用Tailwindcss,剛好手邊有個新專案,就來紀錄一下我的環境設定吧!除了Tailwindcss 我還會整合pug 與 less 在這個專案上,下次要使用就可以快速生成了。

1.確保你有node.js 與 NPM

我在node.js 與套件版本控管套件 n 這篇裡有描述如何安裝node.js 與npm 的部份,這裡我就不多加描述。

2. 安裝Vitawind

Vitawind 是 vite 與 Tailwindcss的整合包,內建很多template 可以讓你快速建立各種開發起始資料夾結構。是目前就我找到的資料裡,最快速、最簡單可以建立 vue + tailwindcss 開發環境的方法。

請依據你的需求選擇安裝指令:

  • 使用純 javascript 專案 npm init vitawind@latest 專案名稱 -- --pure
  • 使用vue 的專案 npm init vitawind@latest 專案名稱 -- --vue
  • 使用 vue+typescript 的專案 npm init vitawind@latest 專案名稱 -- --vue-ts
  • 使用 react 的專案 npm init vitawind@latest 專案名稱 -- --react
  • 使用 Vue-CLI 的專案 npm init vitawind@latest 專案名稱 -- --vuecli
  • 使用 Vue-CLI 的專案 npm init vitawind@latest 專案名稱 -- --vuecli5
  • 使用 Create React App 的專案 npm init vitawind@latest 專案名稱 -- --cra
  • 使用 Angular 的專案 npm init vitawind@latest 專案名稱 -- --ng

輸入完上訴指令,接下來要切換到專案資料夾 cd 專案名稱

進行安裝程序 npm install

然後啟動 npm run dev

接著用瀏覽器打開畫面上的網址,再來就是恭喜你成功了!有沒有簡單到嚇人?

Vitawind 的詳細文件在這裡 https://vitawind-blog-tw.vercel.app/scaffolding/templates.html

唯一的缺點是Vitawind 整合的是 tailwindcss v2.2.7,而不是最新版的Tailwind。

3.安裝pug 與 less

安裝可以處理pug 與 less 的套件

npm install -D less pug vite-plugin-pug

vite-plugin-pug 是讓 html 可以 <pug src="example.pug"></pug> 的方式在html 裡。

4. 設定pug 與相關使用方式

新增vite.config.js 檔案在更目錄中,貼上一下設定

// vite.config.(js|ts)
import { defineConfig } from "vite"
import pugPlugin from "vite-plugin-pug"
const options = { pretty: true } // FIXME: pug pretty is deprecated!
const locals = { name: "My Pug" }
export default defineConfig({
plugins: [pugPlugin(options, locals)],
})

在src目錄裡新增index.pug,你可以在裡面寫一些pug 內容,或複製以下內容

//- index.pug
h1 Hello World
p I'm a cool Vite project!

接著在index.html 的 body 裡使用 <pug src="index.pug" /> 即可在開發模式下看到引用的pug 內容。

如果有問題請確認你的pug 檔有放在 src 資料夾中。

5. 設定less 相關使用方式

在src 資料夾中新增template.less,然後在Main.js 裡新增import './template.less' 記得在裡面寫一些css,接著你就會在開發模式中看到效果。

另外如果你要在less裡用tailwindcss,記得修改tailwind.config.js,然後在purge的部份新增pug,如下

// const colors = require('tailwindcss/colors')
module.exports = {
mode: 'jit',
purge: ['index.html','./src/*/.{js,jsx,ts,tsx,vue,pug,html}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
plugins: [],
}

結語

使用這個方式開發可以即時瀏覽修改畫面,開發上非常便利,建議直接保留一個開發資料夾,下次指令可以打少一點!最後開發完成的指令是 npm run build , 執行接受後就會看到一個 dist 資料夾,這個就是你要交付的結果了!

文章分類:

3 comments on “使用Vitawind安裝Vite+Tailwindcss+Pug+LESS 開發環境建置”

  1. 你好,我是 Vitawind 的作者,很謝謝你的支持與指教。

    Vitawind 應不少朋友問什麼時候要升級進入 tailwind v3,收到這些訊息後就著手開始進行升級。

    現在,Vitawind v2 推出了! 已經將Tailwind 升級至 v3,也加入了最近推出的 prettier 幫 tailwind 自動排序 class 的設定,以方便大家開發。

    還有,推薦使用 vitawind 文件中附的 Creator,因為這可以讓可以省去不少的時間。

    https://v2-vitawind.vercel.app

發佈留言

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

相關推薦文章

希望您會喜歡
2008 年 5 月 24 日
[網頁]舒摩兒 Summer's Eve 是誰讓妹妹笑了

負責內容:設計+動畫程式 http://www.summer-eve.com/ 舒摩兒 Summer's Ev […]

Read More
2012 年 1 月 22 日
[HTML5]讓比IE9老的IE瀏覽器支援HTML5 - html5shiv

HTML5已經推出一段時間,雖然還有部分尚未完備,但是也推出了許多酷炫的新功能可以使用,但是許多網頁設計師或程 […]

Read More
2008 年 7 月 1 日
[網頁]台灣企銀 - 網路銀行 168轉帳活動

負責內容:設計+動畫 台灣企銀 - 網路銀行 168轉帳活動 首頁flash banner 一隻 台灣企銀網路 […]

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