用vue脚手架实现一个进度条

在Vue.js中使用脚手架（如Vue CLI）创建一个简单的进度条组件，你可以按照以下步骤操作：

1. **安装依赖**：
首先，你需要安装`vue-cli`并创建一个新的项目。在终端中运行：

   npm install -g @vue/cli
   vue create my-progress-bar-project
   cd my-progress-bar-project

2. **创建组件**：
进入项目目录后，在`src/components`文件夹下创建一个名为`Progress.vue`的新文件。在这个文件里，我们将编写HTML、CSS和JS代码来构建进度条。

<!-- Progress.vue -->
<template>
  <div class="progress">
    <div class="progress-bar" :style="{ width: percentage + '%' }"></div>
  </div>
</template>

<script>
export default {
  name: 'Progress',
  props: {
    value: { type: Number, required: true },
  },
  computed: {
    percentage() {
      return Math.min(Math.max(this.value / 100, 0), 1) * 100;
    }
  }
}
</script>

<style scoped>
.progress {
  position: relative;
  height: 20px;
  background-color: #f5f5f5;
}

.progress-bar {
  height: 100%;
  background-color: #4caf50;
  transition: width 0.3s ease-in-out;
}
</style>

3. **在父组件中使用**：
现在可以在其他组件或模板中引入并使用这个进度条。例如，在`App.vue`或其他需要的地方：

<template>
  <div id="app">
    <Progress :value="progressValue" />
  </div>
</template>

<script>
import Progress from '@/components/Progress.vue';

export default {
  components: {
    Progress,
  },
  data() {
    return {
      progressValue: 60, // 可以通过props动态设置进度值
    };
  },
};
</script>

现在你已经创建了一个基本的Vue进度条组件，可以根据需要调整样式和属性。