vue3.0 CLI – 2.1 – component 组件入门教程

Vue3.0 CLI - 2.1 - Component 组件入门教程

在Vue.js之中， Component 是构建任何类型的应用程序的核心概念之一。在本教程中，我会向你展示如何使用Vue3.0 CLI来创建并使用组件。我们将在VueCLI中的模板中构建两个简单的组件，并将它们添加到父级组件中。由此深入了解组件的工作原理。

步骤1：创建Vue3.0项目

首先，我们要使用Vue3.0 CLI创建一个新的Vue项目。请确保在安装Vue3.0 CLI之前已经安装了Node.js和npm。口令：vue create component-tutorial

步骤2： 创建一个子级组件

现在，我们将创建一个简单的HelloWorld子级组件。使用以下命令在项目中生成新的Vue组件: 口令：vue i --save-dev @vue/cli-plugin-babel

<template>
  <div class='hello'>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld", // 组件名称
  props: {
    msg: String, //组件启动时传入的参数
  },
};
</script>

<style>
.hello {
  font-size: 2rem;
}
</style>

步骤3： 创建父级组件

现在，我们将使用父级组件来引用子级组件。我们将在父级组件App.vue中添加HelloWorld组件作为子级组件。使用以下命令更新App.vue:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld :msg="message" />
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      message: "Welcome to Your Vue.js App",
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

步骤4： 运行 Vue3.0 项目

使用以下命令在本地启动Vue3.0：npm run serve

示例1：组件标题大小调整

修改子级组件HelloWorld标题的大小。在组件的<style>标签下添加 h1 标签及属性自定义调整:

<style>
.hello {
  font-size: 2rem;
}
  h1 {
  font-size: 3rem;
  font-weight: bold;
  color: #02B875;
  }
</style>

示例2：组件信息传递

修改父级组件App.vue信息内容，传入到子级组件中。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld :msg="message" :des="`使用Vue3.0构建应用程序.`" />
  </div>
</template>

在子级组件HelloWorld的props属性下，添加des参数：

<template>
  <div class='hello'>
    <h1>{{ msg }}</h1>
    <h3>{{ des }}</h3>
  </div>
</template>

<script>
export default {
  name: "HelloWorld", // 组件名称
  props: {
    msg: String,
    des: String,
  },
};
</script>

<style>
.hello {
  font-size: 2rem;
}

h1 {
  font-size: 3rem;
  font-weight: bold;
  color: #02B875;
}

h3 {
  color: #6264a7;
}
</style>

现在的Vue3.0项目将显示子级组件HelloWorld的标题调整后及信息传播完成的输出。

这是一个非常基础的Vue3.0 CLI - Component 组件入门教程。它将对刚刚接触Vue.js的学习者很有帮助。通过这个简单的教程，您现在应该有一个更好的理解，以便构建和使用组件。