Vue3

Vue3 是 Vue 框架的第三个主要版本，于2020年9月18日发布，代号为 “One Piece”。相较于 Vue2，Vue3 在性能、体积、TypeScript 支持、API 设计等方面都有显著的提升和改变。

首先，Vue3 在性能上进行了重大优化。通过源码的升级，使得打包大小减少了 41%，初次渲染速度提升了 55%，更新渲染速度提升了 133%，内存减少了 54%。此外，Vue3 还对编译和渲染进行了优化，提高了运行时的性能。

其次，Vue3 的体积更小。它采用了模块化架构，可以更灵活地按需引入所需的功能模块，从而减小了打包体积。这使得 Vue3 更适合现代前端项目的需求。

再者，Vue3 引入了新的 Composition API，使得代码的组织更灵活和可复用。与 React Hooks 的概念相似，Composition API 使用纯函数分割复用代码，提高了代码的可维护性。同时，Vue3 也保留了 Options API，使得开发者可以根据自己的需求选择使用哪种 API。

此外，Vue3 对 TypeScript 的支持更好，从底层开始就考虑了对 TypeScript 的友好程度，为开发者提供了更好的类型检查和编辑器支持。

使用 VS Code，需要安装以下插件：

• Vue - Official
• Vue VSCode Snippets
• ESLint：高亮错误，并通过配置自动修复错误
• vue-helper：点击跳转

开始

使用 Vue 官方提供的快速初始化 Vue3 项目的命令行工具 create-vue 创建一个基于 Vue3、Vite（下一代构建工具） 以及可选的 TypeScript 支持的新项目。

首先需要确认 Node 的版本大于 18：

$ node -v
v18.20.2

安装 create-vue 并创建项目：

$ npm init vue@latest

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... vue3-demo1
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是

正在初始化项目 D:\code\vue3-demo1...

项目初始化完成，可执行以下命令：

  cd vue3-demo1
  npm install
  npm run dev

创建完成后，按照最后的提示，切换到项目目录，安装依赖并启动项目：

$ cd vue3-demo1
$ npm install
$ npm run dev

> vue3-demo1@0.0.0 dev
> vite


  VITE v5.2.10  ready in 775 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help  

启动后，即可访问输出的地址，可以看到项目创建并启动成功：

项目目录如下：

vue3-demo1
├── node_modules            依赖的第三方模块
├── public                  公共文件
│   └── favicon.ico         HTML 模板文件
├── src                     项目源代码
│   ├── assets              静态资源文件，如图片、字体等
│   ├── components          Vue 组件
│   ├── App.vue             根组件
│   └── main.js             项目入口文件
├── .gitignore              Git 忽略文件配置
├── index.html         		网站首页
├── jsconfig.json           JS 配置文件
├── package.json            项目配置和依赖
├── package-lock.json       依赖版本锁定文件
├── README.md               项目说明文件
└── vite.config.js          Vite 配置文件

对于项目入口文件 main.js，用于导入 App.vue 根组件，基于 App.vue 创建结构渲染 index.html：

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

// 使用 createApp() 创建实例，使用 mount() 指定挂载点
createApp(App).mount('#app')

对于根组件文件 App.vue，是应用最上层的组件，是所有其他组件的容器，并可能包含一些全局的样式和脚本：

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

相比 Vue2，组件有以下不同：

• 组件内部的 script 和 template 的顺序进行了调整，更方便开发。
• 模板 template 内部不再要求唯一根元素。
• script 标签添加了 setup 标识支持 Composition API。

组合式 API

Vue3 中的组合式 API（Composition API）是一系列 API 的集合，它允许我们使用函数而不是声明选项的方式来书写 Vue 组件。这种 API 设计的主要思想是将组件的逻辑代码和数据进行拆分，将逻辑代码封装为可复用的组合式函数，数据则通过响应式系统来管理。

setup

在 Vue3 中，setup 是一个新的函数，用于组件的初始化和配置。

以下是关于 setup 函数的一些关键点和用法：

• 调用时机：在创建组件实例时，并且在 props 初始化解析完成后，setup 函数会立即调用。即在 beforeCreate 钩子之前调用。
• 内部属性和方法：setup 内部的属性和方法必须通过 return 暴露出来，以便挂载到组件实例上，否则这些属性和方法将无法使用。
• 解构 props：如果需要在 setup 函数中解构 props，可以使用 toRefs 函数。这允许开发者以解构的方式使用 props 中的值，同时保持其响应性。
• context 对象：setup 函数接收两个参数，第一个参数是 props，第二个参数是 context。context 是一个普通的 JavaScript 对象，提供了访问组件实例的其他方法和属性的能力，例如 attrs、slots、emit 等。

在使用 setup 函数时，需要注意以下几点：

• 在 setup 函数内部，不能使用 this 关键字，因为 setup 是在组件实例被创建之前调用的，此时 this 还没有指向组件实例，为 undefined。
• setup 函数返回的对象中的所有属性和方法都将被合并到组件的渲染上下文中，这样它们就可以在模板中直接使用。

为避免使用 setup 后进行 return 操作，可以使用 <script setup> 语法糖简化代码。

<script setup>
    
</script>

reactive 和 ref

在 Vue2 中，只需要把数据放入 data 函数中，便成为响应式数据。在 Vue3 中，数据默认不是响应式的，可以使用 reactive 或者 ref 创建响应式数据。

对于 reactive：

• reactive 函数接收一个普通对象（包括 JSON 数据和数组）并返回该对象的响应式副本。当在响应式对象中修改了一个属性的值时，Vue3 会自动更新对应的 DOM 节点。
• reactive 会递归地将嵌套对象转换为响应式，这意味着对象的内部属性也都会变得响应式。
• 在 Vue 组件中，reactive 对象通常用于存储和管理状态。

使用 reactive 创建响应式数据步骤：

• 从 Vue 中导入 reactive 函数。
• 在 <script setup> 中执行 reactive 函数并传入类型为对象的初始值，并使用变量接收返回值。

<script setup>
// reactive: 接收一个对象类型的数据，返回一个响应式的对象
import { reactive } from "vue";
const state = reactive({
  count: 100
})
</script>

<template>
  <div>
    <div>{{ state.count }}</div>
    <button @click="state.count++">+1</button>
  </div>
</template>

对于 ref：

• ref 函数可以将简单类型或者对象类型的数据转换成一个响应式对象。这个响应式对象具有一个 value 属性，用于存储和访问实际的值。
• 当修改了 ref 创建的响应式对象的 value 属性时，Vue3 会自动更新对应的 DOM 节点。
• ref 在处理基本数据类型（如字符串、数字等）时非常有用，因为它可以确保这些值也是响应式的。
• 除了用于创建响应式数据，ref 还可以用于访问组件实例或 DOM 元素。例如，通过给 DOM 元素设置 ref 属性，并在组件的 setup 函数中通过 ref 函数访问该元素，可以直接操作 DOM 元素。

使用 ref 创建响应式数据步骤：

• 从 Vue 中导入 ref 函数。
• 在 <script setup> 中执行 ref 函数并传入初始值，并使用变量接收返回值。

<script setup>
// ref: 接收简单类型或复杂类型数据，返回一个响应式的对象
// 本质是在原有数据的基础上，包装成复杂类型，再借助 reactive 实现响应式
// 脚本中访问数据需要通过 .value
// 模板中访问数据不需要通过 .value
import { ref } from "vue";
const count = ref(0)
console.log(count.value)
</script>

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="count++">+1</button>
  </div>
</template>

推荐使用 ref 来创建响应式数据。

可以勾选插件配置中的 "Auto-complete Ref value with .value"，可以自动补全 .value。

computed

在 Vue3 的 Composition API 中，可以使用 computed 函数来创建计算属性。

步骤：

• 从 Vue 中导入 computed 函数。
• 向 computed 函数传入回调函数，返回基于响应式数据计算的结果，使用变量接收。

<script setup>
import { ref, computed } from "vue"
const list = ref([1, 2, 3, 4, 5, 6])
const computedList = computed(() => {
  return list.value.filter(item => item > 2)
})
</script>

