如何在Vue3中使用Bulma框架

有時候需要自己創建一個不那麼醜的網站，前端的世界紛繁複雜，Vue 和 Bulma的組合也許能拯救你。個人覺得二者都簡單易用，Bulma UI看起來不賴，社區也不錯，出了問題還能搜索自救。下面這個教程展示瞭如何在一個新建的Vue3項目中使用Bulma。

1. 創建一個Vue3應用

npm init vue@latest

該命令將會安裝並執行 create-vue，它是 Vue 官方的項目腳手架工具。你將會看到一些的可選功能提示：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

學習項目，全部選擇yes，不虧

在項目被創建後，通過以下步驟安裝依賴並啓動開發服務器

cd <your-project-name>
npm install
npm run dev

這樣簡單操作後，你的第一個 Vue3 項目就運行起來了。

2. 安裝bulma

• 安裝Bulma依賴

    npm install --save-dev node-sass sass-loader
  

• 安裝Bulma

    npm install bulma
  

3. 在Vue3項目中引入Bulma

• 在src/assets/main.css文件中，添加：

    /* Bulma Import */
    @import 'bulma/css/bulma.css';
  

• 在src/main.ts中，確認導入了上面的main.css文件，如果用文章前面的方式創建的項目，默認已經包含了。

    import { createApp } from "vue";
    import { createPinia } from "pinia";
  
    import App from "./App.vue";
    import router from "./router";
  
    import "./assets/main.css"; 
  
    const app = createApp(App);
  
    app.use(createPinia());
    app.use(router);
  
    app.mount("#app");
  

  Note: 就是這一行

  import "./assets/main.css";

4. 在about路由中創建按鈕驗證

在src/views/AboutView.vue中添加bulma button測試，代碼如下：

<template>
<div class="about">
    <h1>This is an about page</h1>
    <!-- bulma -->
    <div class="buttons">
    <button class="button is-info">Info</button>
    <button class="button is-success">Success</button>
    <button class="button is-warning">Warning</button>
    <button class="button is-danger">Danger</button>
    </div>
</div>
</template>

<style>
@media (min-width: 1024px) {
.about {
    min-height: 100vh;
    display: flex;
    align-items: center;
}
}
</style>

瀏覽器打開http://localhost:5173/about,結果如圖所示，各種顏色按鈕已經正常顯示，表明bulma已成功使用。

非專業前端，如有任何錯誤，歡迎指正。