點燈坊

失くすものさえない今が強くなるチャンスよ

整合 Vue 3 與 Pico CSS

Sam Xiao's Avatar 2024-02-14

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

pico001

  • 已經順利套上 Pico CSS

Conclusion

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