<template>
  <div>
    <div>原始数据：{{ list }}</div>
    <div>计算后的数据：{{ computedList }}</div>
  </div>
</template>

注意：

• 计算属性中不要进行诸如异步请求，修改 DOM 的操作。
• 计算属性应该是只读的。

watch

在 Vue3 的 Composition API 中，可以使用 watch 观察和响应 Vue 组件中的响应式数据的变化。

步骤：

• 从 Vue 中导入 watch 函数。
• 向 watch 函数传入要监听的响应式对象和回调函数。

监听单个数据的变化：

<script setup>
import { ref, watch } from "vue"

// 创建一个响应式的数据项  
const count = ref(0)
  
// 使用 watch 监听 count 的变化  
watch(count, (newVal, oldVal) => {  
  console.log(`Count changed from ${oldVal} to ${newVal}`);  
  // 在这里执行基于数据变化的逻辑
})
</script>

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="count++">+1</button>
  </div>
</template>

监听多个数据的变化：

<script setup>
import { ref, watch } from "vue"

// 创建一个响应式的数据项  
const count1 = ref(0)
const count2 = ref(0)

const changeCount = () => {
  count1.value++
  count2.value--
}
  
// 使用 watch 监听 count 的变化  
watch([count1, count2], (newArr, oldArr) => {  
  console.log(`Count1 changed from ${oldArr[0]} to ${newArr[0]}`);  
  console.log(`Count2 changed from ${oldArr[1]} to ${newArr[1]}`);  
  // 在这里执行基于数据变化的逻辑
})
</script>

<template>
  <div>
    <div>{{ count1 }}***{{ count2 }}</div>
    <button @click="changeCount">修改</button>
  </div>
</template>

可以看到，watch 的第二个参数是一个回调函数，它会在任何被监听的数据项变化时被调用。这个回调函数接收两个参数：新值和旧值，它们各自也是一个数组，对应被监听的数据项的顺序。

请注意，watch 默认是懒执行的，也就是说它只在数据实际变化时才调用回调函数。如果需要在组件创建时立即执行回调（例如，为了获取初始值），可以传递一个额外的选项对象给 watch，其中包含 immediate: true：

watch(count, (newVal, oldVal) => {  
  // ...  
}, { immediate: true });

watch 还提供了深度监听选项，允许观察响应式对象的嵌套属性。这可以通过在选项对象中设置 deep: true 来实现：

watch(state, (newState, oldState) => {  
  // ...  
}, { deep: true });

请注意，深度监听可能会对性能产生影响，因为它需要递归地遍历对象的所有属性。如果只想精确监听对象的某个属性而不是整个对象，可以直接传递一个返回该属性的函数给 watch 函数。这样，只有当该特定属性发生变化时，回调函数才会被触发。

<script setup>
import { ref, watch } from "vue"

const person = ref({
  name: 'stone',
  age: 18
})
  
watch(
  () => person.value.age,
  (newAge, oldAge) => {
    console.log(`Age changed from ${oldAge} to ${newAge}`)
  }
)
</script>

<template>
  <div>
    <div>{{ person.age }}</div>
    <button @click="person.age++">修改</button>
  </div>
</template>

生命周期函数

Vue3 引入了 Composition API，这导致了生命周期钩子函数的使用方式发生了一些变化。

选项式 API	组合式 API
beforeCreate / created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted

当使用组合式 API 时，可以在每个业务逻辑代码块中分别使用组合式 API 对应的生命周期钩子函数，例如可以有多个 onMounted 函数，按顺序执行。

父子通信

使用组合式 API 时，在使用 <script setup> 的单文件子组件中，props 可以使用 defineProps() 宏来声明。

父组件：

<script setup>
import Test from './components/Test.vue'
import { ref } from "vue";

const count = ref(100)

// 子传父4. 监听自定义事件，处理子组件传递的参数
const handleChangeCount = (value) => {
  count.value -= value
}
</script>

<template>
  <div>
    <div>父组件 - {{ count }}</div>
    <button @click="count++">+1</button>
    <!-- 父传子1. 给子组件添加属性的方式传值 -->
    <!-- 子传父3. 绑定自定义事件，事件名为子组件使用 emit 传递过来的事件名 -->
    <Test message="stonecoding.net" :count="count" @changeCount="handleChangeCount"></Test>
    <div></div>
  </div>
</template>

<style scoped>
</style>

子组件：

<script setup>
// 父传子2. 通过 defineProps 编译器宏接收父组件传递的数据
const props = defineProps({
  message: String,
  count: Number
})
console.log(props.message)
console.log(props.count)

// 子传父1. 通过 defineEmits 编译器宏生成 emit 方法
const emit = defineEmits(['changeCount'])
const sub = () => {
  // 子传父2. 触发自定义事件，并传递参数
  emit('changeCount', 1)
}
</script>

<template>
  <!-- 对于 props 中的数据，模板中可以直接使用 -->
  <div class="son">
    <div>我是子组件 - {{ message }} - {{ count }}</div>
    <button @click="sub">-1</button>
</div>
</template>

<style scoped>
.son {
  border: 1px solid #000;
  padding: 30px;
}
</style>

模板引用

在 Vue3 中，模板引用（Template Refs）提供了一种方式来直接访问 DOM 元素或子组件实例。这在需要直接操作 DOM 或调用子组件方法时非常有用。

在模板中，可以使用 ref 来标识一个元素引用或者组件引用，然后在组件中使用相同的名称来访问这个引用。

父组件：

<script setup>
import Test from './components/Test.vue'
import { onMounted, ref } from "vue";

// 模板引用（获取 DOM 或者组件）
// 1. 调用 ref 函数，生成一个 ref 对象
// 2. 通过 ref 标识，进行绑定 DOM 或者对象到 ref 对象
// 3. 通过 ref 对象.value 即可访问到绑定的元素或者组件（必须在渲染完成后，即挂载完毕后）
const inp = ref(null)

// 生命周期函数钩子 onMounted
onMounted(() => {
  // console.log(inp.value)
  // inp.value.focus()
})

const clickFn = () => {
  inp.value.focus()
}

// ---------------------------
const testRef = ref(null)
const getCom = () => {
  console.log(testRef.value.count)
  testRef.value.sayHi()
}

</script>

<template>
  <div>
    <input ref="inp" type="text">
    <button @click="clickFn">点击让输入框获取焦点</button>
  </div>
  <Test ref="testRef"></Test>
  <button @click="getCom">获取组件</button>
</template>

<style scoped>
</style>

子组件：

<script setup>
  const count = 100
  const sayHi = () => {
    console.log('stonecoding.net')
  }

  // 默认情况下，在 <script setup> 语法糖内部的属性和方法不暴露给父组件访问
  // 可以通过 defineExpose 编译器宏来显式指定在 <script setup> 中要暴露出去的属性和方法
  defineExpose({
    count,
    sayHi
  })
</script>

<template>
  <div>测试的组件 -- {{ count }}</div>
</template>

<style scoped>

</style>

project 和 inject

使用依赖注入 project 和 inject，顶层组件可以向任意的底层组件传递数据和方法，实现跨层组件通信。

顶层组件：

<script setup>
import Center from "./components/Center.vue";
import { provide, ref } from 'vue'

// 1. 跨层传递普通数据
provide('color', 'pink')

// 2. 跨层传递响应式数据
const count = ref(100)
provide('count', count)

// 3. 跨层级传递函数，给底层组件传递可以修改数据的方法
provide('changeCount', (newCount) => {count.value = newCount})
</script>

<template>
  <div>
    <h1>我是顶层组件</h1>
    <button @click="count++">+1</button>
    <Center></Center>
  </div>
</template>

<style lang="less" scoped>

</style>

中间组件：

<script setup>
import Bottom from "./Bottom.vue";

</script>

<template>
  <div>
    <h3>我是中间层组件</h3>
    <Bottom></Bottom>
  </div>
</template>

<style lang="less" scoped>

</style>

