如何在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已成功使用。

Vue3 bulma

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

最後修改於: Monday, August 28, 2023

相關文章:

翻譯: