前端相关

Vue3

1.1 介绍

Vue（读音 /vjuː/, 类似于 view）是一款用于构建用户界面的渐进式的JavaScript框架

官网：https://cn.vuejs.org

1.2 常见指令

指令：指的是HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义，可以实现不同的功能。

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-if/v-else-if/v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件

1.3 生命周期
Vue的生命周期：指的是vue对象从创建到销毁的过程。
Vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：
暂时无法在飞书文档外展示此内容
其中我们需要重点关注的是mounted，其他的我们了解即可。
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据
1.4 Vue脚手架
Vue脚手架（Vue CLI）是Vue.js官方提供的一个命令行工具，它可以帮助开发者快速搭建Vue.js项目的初始结构。
1.4.1 项目创建
创建一个工程化的Vue项目，执行命令：
npm create vue@3.4.0

详细步骤说明：

Project name：——————》项目名称，默认值：vue-project，可输入想要的项目名称。
Add TypeScript? —————-》是否加入TypeScript组件？默认值：No。
Add JSX Support? ————–》是否加入JSX支持？默认值：No。
Add Vue Router...————–》是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。
Add Pinia ...———————-》是否添加Pinia组件来进行状态管理？默认值：No。
Add Vitest ...———————》是否添加Vitest来进行单元测试？默认值：No。
Add an End-to-End ...———–》是否添加端到端测试？默认值No。
Add ESLint for code quality? —》是否添加ESLint来进行代码质量检查？默认值：No。

项目创建完成以后，进入vue-demo1 项目目录，执行命令安装当前项目的依赖：npm install

1.4.2 项目结构

1.5 Vue项目开发流程

其中*.vue是Vue项目中的组件文件，在Vue项目中也称为单文件组件（SFC，Single-File Components）。Vue 的单文件组件会将一个组件的逻辑 (JS)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里（*.vue）

1.6 API风格

在 Vue 2 中，组件的逻辑主要通过一个选项式（Options API）的方式组织。

这意味着组件的属性、方法、生命周期钩子等都被定义在一个对象的不同属性中。

<script>
export default{
  data() {
    return {
      count: 0 // 模型变量
    }
  },
  methods: {
    increment: function(){
      this.count++
    }
  },
  mounted() {
    console.log('Vue选项式 mounted.....');
  }
}
</script>

<template>
  <div>
    <input type="button" @click="increment" value="Api Demo1 Count : "> {{ count }}
  </div>
</template>

<style>

</style>

Vue 3 引入了组合式 API（Composition API），这是一种新的编写组件逻辑的方式，它允许开发者更灵活地组织代码。

组合式 API 通过 setup 函数为核心，提供了 ref、reactive、computed、watch 等响应式 API。

<script setup>
import {ref, onMounted, computed} from "vue";
import {useCounterStore} from "@/stores/counter";

// 获取计数器存储
const counterStore = useCounterStore();
counterStore.increment(); // 自增

// 响应式计数器
const count = ref(0);
const maxCount = 1000; // 设置最大值

// 定义自增方法
function increment() {
  if (count.value < maxCount) {
    count.value++;
  }
}

// 计算属性，缓存 store 中的计数器值
const storeCount = computed(() => counterStore.count || 0);

// 组件挂载时的钩子
onMounted(() => {
  console.log("傻逼商科院");
})
</script>

<template>
  <div>
    <input type="button" @click="increment" value="Api Demo1 Count : "> {{ count }}<br>
    {{ storeCount }}
  </div>
</template>

<style>
</style>

setup：是一个标识，告诉Vue需要进行一些处理，让我们可以更简洁的使用组合式API。
ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性 value。
onMounted()：在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。

选项式API的弊端

Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。

组合式API的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。

Vue3中提供了很多的组合式API，当然我们平时开发中使用不了那么多，我们重点讲解几个后面项目常用的API

reactive：能将对象类型变为【响应式】，对简单类型无效（例如 string，number，boolean）
ref：接收简单类型或者对象类型的数据传入并返回一个响应式的对象

reactive与ref二者对比：

都是用来生成响应式数据
不同点
1. reactive不能处理简单类型的数据
2. ref参数类型支持更好，但是必须通过.value做访问修改
3. ref函数内部的实现依赖于reactive函数
在实际工作中的推荐
1. 推荐使用ref函数，减少记忆负担

2. VueRouter

官网：https://router.vuejs.org/zh/
Vue Router：Vue的官方路由。为Vue提供富有表现力、可配置的、方便的路由。
Vue中的路由：路径与组件的对应关系。

比如，我们打开一个网站，点击左侧菜单，地址栏的地址发生变化。地址栏地址一旦发生变化，在主区域显示对应的页面组件。

VueRouter主要由以下三个部分组成，如下所示：

VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
<router-link>：请求链接组件，浏览器会解析成<a>
<router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

2.2 核心配置

在 src/router/index.js 中定义路由表信息，在其中主要是定义请求路径与组件之间的对应关系。

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/element',
      name: 'element',
      component: () => import('../views/Element.vue')
    }
  ]
})

export default router

在浏览器中访问/ —>则会跳转到views/HomeView.vue组件中，这是一个文件目录位置
在浏览器中访问 /about —>则会跳转到views/AboutView.vue组件中，这是一个文件目录位置
其中真正的页面渲染，需要使用到router提供的<RouterView></RouterView>标签
下图是访问的流程图：

3. Pinia

3.1 介绍

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。也就意味着，我们可以使用 Pinia 来存储数据，而这些数据是可以跨组件/页面来访问的。

Store是保存状态和业务逻辑的实体、承载着全局状态。（有点像一个永远存在的组件，每个组件都可以读取数据、存入数据）。

3.2 使用Pinia

在需要获取Pinia数据的视图组件中引入即可

import {useCounterStore}   from "@/stores/counter";
useCounterStore().increment();//自增

console.log(useCounterStore().doubleCount);

4. Element Plus

Element：是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如超链接、按钮、图片、表格等等。

官方网站：https://element-plus.org/zh-CN/#/zh-CN

如下图所示就是我们开发的页面和ElementUI提供的效果对比：可以发现ElementUI提供的各式各样好看的按钮

4.2 快速入门

4.2.1 准备工作

1）安装ElementPlus的组件库（在当前工程的目录下），执行如下命令：

npm install element-plus@2.4.3 –save

2）在main.js 中引入ElementPlus组件库（参照官方文档），最终 main.js 中代码如下：

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import ElementPlus  from 'element-plus'
import 'element-plus/dist/index.css'

import './assets/main.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(ElementPlus)
app.mount('#app')