底层组件：

<script setup>
import { inject } from 'vue';

const color = inject('color')
const count = inject('count')
const changeCount = inject('changeCount')
</script>

<template>
  <div>
    <h3>我是底层组件 -- {{ color }} -- {{ count }}</h3>
    <button @click="changeCount(1000)">修改</button>
  </div>
</template>

<style lang="less" scoped>

</style>

defineOptions

在 Vue 3.3 中引入了 defineOptions 宏，用于定义 Options API 选项。

<script setup>
defineOptions({
  name: 'TestPage'
})
</script>

defineModel

在 Vue3 中，自定义组件上使用 v-model，相当于传递一个 modelValue 属性，同时触发 update:modelValue 事件。可以使用 defineModel 声明一个双向绑定 prop 来简化父子通信。

父组件：

<script setup>
import Test from "@/components/Test.vue"
import { ref } from "vue"

const txt = ref('123')
</script>

<template>
  <div>
    <Test v-model="txt"></Test>
    {{ txt }}
  </div>
</template>

<style lang="less" scoped>

</style>

子组件：

<script setup>
import { defineModel } from "vue"  
const modelValue = defineModel()
</script>

<template>
  <div>
    <input type="text" :value="modelValue" @input="e => modelValue = e.target.value">
  </div>
</template>

<style scoped>

</style>

Pinia

Pinia 是 Vue 的一个存储库，它允许跨组件/页面共享状态。实际上，Pinia 可以看作是 Vuex 的升级版，以提供更加轻量级、简单易用和灵活的状态管理方案。

开始

安装 Pinia：

$ npm install pinia

修改 main.js，创建一个 Pinia 实例并将其传递给应用：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

使用

在 src/store 目录创建仓库文件，例如 counter.js， 使用 defineStore() 创建 Store 来管理应用程序的状态，为各组件提供数据。

import { ref, computed } from "vue"  
import { defineStore } from 'pinia'

// store 名称建议以 use 开头且以 Store 结尾
// 第一个参数为仓库唯一标识，一般使用仓库文件名
export const useCounterStore = defineStore('counter', () => {
  const count = ref(100)
  const doubleCount = computed(() => count.value * 2)
  const addCount = () => { count.value++ }
  const subCount = () => { count.value-- }
  return { count, doubleCount, addCount, subCount }
})

其中：

• ref() 就是 state 属性
• computed() 就是 getters
• function() 就是 actions

在组件中引入并使用：

根组件：

<script setup>
import TestCom1 from "@/components/TestCom1.vue"
import TestCom2 from "@/components/TestCom2.vue"
import { useCounterStore } from "@/store/counter.js"
const counterStore = useCounterStore()

</script>

<template>
  <div>
    <h3>根组件 -- {{ counterStore.count }} -- {{ counterStore.doubleCount }}</h3>
    <TestCom1></TestCom1>
    <TestCom2></TestCom2>
  </div>
</template>

<style lang="less" scoped>

</style>

子组件1：

<script setup>
import { useCounterStore } from "@/store/counter.js"
const counterStore = useCounterStore()
</script>

<template>
  <div>
    子组件1 -- {{ counterStore.count }} -- {{ counterStore.doubleCount }}
    <button @click="counterStore.addCount">+1</button>
  </div>
</template>

<style lang="less" scoped>

</style>

子组件2：

<script setup>
import { useCounterStore } from "@/store/counter.js"
const counterStore = useCounterStore()
</script>

<template>
  <div>
    子组件2 -- {{ counterStore.count }} -- {{ counterStore.doubleCount }}
    <button @click="counterStore.subCount">-1</button>
  </div>
</template>

<style lang="less" scoped>

</style>

异步

在仓库文件中发起异步请求，获取数据。

先安装 axios：

$ npm install axios

然后创建对应的仓库文件，指定 Action 发起异步请求并存入对应的 State 中：

import { ref, computed } from "vue"  
import { defineStore } from 'pinia'
import axios from "axios"

export const useChannelStore = defineStore('channel', () => {
  const channelList = ref([])
  
  const getList = async () => {
    const { data: { data}} = await axios.get('http://geek.itheima.net/v1_0/channels')
    channelList.value = data.channels
  }
  
  return { channelList, getList }
})

在组件中使用：

<script setup>
import { useChannelStore } from "@/store/channel.js"
const channelStore = useChannelStore()

</script>

<template>
  <div>
    <button @click="channelStore.getList">获取数据</button>
    <ul>
      <li v-for="item in channelStore.channelList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<style lang="less" scoped>

</style>

解构

因为 store 是一个用 reactive 包装的对象，故不需要在 Getters 后面写 .value。就像 setup 中的 props 一样，不能直接对它进行解构。

为了从 store 中提取属性时保持其响应性，需要使用 storeToRefs()。它将为每一个响应式属性创建引用。可以直接从 store 中解构 action，action 不需要响应式。

<script setup>
import { useChannelStore } from "@/store/channel.js"
import { storeToRefs } from "pinia";
const channelStore = useChannelStore()
const { channelList } = storeToRefs(channelStore)
const { getList } = channelStore
</script>

<template>
  <div>
    <button @click="getList">获取数据</button>
    <ul>
      <li v-for="item in channelList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<style lang="less" scoped>

</style>

持久化

可以使用 pinia-plugin-persistedstate 插件持久化 Pinia 的 Store 数据。

安装 pinia-plugin-persistedstate 插件：

$ npm i pinia-plugin-persistedstate

在 main.js 将插件添加到 Pinia 实例上：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.mount('#app')

创建 Store 时，将 persist 选项设置为 true 即可持久化 Store 数据：

import { ref, computed } from "vue"  
import { defineStore } from 'pinia'
import axios from "axios"

export const useChannelStore = defineStore('channel', () => {
  const channelList = ref([])
  
  const getList = async () => {
    const { data: { data}} = await axios.get('http://geek.itheima.net/v1_0/channels')
    channelList.value = data.channels
  }
  
  return { channelList, getList }
},
{
  persist: true,
}
)

该插件的默认配置如下:

• 使用 localStorage 进行存储
• 使用 store.$id 作为默认的键
• 使用 JSON.stringify 及 JSON.parse 进行序列化/反序列化
• 整个 state 默认将被持久化

如何不想使用默认的配置，那么可以将一个对象传递给 Store 的 persist 属性来配置持久化。

import { ref, computed } from "vue"  
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(100)
  const doubleCount = computed(() => count.value * 2)
  const addCount = () => { count.value++ }
  const subCount = () => { count.value-- }
  return { count, doubleCount, addCount, subCount }
},
{
  persist: {
    key: 'my-counter',
    paths: ['count']
  }
}
)

这个 Store 将被持久化存储在 localStorage 中的 my-counter 键中，且只有 count 会被持久化。

项目

创建项目

使用 pnpm 创建 Vue3 项目：

$ pnpm create vue
.../18f13f672f6-3424                     |   +1 +
.../18f13f672f6-3424                     | Progress: resolved 1, reused 0, downloaded 1, added 1, done

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... vue3-big-event-admin
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是

正在初始化项目 D:\code\vue3-big-event-admin...

项目初始化完成，可执行以下命令：

  cd vue3-big-event-admin
  pnpm install
  pnpm format
  pnpm dev

这里选择了 Vue Router，Pinia，ESLint 及 Prettier。

创建完成后，按照最后的提示，切换到项目目录，安装依赖并启动项目：

$ cd vue3-big-event-admin

$ pnpm install
Packages: +156
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 194, reused 0, downloaded 156, added 156, done
node_modules/.pnpm/esbuild@0.20.2/node_modules/esbuild: Running postinstall script, done in 58.5s
node_modules/.pnpm/vue-demi@0.14.7_vue@3.4.25/node_modules/vue-demi: Running postinstall script, done in 57.2s

dependencies:
+ pinia 2.1.7
+ vue 3.4.25
+ vue-router 4.3.2

