如何在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
欢迎关注微信公众号,留言交流。

相关文章:

翻译: