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