devDependencies:
+ @rushstack/eslint-patch 1.10.2
+ @vitejs/plugin-vue 5.0.4
+ @vue/eslint-config-prettier 9.0.0
+ eslint 8.57.0 (9.1.1 is available)
+ eslint-plugin-vue 9.25.0
+ prettier 3.2.5
+ vite 5.2.10

Done in 1m 34s

$ pnpm dev

> vue3-big-event-admin@0.0.0 dev D:\code\vue3-big-event-admin
> vite

Port 5173 is in use, trying another one...

  VITE v5.2.10  ready in 1083 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

配置项目

修改 .eslintrc.cjs，配置 ESLint：

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    // prettier 专注于代码的美观度 (格式化工具)
    // 前置：
    // 1. 禁用格式化插件 Prettier - Code formatter
    // 2. 在 VS Code 设置中关闭 Format On Save
    // 3. 安装 ESLint 插件, 并配置保存时自动修复 "source.fixAll": "explicit"
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 100, // 每行宽度至多 100 字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（Win Mac 不一致）
      }
    ],
    // ESLint 关注于规范, 如果不符合规范，报错
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // Vue 组件名称多单词组成（忽略 index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验 (props 解构丢失响应式)
    'no-undef': 'error' // 添加未定义变量错误提示
  },
  // 声明全局变量名，解决直接使用 ElMessage 等组件的报错问题
  globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }
}

然后调整目录，删除不需要的文件，包括：

• 删除 src/assets 目录下的所有文件
• 删除 src/components 目录下的所有文件夹和文件
• 删除 src/views 目录下的文件

修改 src/route/index.js，删除自带的路由规则：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

export default router

修改 App.vue 文件：

<script setup></script>

<template>
  <div></div>
</template>

<style lang="less" scoped></style>

修改 main.js 文件：

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

import App from './App.vue'
import router from './router'

const app = createApp(App)

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

最新新增以下目录：

• src/api
• src/utils

拷贝图片和 SCSS 到 src/assets 目录，并在 main.js 中引入 SCSS 文件：

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

import App from './App.vue'
import router from './router'

import '@/assets/main.scss'

const app = createApp(App)

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

安装 SCSS：

$ pnpm add sass -D

配置路由

import { createRouter, createWebHistory } from 'vue-router'

// createRouter 创建路由实例
// 配置模式：
// 1. createWebHistory：History 模式，地址栏不带 #
// 2. createWebHashHistory: Hash 模式，地址栏带 #
// 其中 import.meta.env.BASE_URL 就是 vite.config.js 中的 base 配置项
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

export default router

由于在 Vue3 的组合式 API 中， <script setup> 下无法使用 this，不能再直接访问 this.$router 或 this.$route。需要分别使用 useRouter 和 useRoute 函数分别获取路由实例和当前路由信息：

<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
console.log(router, route)
</script>

Element Plus

安装 Element Plus 及图标库：

$ pnpm add element-plus @element-plus/icons-vue

安装按需导入插件：

$ pnpm add -D unplugin-vue-components unplugin-auto-import

在 vite.config.js 中配置按需导入插件：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

然后就可以在项目中使用 Element 的组件了，同时还可以直接使用自己创建的位于 src/components 目录下的组件，无需导入。

状态管理

在创建项目的时候，已经选择并安装了 Pinia，还需要安装持久化插件：

$ npm i pinia-plugin-persistedstate

在 main.js 将插件添加到 Pinia 实例上：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

import App from './App.vue'
import router from './router'

import '@/assets/main.scss'

const app = createApp(App)

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

这里以管理用户数据为例，在 src/stores 目录下创建 user.js 仓库文件并持久化数据：

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useUserStore = defineStore(
  'user',
  () => {
    const token = ref(0)
    const setToken = (newToken) => {
      token.value = newToken
    }
    return { token, setToken }
  },
  {
    persist: true
  }
)

在 src/stores 目录下创建 index.js，将 main.js 中与 Pinia 相关的代码拆分到 index.js 中：

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

再在 main.js 中引入并使用 Pinia：

import { createApp } from 'vue'

import App from './App.vue'
import router from './router'
import pinia from './stores'

import '@/assets/main.scss'

const app = createApp(App)

app.use(pinia)
app.use(router)
app.mount('#app')

在 src/stores 下创建 modules 目录，在此目录下创建仓库文件，然后在 src/stores/index.js 中统一导出 modeules 目录下的仓库文件 ：

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

export * from './modules/user'

这样组件文件中就可以都从 src/stores/index.js 中引入了：

<script setup>
import { useUserStore } from "@/stores";
const userStore = useUserStore()
</script>

请求配置

安装 Axios：

$ pnpm i axios

在 src/utils 下创建 request.js，配置 Axios 模块：

import axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'
const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  // 基础地址，超时时间
  baseURL,
  timeout: 10000
})

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 携带 Token
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = userStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

// 响应拦截器
instance.interceptors.response.use(
  (res) => {
    // 处理业务成功
    if (res.data.code === 0) {
      return res
    }
    // 处理业务失败，给错误提示，抛出错误
    ElMessage.error(res.data.message || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    // 错误的特殊情况 => 401 权限不足 或 Token 过期 => 拦截到登录
    if (err.response?.status === 401) {
      router.push('/login')
    }

    // 错误的默认情况 => 只要给提示
    ElMessage.error(err.response.data.message || '服务异常')
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }

Axios 的响应体如下：

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 请求的配置信息
  config: {},

  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

路由设计

根据业务规划路由：

path	文件	功能	组件名	路由级别
/login	views/login/LoginPage.vue	登录&注册	LoginPage	一级路由
/	views/layout/LayoutContainer.vue	布局架子	LayoutContainer	一级路由
├─ /article/manage	views/article/ArticleManage.vue	文章管理	ArticleManage	二级路由
├─ /article/channel	views/article/ArticleChannel.vue	频道管理	ArticleChannel	二级路由
├─ /user/profile	views/user/UserProfile.vue	个人详情	UserProfile	二级路由
├─ /user/avatar	views/user/UserAvatar.vue	更换头像	UserAvatar	二级路由
├─ /user/password	views/user/UserPassword.vue	重置密码	UserPassword	二级路由

在 src/route/index.js 中配置路由规则：

import { createRouter, createWebHistory } from 'vue-router'

// createRouter 创建路由实例
// 配置模式：
// 1. createWebHistory：History 模式，地址栏不带 #
// 2. createWebHashHistory: Hash 模式，地址栏带 #
// 其中 import.meta.env.BASE_URL 就是 vite.config.js 中的 base 配置项
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/login', component: () => import('@/views/login/LoginPage.vue') },
    {
      path: '/',
      component: () => import('@/views/layout/LayoutContainer.vue'),
      redirect: '/article/manage',
      children: [
        {
          path: '/article/manage',
          component: () => import('@/views/article/ArticleManage.vue')
        },
        {
          path: '/article/channel',
          component: () => import('@/views/article/ArticleChannel.vue')
        },
        {
          path: '/user/profile',
          component: () => import('@/views/user/UserProfile.vue')
        },
        {
          path: '/user/avatar',
          component: () => import('@/views/user/UserAvatar.vue')
        },
        {
          path: '/user/password',
          component: () => import('@/views/user/UserPassword.vue')
        }
      ]
    }
  ]
})

export default router

修改 App.vue 组件，添加路由出口，并对其中的 Element Plus 组件指定语言：

<script setup>
import zhCn from 'element-plus/es/locale/lang/zh-cn.mjs'
</script>

<template>
  <div>
    <!-- Element Plus 的中文设置 -->
    <el-config-provider :locale="zhCn">
      <router-view></router-view>
    </el-config-provider>
  </div>
</template>

<style lang="less" scoped></style>

注册登录

功能需求：

• 静态模块及基本切换
• 注册功能，包括校验及注册
• 登录功能，包括校验，登录及 Token 存取

在 src/api/user.js 中创建用户请求模块，向后端接口发起注册和登录请求：

import request from '@/utils/request'

// 注册接口
export const userRegisterService = ({ username, password, repassword }) => request.post('/api/reg', { username, password, repassword })

