本文由 简悦 SimpRead 转码， 原文地址 mephisto.cc

Vue3 app whit Bulma CSS framework

有时候需要自己创建一个不那么丑的网站，前端的世界纷繁复杂，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 已成功使用。

非专业前端，如有任何错误，欢迎指正。