个人技术总结——Vue3与Element-plus的使用

这个作业属于哪个课程	软件工程
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	课程回顾与总结、个人技术总结
其他参考文献	《构建之法》

一、技术总结

1.技术概述

1.1 使用场景

• 使用 Vue 3 进行前端开发，结合 Element Plus 组件库，快速构建高质量的网页界面。

1.2 学习原因

• Vue 3 引入了Composition API，提供了更灵活的组件编写方式，同时拥有更好的性能和更小的体积。
• Element Plus 作为Vue 3的组件库，继承了Element UI的设计理念，提供了丰富的组件和功能，覆盖了大部分前端开发需求。
• 两者结合，可以极大地提高开发效率，减少开发工作量。

1.3 技术难点

• 学习曲线：对于初次接触Vue 3和Element Plus的开发者来说，需要时间去熟悉Composition API的使用以及Element Plus的组件和API。
• 配置复杂性：在项目中整合Vue 3和Element Plus，可能需要配置一些构建细节和样式主题。
• 社区支持：虽然Vue 3和Element Plus社区正在快速成长，但相比一些成熟的框架，社区支持和资源可能相对有限。

2.技术详述

2.1 安装与配置

1. 安装Vue 3：

npm install vue@next

2. 安装Element Plus：

npm install element-plus --save

3. 在项目中引入Element Plus：

import {
    createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

2.2 使用方法

• 通过npm和下载方式的配置之后，在某个页面可以直接使用组件，无需通过import引入组件。例如下图：

2.3 项目中如何使用该技术

1. 条件渲染
   条件渲染的标签主要有v-if，v-else,v-else-if,v-show等，v-show和v-if的功能类似，都是控制标签是否显示，v-if有较高的切换开销，在切换时，条件区块内的时间监听器和子组件都会被销毁和重建，v-show只有css的display属性会被切换。

<template>
  
  <div v-if="flag">当flag为true的时能看到</div>
  <div v-else>当flag为false的时能看到</div>
  <div v-if="type == 'A'">A</div>
  <div v-else-if="type == 'B'">B</div>
  <div v-else>not A/B</div>
</template>
 
<script >
export default{
     
  data(){
     
    return