// 登录接口
export const userLoginService = ({ username, password }) => request.post('/api/login', { username, password })

在 src/stores/modules/user.js 中创建用户数据仓库，用于管理并持久化用户 Token：

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useUserStore = defineStore(
  'user',
  () => {
    const token = ref(0)
    const setToken = (newToken) => {
      token.value = newToken
    }
    return { token, setToken }
  },
  {
    persist: true
  }
)

在 src/stores/index.js 中统一导出：

export * from './modules/user'

在 src/views/login/LoginPage.vue 中创建注册登录页面：

<script setup>
import { userRegisterService, userLoginService } from '@/api/user.js'
import { User, Lock } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import { useUserStore } from '@/stores/index'
import { useRouter } from 'vue-router'
const isRegister = ref(false)
const form = ref()

// 用于提交的 form 数据对象
const formModel = ref({
  username: '',
  password: '',
  repassword: ''
})
// 整个表单的校验规则
// 1. 非空校验 required: true，message：消息提示，trigger：触发校验的时机，包括 blur change
// 2. 长度校验 min:xx, max: xx
// 3. 正则校验 pattern: 正则规则，其中 \S 为非空字符
// 4. 自定义校验 => 自己写逻辑校验 (校验函数)
//    validator: (rule, value, callback)
//    (1) rule  当前校验规则相关的信息
//    (2) value 所校验的表单元素目前的表单值
//    (3) callback 无论成功还是失败，都需要 callback 回调
//        - callback() 校验成功
//        - callback(new Error(错误信息)) 校验失败
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '用户名必须是 5-10 位的字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是 6-15 位的非空字符',
      trigger: 'blur'
    }
  ],
  repassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是 6-15 位的非空字符',
      trigger: 'blur'
    },
    {
      validator: (rule, value, callback) => {
        // 判断 value 和当前 form 中收集的 password 是否一致
        if (value !== formModel.value.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback() // 就算校验成功，也需要 callback
        }
      },
      trigger: 'blur'
    }
  ]
}

const register = async () => {
  // 注册成功之前，先进行校验，校验成功 → 请求，校验失败 → 自动提示
  await form.value.validate()
  await userRegisterService(formModel.value)
  ElMessage.success('注册成功')
  isRegister.value = false
}

const userStore = useUserStore()
const router = useRouter()
const login = async () => {
  await form.value.validate()
  const res = await userLoginService(formModel.value)
  userStore.setToken(res.data.token)
  ElMessage.success('登录成功')
  router.push('/')
}

// 切换的时候，重置表单内容
watch(isRegister, () => {
  formModel.value = {
    username: '',
    password: '',
    repassword: ''
  }
})
</script>

<template>
  <!--
    1. 结构相关
      el-row    表示一行，一行分成 24 份
        el-col  表示列
        （1）:span="12"  代表在一行中，占 12 份 （50%）
        （2）:span="6"   代表在一行中，占 6 份  （25%）
        （3）:offset="3" 代表在一行中，左侧 margin 的份数
          
          el-form       整个表单组件
          el-form-item  表单的一行，即一个表单域
          el-input      表单元素

    2. 校验相关
      el-form :model="formModel"              绑定整个 form 的数据对象
      el-form :rules="rules"                  绑定整个 form 的规则对象
      el-form-item prop="username"            给表单元素绑定 rules 中的对应校验规则
      表单元素 v-model="formModel.username"    给表单元素绑定 form 的子属性

    -->
  <el-row class="login-page">
    <el-col :span="12" class="bg"></el-col>
    <el-col :span="6" :offset="3" class="form">
      <el-form :model="formModel" :rules="rules" ref="form" size="large" autocomplete="off" v-if="isRegister">
        <el-form-item>
          <h1>注册</h1>
        </el-form-item>
        <el-form-item prop="username">
          <el-input v-model="formModel.username" :prefix-icon="User" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="formModel.password" :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input v-model="formModel.repassword" :prefix-icon="Lock" type="password" placeholder="请输入再次密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="register" class="button" type="primary" auto-insert-space> 注册 </el-button>
        </el-form-item>
        <el-form-item class="flex">
          <el-link type="info" :underline="false" @click="isRegister = false"> ← 返回 </el-link>
        </el-form-item>
      </el-form>
      <el-form :model="formModel" :rules="rules" ref="form" size="large" autocomplete="off" v-else>
        <el-form-item>
          <h1>登录</h1>
        </el-form-item>
        <el-form-item prop="username">
          <el-input v-model="formModel.username" :prefix-icon="User" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="formModel.password" name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item class="flex">
          <div class="flex">
            <el-checkbox>记住我</el-checkbox>
            <el-link type="primary" :underline="false">忘记密码？</el-link>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
        </el-form-item>
        <el-form-item class="flex">
          <el-link type="info" :underline="false" @click="isRegister = true"> 注册 → </el-link>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.login-page {
  height: 100vh;
  background-color: #fff;

  .bg {
    background:
      url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
      url('@/assets/login_bg.jpg') no-repeat center / cover;
    border-radius: 0 20px 20px 0;
  }

  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;

    .title {
      margin: 0 auto;
    }

    .button {
      width: 100%;
    }

    .flex {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>

首页

功能需求：

• 基本结构
• 登录访问拦截
• 用户基本信息获取及渲染
• 退出功能及确认框

在 src/route/index.js 中配置路由守卫，拦截未登录的访问：

// 登录访问拦截 => 默认是直接放行的
// 根据返回值决定，是放行还是拦截
// 返回值：
// 1. undefined / true  直接放行
// 2. false 拦回 from 的地址页面
// 3. 具体路径 或 路径对象  拦截到对应的地址
// '/login'   { name: 'login' }
router.beforeEach((to) => {
  // 如果没有 token, 且访问的是非登录页，拦截到登录，其他情况正常放行
  const useStore = useUserStore()
  if (!useStore.token && to.path !== '/login') return '/login'
})

在 src/api/user.js 中创建用户信息相关接口：

// 获取用户基本信息
export const userGetInfoService = () => request.get('/my/userinfo')

// 修改用户信息
export const userUpdateInfoService = ({ id, nickname, email }) => request.put('/my/userinfo', { id, nickname, email })

// 上传头像
export const userUploadAvatarService = (avatar) => request.patch('/my/update/avatar', { avatar })

// 重置密码
export const userUpdatePassService = ({ old_pwd, new_pwd, re_pwd }) => request.patch('/my/updatepwd', { old_pwd, new_pwd, re_pwd })

在 src/stores/modules/user.js 中增加用户信息数据：

import { ref } from 'vue'
import { defineStore } from 'pinia'
import { userGetInfoService } from '@/api/user'

export const useUserStore = defineStore(
  'user',
  () => {
    const token = ref(0)
    const setToken = (newToken) => {
      token.value = newToken
    }
    const removeToken = () => {
      token.value = ''
    }

    const user = ref({})
    const getUser = async () => {
      const res = await userGetInfoService()
      user.value = res.data.data
    }
    const setUser = (obj) => {
      user.value = obj
    }
    return { token, setToken, removeToken, user, getUser, setUser }
  },
  {
    persist: true
  }
)

在 src\views\layout\LayoutContainer.vue 中创建首页左侧菜单及顶部菜单：

<script setup>
import { Management, Promotion, UserFilled, User, Crop, EditPen, SwitchButton, CaretBottom } from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
import { onMounted } from 'vue'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
const userStore = useUserStore()
const router = useRouter()

onMounted(() => {
  userStore.getUser()
})

const handleCommand = async (key) => {
  if (key === 'logout') {
    // 退出操作
    await ElMessageBox.confirm('你确认要进行退出么', '温馨提示', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })

    // 清除本地的数据 (token + user 信息)
    userStore.removeToken()
    userStore.setUser({})
    router.push('/login')
  } else {
    // 跳转操作
    router.push(`/user/${key}`)
  }
}
</script>

<template>
  <!-- 
    el-menu 整个菜单组件
      :default-active="$route.path"  配置默认高亮的菜单项
      router  router选项开启，el-menu-item 的 index 就是点击跳转的路径

    el-menu-item 菜单项
      index="/article/channel" 配置的是访问的跳转路径，配合 default-active 的值，实现高亮
  -->
  <el-container class="layout-container">
    <el-aside width="200px">
      <div class="el-aside__logo"></div>
      <el-menu active-text-color="#ffd04b" background-color="#232323" :default-active="$route.path" text-color="#fff" router>
        <el-menu-item index="/article/channel">
          <el-icon><Management /></el-icon>
          <span>文章分类</span>
        </el-menu-item>
        <el-menu-item index="/article/manage">
          <el-icon><Promotion /></el-icon>
          <span>文章管理</span>
        </el-menu-item>
        <el-sub-menu index="/user">
          <!-- 多级菜单的标题 - 具名插槽 title -->
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>个人中心</span>
          </template>
          <!-- 展开的内容 - 默认插槽 -->
          <el-menu-item index="/user/profile">
            <el-icon><User /></el-icon>
            <span>基本资料</span>
          </el-menu-item>
          <el-menu-item index="/user/avatar">
            <el-icon><Crop /></el-icon>
            <span>更换头像</span>
          </el-menu-item>
          <el-menu-item index="/user/password">
            <el-icon><EditPen /></el-icon>
            <span>重置密码</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div>
          黑马程序员：<strong>{{ userStore.user.nickname || userStore.user.username }}</strong>
        </div>
        <el-dropdown placement="bottom-end" @command="handleCommand">
          <!-- 展示给用户，默认看到的 -->
          <span class="el-dropdown__box">
            <el-avatar :src="userStore.user.user_pic || avatar" />
            <el-icon><CaretBottom /></el-icon>
          </span>

          <!-- 折叠的下拉部分 -->
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile" :icon="User">基本资料</el-dropdown-item>
              <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
              <el-dropdown-item command="password" :icon="EditPen">重置密码</el-dropdown-item>
              <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>大事件 ©2023 Created by 黑马程序员</el-footer>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  .el-aside {
    background-color: #232323;
    &__logo {
      height: 120px;
      background: url('@/assets/logo.png') no-repeat center / 120px auto;
    }
    .el-menu {
      border-right: none;
    }
  }
  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-dropdown__box {
      display: flex;
      align-items: center;
      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }
  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
</style>

文章分类

功能需求：

• 基本结构
• 文章分类渲染及 Loading 处理
• 文章分类添加及编辑对话框
• 文章分类删除

在 src\components 目录下封装 PageContainer.vue 组件，构建右侧的容器：

<script setup>
defineProps({
  title: {
    required: true,
    type: String
  }
})
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>{{ title }}</span>
        <div class="extra">
          <slot name="extra"></slot>
        </div>
      </div>
    </template>
    <slot></slot>
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>

在 src\api\article.js 中创建文章分类相关接口：

import request from '@/utils/request'
// 分类----------------------------------------------------------
// 分类：获取文章分类
export const artGetChannelsService = () => request.get('/my/cate/list')

// 添加文章分类
export const artAddChannelService = (data) => request.post('/my/cate/add', data)

// 编辑文章分类
export const artEditChannelService = (data) => request.put('/my/cate/info', data)

// 删除文章分类
export const artDelChannelService = (id) =>
  request.delete('/my/cate/del', {
    params: { id }
  })

在 src\views\article\components 目录下封装 ChannelEdit.vue，用于添加和编辑文章分类的对话框：

<script setup>
import { ref } from 'vue'
import { artAddChannelService, artEditChannelService } from '@/api/article'
const dialogVisible = ref(false)
const formModel = ref({
  cate_name: '',
  cate_alias: ''
})
const formRef = ref()

const rules = {
  cate_name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    {
      pattern: /^\S{1,10}$/,
      message: '分类名必须是 1-10 位的非空字符',
      trigger: 'blur'
    }
  ],
  cate_alias: [
    { required: true, message: '请输入分类别名', trigger: 'blur' },
    {
      pattern: /^[a-zA-Z0-9]{1,15}$/,
      message: '分类别名必须是 1-15 位的字母或数字',
      trigger: 'blur'
    }
  ]
}

