鱼骨图，花开16朵

前端

2022-12-31 13:58:35

用 Vue 和纯 CSS 轻松绘制鱼骨图：小白也能上手！

鱼骨图是什么？

鱼骨图，又称因果图或石川图，是一种用来分析问题原因的强大工具。它能帮你理清思路，找出问题症结所在。

为什么用 Vue 和纯 CSS？

传统的鱼骨图是用手绘方式绘制的，但随着科技的进步，现在有了许多软件可以简化这一过程。而 Vue，一个流行的前端框架，可以让你轻松创建交互式网页。Vue 中的骨架图组件，利用纯 CSS，提供了创建鱼骨图框架的便利方法。

如何用 Vue 和纯 CSS 构建鱼骨图？

1. 创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目：

vue create fishbone-project

2. 安装骨架图组件

npm install --save vue-skeleton-loader

3. 在 Vue 项目中使用骨架图组件

在 main.js 文件中导入组件：

import Vue from 'vue';
import VueSkeletonLoader from 'vue-skeleton-loader';
Vue.component('vue-skeleton-loader', VueSkeletonLoader);

4. 创建鱼骨图组件

在 src 目录下创建一个名为 Fishbone.vue 的文件，并添加以下代码：

<template>
  <div class="fishbone">
    <div class="content">
      <div class="top-bone">
        <div class="item">原因 1</div>
        <div class="item">原因 2</div>
        <div class="item">原因 3</div>
      </div>
      <div class="middle-bone">
        <div class="item">原因 1.1</div>
        <div class="item">原因 1.2</div>
        <div class="item">原因 1.3</div>
      </div>
      <div class="bottom-bone">
        <div class="item">原因 2.1</div>
        <div class="item">原因 2.2</div>
        <div class="item">原因 2.3</div>
      </div>
    </div>
  </div>
</template>

<style>
.fishbone {
  /* ... */
}
</style>

5. 在 Vue 项目中使用鱼骨图组件

在 App.vue 文件中添加组件：

<template>
  <div>
    <fishbone></fishbone>
  </div>
</template>

<script>
import Fishbone from './components/Fishbone.vue';
export default {
  components: {
    Fishbone,
  },
};
</script>