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 資料夾,這個就是你要交付的結果了!

文章分類:

發佈留言

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

相關推薦文章

希望您會喜歡
2008 年 4 月 20 日
[appserv] #2003 -伺服器並無回應

  #2003 -伺服器並無回應,這個是安裝在電腦中 appserv2.5.4a 版本前幾天給我的訊息,當時我 […]

Read More
2010 年 2 月 20 日
[教學]BT2.0!在Mac OS上使用Magnet連結

是的,自從P2P發展至今已經非常發達,雖說P2P有他使用的危險(傳說硬碟易壞等等),但是如果小心使用,其實要分 […]

Read More
2012 年 8 月 3 日
[設計]2011年微笑MIT標籤品質驗證制度推廣標章

負責內容:主視覺設計 這是公司去年參與MIT標案時所作的視覺設計提案,不過後來因為標案是第二名所以只好變成飛機 […]

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