文章目录
- 一、单文件组件概念
- 二、单文件组件构成
- 1. 模板（Template）
- 2. 样式（Style）
- 3. 逻辑（Script）
- 三、单文件组件演示
- 1. 创建Vue项目
- 2. 启动Vue项目
- 3. 用VS Code打开项目
- 4. 清空样式文件代码
- 5. 创建欢迎组件
- 6. 切换页面显示组件
- 7. 查看欢迎组件效果
- 四、实战小结
今天我们将一起探索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中创建和使用单文件组件，以及如何将模板、样式和逻辑组织在一起。这将为你的前端开发带来更高的效率和更好的可维护性。
