Vue前端开发2.1 单文件组件

今天我们将一起探索Vue.js中的单文件组件（Single File Component，SFC）概念。单文件组件是Vue.js框架中一种非常强大的组件封装方式，它允许我们将模板、样式和逻辑代码组织在一个.vue文件中，使得组件的开发和管理变得更加高效和方便。

一、单文件组件概念

• 首先，让我们来理解一下什么是单文件组件。在Vue中，一个单文件组件可以包含三个部分：模板（Template）、样式（Style）和逻辑（Script）。这种结构不仅使得代码更加模块化，而且也让我们能够更清晰地看到每个组件的全貌，便于维护和复用。

二、单文件组件构成

1. 模板（Template）

• 这部分代码写在<template>标签中，用于定义组件的DOM结构。

2. 样式（Style）

• 这部分代码写在<style>标签中，用于为组件设置样式。

3. 逻辑（Script）

• 这部分代码写在<script>标签中，用于处理组件的数据和业务逻辑。

三、单文件组件演示

• 我们将通过一个实战案例来演示如何创建和使用单文件组件。

1. 创建Vue项目

• 首先，我们需要创建一个新的Vue项目。
• 打开终端，切换到你的工作目录，然后执行以下命令来创建一个基于Vue的项目

  yarn create vite vue-demo --template vue
  

2. 启动Vue项目

• 创建完成后，进入项目目录，安装依赖，并启动开发服务器

  cd vue-demo
  yarn
  yarn dev
  

• 启动了服务器
  

• 现在，你可以在浏览器中访问http://localhost:5173/来查看项目。

3. 用VS Code打开项目

• 打开VS Code，加载D:\VueProjects\chapter02\vue-demo目录
  

4. 清空样式文件代码

• 为了专注于单文件组件的样式，我们将清空src\style.css文件中的所有代码。
  

5. 创建欢迎组件

• 在components目录下创建一个新的Welcome.vue文件
  

   <template>
     <div class="box">
       <h1>欢迎访问泸州职业技术学院~</h1>
     </div>
   </template>

   <style>
     .box {
       text-align: center;
     }
     h1 {
       color: red;
     }
   </style>

6. 切换页面显示组件

• 最后，我们需要在项目的入口文件中导入并使用我们的Welcome组件。
  

7. 查看欢迎组件效果

• 保存所有更改后，刷新浏览器，你应该能看到我们的欢迎组件在页面上显示。
  

四、实战小结

• 通过今天的课程，你将学会如何在Vue.js中创建和使用单文件组件，以及如何将模板、样式和逻辑组织在一起。这将为你的前端开发带来更高的效率和更好的可维护性。