个人技术总结——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{
      flag : true,
      type : "D"
     }
    }
  }
 
</script>

2. 事件处理
   事件处理器包括内联事件处理器和方法事件处理器，常用的是方法事件处理器，v-on绑定事件，调用方法里面的逻辑进行处理事件响应。

<template>
  <button @click="add"> 点击一下</button>
  <p>{{ count }}</p>
</template>
<script >
export default{
  data(){
    return{
      count:0
     }
    },
    methods:{
      add(){
        this.count ++ ;
      }
    }
  }
</script>

3. 插槽Slots
   slot元素是一个插槽出口，标识父元素提供的插槽内容在哪里被渲染。
   父元素在子元素组件内部插入元素，通过插槽slot控制在子元素中显示。

<template>
 <!--显示组件-->
<SlotBase>
  <div>
    <h3>插槽标题</h3>
    <p>插槽内容</p>
  </div>
</SlotBase>
</template>

<script >
//1、引入组件
import SlotBase from './components/SlotBase.vue';
export default{
  //2.注入组件
  components:{
    SlotBase
  }
  }
 
</script>

子元素通过slot插槽控制显示：

<template>
 <h2>插槽基础</h2>
 <slot></slot>
</template>
   
<script >
 export default{
    data(){
        return{
 
        }
    }
     }
</script>

4. Axios网络应用
   首先在终端使用npm install --save axios指令安装axios，然后把axios全局引用，具体如下,在main.js中将axios挂载到全局：

import { createApp } from 'vue'
import App from './App.vue'
import axios from "axios"
 
// app是vue是vue的实例对象
// 在一个vue项目中，有且只有一个vue实例对象
const app = createApp(App) ;
// 将axios挂在到全局
app.config.globalProperties.$axios = axios
//App是根组件
app.mount('#app');

然后在组件中引用

<template>
<p>{{ id }}</p>
<p>{{ message }}</p>
</template>
 
<script >
export default{
  name:'HelloWold',
  data(){
    return{
      id:"",
      message: ""
    }
  },
  mounted(){
    //get与post请求快捷方案this.$axios.get("https://autumnfish.cn/api/joke").then(res=>{
       this.id =  res.data ;
    })
 
    this.$axios.post("https://autumnfish.cn/api/user/reg",{username:"zhangsan"}).then(res=>{
        this.message = res.data ;
    })
  }
}
</script>

5. Vue引入路配置
   在vue中，我们可以通过vue-router路由管理页面之间的关系。
   第一步：首先在vscode终端使用npm install --save vue-router 命令安装路由。
   第二步：配置独立的路由文件，在src下创建view目录，目录中创建index.js文件

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'tip',
      component: HomeView
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/LoginView.vue')
    },
  ]
})
export default router

第三步，在main.js中引入路由到项目

import { createApp } from 'vue'
import App from './App.vue'
import axios from "axios"
import router from './router';
 
// app是vue是vue的实例对象
// 在一个vue项目中，有且只有一个vue实例对象
const app = createApp(App) ;
// 将axios挂在到全局
app.config.globalProperties.$axios = axios
//App是根组件
app.use(router).mount('#app');

最后是需要指定路由显示入口和路由跳转，如下：

<template>
  <!--路由的显示入口-->
  <router-view></router-view>
  <!--路由跳转-->
  <router-link to="/">首页</router-link>｜
  <router-link to="/about">关于</router-link>
</template>
<script >
import router from './router';
export default{
    data() {
        return {};
    },
    components: { router }
}
</script>

3.技术使用中遇到的问题和解决过程

• 问题1：form表单inline横向布局时，input加了clearable属性后，鼠标移入输入内容宽度会发生变化，失去焦点恢复原始宽度
• 原因：el-input是没有宽度的，实际渲染出来的 el-input宽度 = 原生input宽度 + 前缀图标宽度 + 后缀图标宽度
• 解决：input 的 width设置为215px，刚好等于select框

<el-input v-model="formInline.user" placeholder="Approved" clearable style="width:215px" />

• 问题2: 使用reactive定义的数组，使用push之后，原来push的内容都会变为最后一次的数据
• 原因：因为push的并不是一个值，而是一个地址，数组都指向同一个地址
  每一次push就等同于改变了数组的地址，所以会导致每次都变成了最后push的内容。
• 解决：将push的内容深拷贝一份再push

let table: Table = reactive({
  tableData: []
})
let add = ()=>{
	table.tableData.push(JSON.parse(
	   JSON.stringify(addForm)
	))
}

4.总结

• 使用Vue 3结合Element Plus进行开发，极大地简化了界面构建过程。Element Plus提供的现成组件库，减少了手动编写CSS和JavaScript的工作量，加快了开发速度，并且有助于保持界面的一致性和美观性。但是，这些组件有时可能与特定项目的定制化需求不完全匹配，导致需要对组件进行深入的调整和定制，这样的修改可能会相当复杂，因为它们并非为特定项目量身定制，这可能导致组件的稳定性问题或样式调整上的困难。

• Element Plus组件库虽然功能强大，但并不完美。官方文档和教程通常提供了基础的示例，但在开发更复杂的动态组件时，需要额外的资源和学习。这个过程可能会遇到bug，需要投入更多的时间来解决，这也体现了在某些情况下，直接使用组件库可能不如自定义开发来得高效。

• 总的来说，Vue 3和Element Plus的结合为开发提供了便利，但同时也带来了一定的限制。需要权衡组件库的便利性和自定义开发的灵活性，根据项目的具体需求做出选择。在某些情况下，可能需要对组件库的组件进行调整，或者在必要时进行自定义开发，以实现最佳的用户体验和界面效果。

5.参考文献

Vue3.0官网技术文档
Element-plus技术文档