// 组件对外暴露方法 open，基于传来的参数，区分添加还是编辑
// open({}) 表单无需渲染，说明是添加
// open({id, cate_name, ...}) 表单需要渲染，说明是编辑
// open 调用后，需要打开对话框
const open = (row) => {
  dialogVisible.value = true
  formModel.value = { ...row } //添加 -> 重置了表单内容，编辑 -> 存储了需要回显的数据
}

// 向外暴露方法
defineExpose({
  open
})

const emit = defineEmits(['success'])

const onSubmit = async () => {
  await formRef.value.validate()
  formModel.value.id ? await artEditChannelService(formModel.value) : await artAddChannelService(formModel.value)
  ElMessage({
    type: 'success',
    message: formModel.value.id ? '编辑成功' : '添加成功'
  })
  dialogVisible.value = false
  emit('success')
}
</script>
<template>
  <el-dialog v-model="dialogVisible" :title="formModel.id ? '编辑分类' : '添加分类'" width="30%">
    <el-form ref="formRef" :model="formModel" :rules="rules" label-width="100px" style="padding-right: 30px">
      <el-form-item label="分类名称" prop="cate_name">
        <el-input v-model="formModel.cate_name" minlength="1" maxlength="10"></el-input>
      </el-form-item>
      <el-form-item label="分类别名" prop="cate_alias">
        <el-input v-model="formModel.cate_alias" minlength="1" maxlength="15"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button @click="onSubmit" type="primary"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

最后在 src\views\article\ArticleChannel.vue 组件中渲染文章分类数据，引用 PageContainer.vue 和 ChannelEdit.vue 组件：

<script setup>
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { artGetChannelsService, artDelChannelService } from '@/api/article'
import ChannelEdit from './components/ChannelEdit.vue'
const channelList = ref([])
const loading = ref(false)
const dialog = ref()
const getChannelList = async () => {
  loading.value = true
  const res = await artGetChannelsService()
  channelList.value = res.data.data
  loading.value = false
}
getChannelList()

