整合 Vue 3 與 Pico CSS | 點燈坊

Pico CSS 為著名的 Classless CSS，有別於 Tailwind CSS 的 Utility First CSS，他為 Semantic HTML 提供了 Default Style，讓我們在開發時專心於 HTML 與 Vue。

Version

Vue 3.4
Pico CSS 2.0

Install Pico CSS

$ npm install @picocss/pico

• 使用 NPM 安裝 Pico CSS

Vue

main.js

import { createApp } from 'vue'
import App from './App.vue'
import '@picocss/pico/css/pico.min.css'

createApp(App).mount('#app')

Line 3

import '@picocss/pico/css/pico.min.css'

• 引入安裝在 node_modules 的 Pico CSS

App.vue

<template>
  <main class="container">
    <section class="grid">
      <input type="button" value="+" @click="onClick" />
      <h5>{{ count }}</h5>
    </section>
  </main>
</template>

<script setup>
import { ref } from 'vue'

let count = ref(0)
let onClick = () => count.value++
</script>

• 經典的 Counter，只使用 HTML 與 Vue，CSS 則只使用 Pico CSS

• 已經順利套上 Pico CSS

Conclusion

• Pico CSS 也可使用 NPM 安裝，我們只要在 main.js 將 Pico CSS 從 node_modules 目錄下 import，就可在 Vue 內使用
• 僅使用 container 與 grid 兩個 class 負責 layout，其他都由 Pico CSS 對 HTML tag 提供 default style