超硬核，vue.js基础教程

步骤一：创建项目（如果还没有 Vue 项目）

首先，确保你已经安装了 Node.js 和 Vue CLI。然后在命令行中执行以下操作来创建一个新的 Vue 项目：

vue create vue-component-tutorial

按照提示选择默认配置或者手动配置（这里我们以默认配置为例）。

步骤二：创建组件文件

在 src/components 目录下创建一个名为 Counter.vue 的文件。

步骤三：编写组件代码

在 Counter.vue 文件中，编写以下代码：

<template>
  <div>
    <h2>计数器：{{ count }}</h2>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
};
</script>

<style scoped>
h2 {
  color: #333;
}
button {
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
</style>

在上述代码中：

• <template> 部分定义了组件的 HTML 结构，展示了当前计数器的值以及两个操作按钮。
• <script> 部分通过 export default 导出一个包含数据 count 和两个方法 increment、decrement 的对象。data 函数返回组件的初始数据，methods 中定义了增加和减少计数器值的方法。
• <style scoped> 部分定义了组件内部的样式，scoped 属性确保样式只应用于当前组件。

步骤四：在其他组件中使用计数器组件

在 src/App.vue 文件中，修改代码如下：

<template>
  <div id="app">
    <Counter></Counter>
  </div>
</template>

<script>
import Counter from './components/Counter.vue';

export default {
  components: {
    Counter
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>

这里我们在 App.vue 中引入了 Counter.vue 组件，并在模板中使用它。

步骤五：运行项目

在命令行中，进入项目目录，执行以下命令启动开发服务器：

npm run serve

然后在浏览器中访问 http://localhost:8080，你将看到计数器组件的界面，点击按钮可以增加或减少计数器的值。