const onAddChannel = () => {
  dialog.value.open({})
}
const onEditChannel = (row) => {
  dialog.value.open(row)
}
const onDelChannel = async (row) => {
  await ElMessageBox.confirm('你确认删除该分类信息吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  await artDelChannelService(row.id)
  ElMessage({ type: 'success', message: '删除成功' })
  getChannelList()
}
</script>
<template>
  <page-container title="文章分类">
    <template #extra>
      <el-button @click="onAddChannel">添加分类</el-button>
    </template>
    <el-table v-loading="loading" :data="channelList" style="width: 100%">
      <el-table-column label="序号" width="100" type="index"> </el-table-column>
      <el-table-column label="分类名称" prop="cate_name"></el-table-column>
      <el-table-column label="分类别名" prop="cate_alias"></el-table-column>
      <el-table-column label="操作" width="100">
        <!-- row 就是 channelList 的每一项 -->
        <template #default="{ row }">
          <el-button :icon="Edit" circle plain type="primary" @click="onEditChannel(row)"></el-button>
          <el-button :icon="Delete" circle plain type="danger" @click="onDelChannel(row)"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <ChannelEdit ref="dialog" @success="getChannelList()" />
  </page-container>
</template>

<style lang="scss" scoped></style>

文章管理

功能需求：

• 文章列表渲染，包括搜索和分页
• 添加文章，包括抽屉，图片预览上传及富文本
• 编辑文章
• 删除文章

在 src\api\article.js 中创建文章管理相关接口：

// 文章----------------------------------------------------------
// 获取文章列表
export const artGetListService = (params) =>
  request.get('/my/article/list', {
    params
  })
// 文章：添加文章
// 注意：data 需要是一个 fromData 格式的对象
export const artPublishService = (data) => request.post('/my/article/add', data)

// 获取文章详情数据
export const artGetDetailService = (id) => request.get('/my/article/info', { params: { id } })

// 修改文章
export const artEditService = (data) => request.put('my/article/info', data)

// 删除
export const artDelService = (id) => request.delete('my/article/info', { params: { id } })

创建 src\views\article\components\ChannelSelect.vue 组件，封装下拉框：

<script setup>
import { artGetChannelsService } from '@/api/article.js'
import { ref } from 'vue'
/* defineProps({
  cid: {
    type: [Number, String]
  }
})

const emit = defineEmits(['update:cid']) */
defineProps({
  modelValue: {
    type: [Number, String]
  },
  width: {
    type: String,
    default: '240px'
  }
})

const emit = defineEmits(['update:modelValue'])

const channelList = ref([])
const getChannelList = async () => {
  const res = await artGetChannelsService()
  channelList.value = res.data.data
}
getChannelList()
</script>
<template>
  <!-- label 展示给用户看，value收集交给后台 -->
  <el-select :modelValue="modelValue" @update:modelValue="emit('update:modelValue', $event)" :style="{ width }">
    <el-option v-for="channel in channelList" :key="channel.id" :label="channel.cate_name" :value="channel.id"></el-option>
  </el-select>
</template>

创建 src\utils\format.js 用于格式化日期时间：

import { dayjs } from 'element-plus'

export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD日')

创建 src\views\article\components\ArticleEdit.vue 组件，使用抽屉组件添加和编辑文章，包括图片上传预览和富文本编辑器：

<script setup>
import { ref } from 'vue'
import ChannelSelect from './ChannelSelect.vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { artPublishService, artGetDetailService, artEditService } from '@/api/article.js'
import { baseURL } from '@/utils/request'
import axios from 'axios'

// 控制抽屉显示隐藏
const visibleDrawer = ref(false)

// 表单默认数据
const defaultForm = {
  title: '',
  cate_id: '',
  cover_img: '',
  content: '',
  state: ''
}

// 表单数据
const formModel = ref({ ...defaultForm })

// 图片本地预览
const imgUrl = ref('')
const onSelectFile = (uploadFile) => {
  // 预览图片
  imgUrl.value = URL.createObjectURL(uploadFile.raw)
  // 将图片存入 formModel.value.cover_img 用于提交
  formModel.value.cover_img = uploadFile.raw
}
const editorRef = ref()

// 组件对外暴露方法 open，基于传来的参数，区分添加还是编辑
// open({}) 表单无需渲染，说明是添加
// open({id, ..., ...}) 表单需要渲染，说明是编辑
// open 调用后，打开抽屉
const open = async (row) => {
  visibleDrawer.value = true
  if (row.id) {
    // row.id 有值，表示编辑，需要获取对应的数据进行回显
    const res = await artGetDetailService(row.id)
    formModel.value = res.data.data
    // 单独处理图片的回显
    imgUrl.value = baseURL + formModel.value.cover_img
    // 注意：提交给后台，需要的数据格式，是 file 对象格式
    // 需要将网络图片地址 => 转换成 file 对象，存储起来, 将来便于提交
    const file = await imageUrlToFileObject(imgUrl.value, formModel.value.cover_img)
    formModel.value.cover_img = file
  } else {
    // row.id 为空，表示添加
    // 重置表单数据为默认数据
    formModel.value = { ...defaultForm }
    // 重置图片
    imgUrl.value = ''
    // 重置富文本输入框
    editorRef.value.setHTML('')
  }
}
defineExpose({
  open
})

const emit = defineEmits(['success'])
// 提交
const onPublish = async (state) => {
  // 将已发布还是草稿状态，存入 state
  formModel.value.state = state
  // 将普通对象转换为 formData 数据
  const fd = new FormData()
  for (let key in formModel.value) {
    fd.append(key, formModel.value[key])
  }

  // 根据操作类型发送请求
  if (formModel.value.id) {
    // 编辑操作
    await artEditService(fd)
    ElMessage.success('编辑成功')
    visibleDrawer.value = false
    emit('success', 'edit')
  } else {
    // 添加操作
    await artPublishService(fd)
    ElMessage.success('添加成功')
    visibleDrawer.value = false
    // 通知父组件添加成功
    emit('success', 'add')
  }
}

// 将网络图片地址转换为 File 对象的函数
async function imageUrlToFileObject(imageUrl, filename) {
  try {
    // 使用 Axios 下载图片数据
    const response = await axios.get(imageUrl, { responseType: 'arraybuffer' })

    // 将下载的数据转换成 Blob 对象
    const blob = new Blob([response.data], {
      type: response.headers['content-type']
    })

    // 创建 File 对象
    const file = new File([blob], filename, {
      type: response.headers['content-type']
    })

    return file
  } catch (error) {
    console.error('Error converting image URL to File object:', error)
    return null
  }
}
</script>

<template>
  <!-- 抽屉 -->
  <el-drawer v-model="visibleDrawer" :title="formModel.id ? '编辑文章' : '添加文章'" direction="rtl" size="50%">
    <!-- 发表文章表单 -->
    <el-form :model="formModel" ref="formRef" label-width="100px">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="formModel.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="文章分类" prop="cate_id">
        <channel-select v-model="formModel.cate_id" width="100%"></channel-select>
      </el-form-item>
      <el-form-item label="文章封面" prop="cover_img">
        <!-- 此处需要关闭 el-upload 自动上传，只需要做前端的本地预览图片 -->
        <el-upload class="avatar-uploader" :auto-upload="false" :show-file-list="false" :on-change="onSelectFile">
          <!-- 如果有图片，则渲染图片 -->
          <img v-if="imgUrl" :src="imgUrl" class="avatar" />
          <!-- 如果没有图片，则渲染 + 号 -->
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="文章内容" prop="content">
        <div class="editor">
          <!-- 富文本编辑器 -->
          <quill-editor ref="editorRef" theme="snow" v-model:content="formModel.content" contentType="html"> </quill-editor>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button @click="onPublish('已发布')" type="primary">发布</el-button>
        <el-button @click="onPublish('草稿')" type="info">草稿</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}
.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>

创建 src\views\article\ArticleManage.vue 组件，展示，添加，编辑和删除文章：

<script setup>
import { Delete, Edit } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { ref } from 'vue'
import ChannelSelect from './components/ChannelSelect.vue'
import ArticleEdit from './components/ArticleEdit.vue'
import { artGetListService, artDelService } from '@/api/article.js'
import { formatTime } from '@/utils/format.js'
const articleList = ref([]) //列表
const total = ref(0) //总数
const loading = ref(false)
const articleEditRef = ref()
// 定义请求参数对象
const params = ref({
  pagenum: 1,
  pagesize: 5,
  cate_id: '',
  state: ''
})

// 获取列表
const getArticleList = async () => {
  loading.value = true
  const res = await artGetListService(params.value)
  articleList.value = res.data.data
  total.value = res.data.total
  loading.value = false
}
getArticleList()

// 分页
const onSizeChange = (size) => {
  params.value.pagenum = 1
  params.value.pagesize = size
  getArticleList()
}
const onCurrentChange = (page) => {
  params.value.pagenum = page
  getArticleList()
}
// 编辑新增逻辑
const onAddArticle = () => {
  articleEditRef.value.open({})
}
// 编辑
const onEditArticle = (row) => {
  articleEditRef.value.open(row)
}
// 删除
const onDeleteArticle = async (row) => {
  await ElMessageBox.confirm('你确认删除该文章信息吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  await artDelService(row.id)
  ElMessage({ type: 'success', message: '删除成功' })
  getArticleList()
}

// 搜索
const onSearch = () => {
  params.value.pagenum = 1
  getArticleList()
}
// 重置
const onReset = () => {
  params.value.pagenum = 1
  params.value.cate_id = ''
  params.value.state = ''
  getArticleList()
}

// 添加或编辑，成功的回调
const onSuccess = (type) => {
  if (type === 'add') {
    // 如果是添加，跳转渲染最后一页
    //  Math.ceil 向上取整
    const lastPage = Math.ceil((total.value + 1) / params.value.pagesize)
    // 更新成最大页码数，再渲染
    params.value.pagenum = lastPage
    getArticleList()
  } else {
    // 如果是编辑，直接渲染当前页
    getArticleList()
  }
}
</script>
<template>
  <page-container title="文章管理">
    <template #extra>
      <el-button @click="onAddArticle">添加文章</el-button>
    </template>

    <!-- 表单 -->
    <el-form inline>
      <el-form-item label="文章分类：">
        <!-- Vue2 => v-model :value 和 @input 的简写 -->
        <!-- Vue3 => v-model :modelValue 和 @updeta:modelValue 的简写 -->
        <channel-select v-model="params.cate_id"></channel-select>

        <!-- Vue3 => v-model:cid  :cid 和 @update:cid 的简写 -->
        <!-- <channel-select v-model:cid="params.cate_id"></channel-select> -->
      </el-form-item>
      <el-form-item label="发布状态：">
        <el-select style="width: 240px" v-model="params.state">
          <el-option label="已发布" value="已发布"></el-option>
          <el-option label="草稿" value="草稿"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSearch" type="primary">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="articleList" style="width: 100%">
      <el-table-column label="文章标题" width="400">
        <template #default="{ row }">
          <el-link type="primary" :underline="false">{{ row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="分类" prop="cate_name"></el-table-column>
      <el-table-column label="发表时 间" prop="pub_date">
        <template #default="{ row }">
          {{ formatTime(row.pub_date) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="state"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button :icon="Edit" circle plain type="primary" @click="onEditArticle(row)"></el-button>
          <el-button :icon="Delete" circle plain type="danger" @click="onDeleteArticle(row)"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="params.pagenum"
      v-model:page-size="params.pagesize"
      :page-sizes="[2, 3, 4, 5, 10]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
    <!-- 弹窗 -->
    <article-edit ref="articleEditRef" @success="onSuccess"></article-edit>
  </page-container>
</template>

<style lang="scss" scoped></style>

图片预览

1. 关闭自动上传，准备结构

import { Plus } from '@element-plus/icons-vue'

<el-upload class="avatar-uploader" :auto-upload="false" :show-file-list="false" :on-change="onSelectFile">
  <!-- 如果有图片，则渲染图片 -->
  <img v-if="imgUrl" :src="imgUrl" class="avatar" />
  <!-- 如果没有图片，则渲染 + 号 -->
  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>

2. 准备数据和选择图片的处理逻辑

const imgUrl = ref('')
const onSelectFile = (uploadFile) => {
  imgUrl.value = URL.createObjectURL(uploadFile.raw)
  formModel.value.cover_img = uploadFile.raw
}

3. 样式美化

.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

富文本

1. 安装包

pnpm add @vueup/vue-quill@latest

2. 注册成局部组件

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

3. 页面中使用绑定

<div class="editor">
  <!-- 富文本编辑器 -->
  <quill-editor ref="editorRef" theme="snow" v-model:content="formModel.content" contentType="html"> </quill-editor>
</div>

4. 样式美化

.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}

基本资料

创建 src\views\user\UserProfile.vue 组件，修改用户基本资料：

<script setup>
import { useUserStore } from '@/stores'
import { ref } from 'vue'
import { userUpdateInfoService } from '@/api/user'
const formRef = ref()
const {
  user: { username, nickname, email, id },
  getUser
} = useUserStore()

const userInfo = ref({ username, nickname, email, id })

const rules = {
  nickname: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' },
    {
      pattern: /^\S{2,10}$/,
      message: '昵称必须是2-10位的非空字符串',
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入用户邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ]
}

const onSubmit = async () => {
  const valid = await formRef.value.validate()
  if (valid) {
    await userUpdateInfoService(userInfo.value)
    await getUser()
    ElMessage.success('修改成功')
  }
}
</script>

<template>
  <page-container title="基本资料">
    <el-row>
      <el-col :span="12">
        <el-form :model="userInfo" :rules="rules" ref="formRef" label-width="100px" size="large">
          <el-form-item label="登录名称">
            <el-input v-model="userInfo.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户昵称" prop="nickname">
            <el-input v-model="userInfo.nickname"></el-input>
          </el-form-item>
          <el-form-item label="用户邮箱" prop="email">
            <el-input v-model="userInfo.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmit" type="primary">提交修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </page-container>
</template>

更换头像

创建 src\views\user\UserAvatar.vue 组件，更换用户头像：

<script setup>
import { ref } from 'vue'
import { Plus, Upload } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores'
import { userUploadAvatarService } from '@/api/user'
const userStore = useUserStore()

const uploadRef = ref()
const imgUrl = ref(userStore.user.user_pic)
const onUploadFile = (file) => {
  const reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    imgUrl.value = reader.result
  }
}
const onUpdateAvatar = async () => {
  await userUploadAvatarService(imgUrl.value)
  await userStore.getUser()
  ElMessage({ type: 'success', message: '更换头像成功' })
}
</script>

<template>
  <page-container title="更换头像">
    <el-row>
      <el-col :span="12">
        <el-upload ref="uploadRef" class="avatar-uploader" :auto-upload="false" :show-file-list="false" :on-change="onUploadFile">
          <img v-if="imgUrl" :src="imgUrl" class="avatar" />
          <img v-else src="@/assets/avatar.jpg" width="278" />
        </el-upload>
        <br />
        <el-button @click="uploadRef.$el.querySelector('input').click()" type="primary" :icon="Plus" size="large">选择图片</el-button>
        <el-button @click="onUpdateAvatar" type="success" :icon="Upload" size="large"> 上传头像 </el-button>
      </el-col>
    </el-row>
  </page-container>
</template>

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 278px;
      height: 278px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 278px;
      height: 278px;
      text-align: center;
    }
  }
}
</style>

重置密码

创建 src\views\user\UserPassword.vue 组件，重置密码：

<script setup>
import { ref } from 'vue'
import { userUpdatePassService } from '@/api/user'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
const formRef = ref()
const pwdForm = ref({
  old_pwd: '',
  new_pwd: '',
  re_pwd: ''
})

const checkOldSame = (rule, value, cb) => {
  if (value === pwdForm.value.old_pwd) {
    cb(new Error('原密码和新密码不能一样!'))
  } else {
    cb()
  }
}

const checkNewSame = (rule, value, cb) => {
  if (value !== pwdForm.value.new_pwd) {
    cb(new Error('新密码和确认再次输入的新密码不一样!'))
  } else {
    cb()
  }
}
const rules = {
  // 原密码
  old_pwd: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码长度必须是6-15位的非空字符串',
      trigger: 'blur'
    }
  ],
  // 新密码
  new_pwd: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码长度必须是6-15位的非空字符串',
      trigger: 'blur'
    },
    { validator: checkOldSame, trigger: 'blur' }
  ],
  // 确认新密码
  re_pwd: [
    { required: true, message: '请再次确认新密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码长度必须是6-15位的非空字符串',
      trigger: 'blur'
    },
    { validator: checkNewSame, trigger: 'blur' }
  ]
}

const userStore = useUserStore()
const router = useRouter()
const onSubmit = async () => {
  const valid = await formRef.value.validate()
  if (valid) {
    await userUpdatePassService(pwdForm.value)
    ElMessage({ type: 'success', message: '更换密码成功' })
    // 密码修改成功，重新登录
    userStore.setToken('') //清除 token
    userStore.setUser({}) //清除个人信息

    // 拦截到登录页
    router.push('/login')
  }
}

const onReset = () => {
  formRef.value.resetFields()
}
</script>
<template>
  <page-container title="重置密码">
    <el-row>
      <el-col :span="12">
        <el-form :model="pwdForm" :rules="rules" ref="formRef" label-width="100px" size="large">
          <el-form-item label="原密码" prop="old_pwd">
            <el-input v-model="pwdForm.old_pwd" type="password"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="new_pwd">
            <el-input v-model="pwdForm.new_pwd" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="re_pwd">
            <el-input v-model="pwdForm.re_pwd" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmit" type="primary">修改密码</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </page-container>
</template>