VUE3终比

斑马兽存d

已于 2024-04-03 16:01:17 修改

阅读量1.4k

点赞数 42

文章标签：前端 vue.js

于 2024-03-11 17:44:26 首次发布

本文链接：https://blog.csdn.net/qq_64501425/article/details/136630629

版权

认识Vue3

1. Vue2 选项式 API vs Vue3 组合式API

<script>
export default {
  data(){
    return {
      count:0
    }
  },
  methods:{
    addCount(){
      this.count++
    }
  }
}
</script>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const addCount = ()=> count.value++
</script>

特点：

代码量变少
分散式维护变成集中式维护

2. Vue3的优势

使用create-vue搭建Vue3项目

1. 认识create-vue

create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应

2. 使用create-vue创建项目新电脑创建vue3项目

前置条件 - 已安装16.0或更高版本的Node.js
powershell中输入node -v

执行如下命令，这一指令将会安装并执行 create-vue

npm init vue@latest

项目名字：vue3-demo
除了ESLint剩下都No

创建成功后cd 到 vue3-demo

3.安装依赖

npm install

4.启动项目

npm run dev

熟悉项目和关键文件

vite.config.js - 项目的配置文件基于vite的配置
package.json - 项目包文件核心依赖项变成了Vue3.x 和 vite
main.js - 入口文件 createApp函数创建应用实例
//new Vue() 创建一个应用实例 => createApp()
// createRouter() createStore()
// 将创建实例进行了封装，保证每个实例的独立封闭性
app.vue - 根组件 SFC单文件组件 script - template - style
变化一：脚本 script 和模板 template 顺序调整
变化二：模板 template 不再要求唯一根元素
变化三：脚本 script 添加 setup 标识支持组合式 API
index.html - 单页入口提供 id 为 app 的挂载点

Vue2变Vue3需要替换的插件：新电脑

禁用Vetur 安装volar(Vue Language Eeature)

组合式API - setup选项

vue2 vue3区别：
回忆：之前 vue 文件内容架子是 template + script + style(scoped) 结构 js 样式
如今是 script(set up) + template + style(scoped) js 结构样式

  之前组件使用方法：导入注册 + 使用
  如今： 导入 + 使用
  import ... from + template中使用 

 vue2中template要求唯一根元素
 vue3中不要求（header , main..）

1. setup选项的写法和执行时机

加上setup 允许在script中直接编写组合式API

写法

<script>
  export default {
    setup(){
      
    },
    beforeCreate(){
      
    }
  }
</script>

执行时机

在beforeCreate钩子之前执行非常早

2. setup中写代码的特点 setup用法

在setup函数中写的数据和方法需要在末尾以对象的方式return，才能给模版使用
定义+导出+使用
定义
数据形式：const 名 = 值
函数形式：const 名 = () =>{ }
导出 (在script后加setup可以省略此步)
return{名,名…}
使用
{{名}}…

<script>
  export default {
    setup(){
      const message = 'this is message'
      const logMessage = ()=>{
        console.log(message)
      }
      // 必须return才可以
      return {
        message,
        logMessage
      }
    }
  }
</script>

3.

script标签添加 setup标记，不需要再写导出语句，默认会添加导出语句

<script setup>
  const message = 'this is message'
  const logMessage = ()=>{
    console.log(message)
  }
</script>

组合式API - reactive和ref函数

1. reactive 响应的对象（obj）

接受对象类型数据的参数传入并返回一个响应式的对象

vue3中实现响应式对象类型数据的方法，
应用：比如点击按钮加1，没有reactive进行包起来就不能对数字加1

步骤：从vue导入reactive + reactive包对象 + 使用

<script setup>
 // 导入
 import { reactive } from 'vue'
 // 执行函数 传入参数 变量接收   （对象）
 const state = reactive({
   msg:666,
   count:1
 })
 const setSate = ()=>{
   // 修改数据更新视图
   state.msg += 1
 }
</script>

<template>
  <button @click="setState">{{state.msg}}</button>
  此时点击按钮 666 +1
</template>

2. ref （常用更强大）响应的简单类型或复杂类型

接收简单类型或者对象类型的数据传入并返回一个响应式的对象

注意：1. js中访问数据，需要.value
2.template中，.value不用加（帮我们扒了一层）

步骤：导入ref + ref包数据 + 数据.value使用(js中，template不加)

<script setup>
 // 导入
 import { ref } from 'vue'
 // 执行函数 传入参数 变量接收
 const count = ref(0)
 const setCount = ()=>{
   // 修改数据更新视图必须加上.value
   count.value++
 }
</script>

<template>
  <button @click="setCount">{{count}}</button>
</template>

3. reactive 对比 ref

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

组合式API - computed 计算属性函数写法

计算属性基本思想和Vue2保持一致，组合式API下的计算属性只是修改了API写法

计算函数格式：

const 名 =computed( () =>{
return 计算公式
} )

步骤：导入ref和computed + 定义计算函数用computed包起来 + 使用函数名

过滤数组案例 筛选大于二的
<script setup>
// 导入
import {ref, computed } from 'vue'
// 原始数据(数组)，ref后得到对象，再.value得到新数组
const list = ref([1,2,3,4,5,6,7,8,])
// 计算属性
const newList = computed( ()=>{
  return list.value.filter(item => item>2)
} ) 

</script>

<template>
  <div>
     原始数组：{{ list }}
     大于二得到的数组：{{ newList }}
  </div>
</template>

组合式API - watch 监听写成函数写法

侦听一个或者多个数据的变化，数据变化时执行回调函数，俩个额外参数 immediate控制立刻执行，deep开启深度侦听

步骤：导入ref,watch + 写事件函数(比如点击改名字) + 监听改前后的名字watch
watch( const的值,(新,老) => { } )
watch( [const的值1,const值2],(新,老) => { },{ immediate/deep:true } )

1. 侦听单个简单数据

watch 单个数据监听格式

watch( (监听的值ref对象"无.value",(新值,旧值)) => {

} )

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  // 2. 调用watch 侦听变化
  watch(count, (newValue, oldValue)=>{
    console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
  })
</script>

2. 侦听多个简单数据无非多个数组包const

侦听多个数据(多个count)，第一个参数改写成数组的写法

多个格式：

watch括号里边：值是对象的话写对象不用加.velue
[值1，值2],(新，老)

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)  两个都是简单的
  const name = ref('cp')

  // 2. 调用watch 侦听变化 
  watch([count, name], (newValue,oldValue)=>{
    console.log(`count或者name变化了${oldValue},${newValue}`)
  })
</script>

3. immediate 一进页面立即执行一次无非多个immediate:true

使用方法：在watch函数后面多加一个对象，写上immediate:true

执行单次案例后面加上immediate:true 一进页面控制台会显示 0 undefined

在侦听器创建时立即出发回调，响应式数据变化之后继续执行回调

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  // 2. 调用watch 侦听变化
  watch(count, (newValue, oldValue)=>{
    console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
  },{
    immediate: true
  })
</script>

4. deep 复杂类型(obj系列)用监听整个obj

通过watch监听的ref对象默认是浅层侦听的，

直接修改嵌套的对象属性不会触发回调执行，需要开启deep

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const state = ref({ count: 0 })
  // 2. 监听对象state
  watch(state, ()=>{
    console.log('数据变化了')
  })
  const changeStateByCount = ()=>{
    // 直接修改不会引发回调执行
    state.value.count++
  }
</script>

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const state = ref({ count: 0 })
  // 2. 监听对象state 并开启deep
  watch(state, ()=>{
    console.log('数据变化了')
  },{deep:true})
  const changeStateByCount = ()=>{
    // 此时修改可以触发回调
    state.value.count++
  }
</script>

5.精确监听对象中的某个属性(补充第四点)

写法:obj可变具体对象名,key可变具体键值对
watch(
()=>obj.value.key,
(新,老)=>console.log(新,老)
)

组合式API - 生命周期函数

1. 选项式对比组合式

2. 生命周期函数基本使用

导入生命周期函数
执行生命周期函数，传入回调

<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{
  // 自定义逻辑
})
</script>

3. 执行多次

生命周期函数执行多次的时候，会按照顺序依次执行

<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{
  // 自定义逻辑
})

onMounted(()=>{
  // 自定义逻辑
})
</script>

组合式API - 父子通信

1. 父传子

基本思想

父组件中给子组件绑定属性
子组件内部通过props选项接收数据

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2. 子传父

基本思想

父组件中给子组件标签通过@绑定事件
子组件内部通过 emit 方法触发事件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

组合式API - 模版引用

概念：通过 ref标识获取真实的 dom对象或者组件实例对象

1. 基本使用

实现步骤：

调用ref函数生成一个ref对象
通过ref标识绑定ref对象到标签

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2. defineExpose

默认情况下在

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

组合式API - provide和inject

1. 作用和场景

顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2. 跨层传递普通数据

实现步骤

顶层组件通过 provide 函数提供数据
底层组件通过 inject 函数提供数据

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3. 跨层传递响应式数据

在调用provide函数时，第二个参数设置为ref对象

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4. 跨层传递方法

顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件的数据

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Vue3.3 新特性-defineOptions

背景说明：

有

但是用了

为了解决这一问题，引入了 defineProps 与 defineEmits 这两个宏。但这只解决了 props 与 emits 这两个属性。

如果我们要定义组件的 name 或其他自定义的属性，还是得回到最原始的用法——再添加一个普通的

这样就会存在两个

所以在 Vue 3.3 中新引入了 defineOptions 宏。顾名思义，主要是用来定义 Options API 的选项。可以用 defineOptions 定义任意的选项， props, emits, expose, slots 除外（因为这些可以使用 defineXXX 来做到）

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Vue3.3新特性-defineModel

在Vue3中，自定义组件上使用v-model, 相当于传递一个modelValue属性，同时触发 update:modelValue 事件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我们需要先定义 props，再定义 emits 。其中有许多重复的代码。如果需要修改此值，还需要手动调用 emit 函数。

于是乎 defineModel 诞生了。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

生效需要配置 vite.config.js

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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

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

后台数据管理系统 - 项目架构设计

在线演示：https://fe-bigevent-web.itheima.net/login

接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835

接口根路径： http://big-event-vue-api-t.itheima.net

本项目的技术栈本项目技术栈基于 ES6、vue3、pinia、vue-router 、vite 、axios 和 element-plus

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

项目页面介绍

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

pnpm 包管理器 - 创建项目

一些优势：比同类工具快 2倍左右、节省磁盘空间… https://www.pnpm.cn/

安装方式：

npm install -g pnpm

创建项目：

pnpm create vue

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

ESLint & prettier 配置代码风格

环境同步：

安装了插件 ESlint，开启保存自动修复
禁用了插件 Prettier，并关闭保存自动格式化

// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
"editor.formatOnSave": false,

配置文件 .eslintrc.cjs

prettier 风格配置 https://prettier.io
1. 单引号
2. 不使用分号
3. 每行宽度至多80字符
4. 不加对象|数组最后逗号
5. 换行符号不限制（win mac 不一致）
vue组件名称多单词组成（忽略index.vue）
props解构（关闭）

  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
    // 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
    'no-undef': 'error'
  }

基于 husky 的代码检查工作流

husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )

husky 配置

git初始化 git init
初始化 husky 工具配置 https://typicode.github.io/husky/

pnpm dlx husky-init && pnpm install

修改 .husky/pre-commit 文件

pnpm lint

**问题：**默认进行的是全量检查，耗时问题，历史问题。

lint-staged 配置

安装

pnpm i lint-staged -D

配置 package.json

{
  // ... 省略 ...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}

{
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged"
  }
}

修改 .husky/pre-commit 文件

pnpm lint-staged

调整项目目录

默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。主要是两个工作：

删除初始化的默认文件
修改剩余代码内容
新增调整我们需要的目录结构
拷贝初始化资源文件，安装预处理器插件

删除文件
修改内容

src/router/index.js

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

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

export default router

src/App.vue

<script setup></script>

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<style scoped></style>

src/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')

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

将项目需要的全局样式和图片文件，复制到 assets 文件夹中, 并将全局样式在main.js中引入

import '@/assets/main.scss'

安装 sass 依赖

pnpm add sass -D

VueRouter4 路由代码解析

基础代码解析

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

// createRouter 创建路由实例，===> new VueRouter()
// 1. history模式: createWebHistory()   http://xxx/user
// 2. hash模式: createWebHashHistory()  http://xxx/#/user

// vite 的配置 import.meta.env.BASE_URL 是路由的基准地址，默认是 ’/‘
// https://vitejs.dev/guide/build.html#public-base-path

// 如果将来你部署的域名路径是：http://xxx/my-path/user
// vite.config.ts  添加配置  base: my-path，路由这就会加上 my-path 前缀了

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

export default router

import.meta.env.BASE_URL 是Vite 环境变量：https://cn.vitejs.dev/guide/env-and-mode.html

引入 element-ui 组件库

官方文档： https://element-plus.org/zh-CN/

安装

$ pnpm add element-plus

自动按需：

安装插件

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

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

...
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: [
    ...
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

直接使用

<template>
  <div>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    ...
  </div>
</template>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

**彩蛋：**默认 components 下的文件也会被自动注册~

Pinia - 构建用户仓库和持久化

官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

安装插件 pinia-plugin-persistedstate

pnpm add pinia-plugin-persistedstate -D

使用 main.js

import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))

配置 stores/user.js

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

// 用户模块
export const useUserStore = defineStore(
  'big-user',
  () => {
    const token = ref('') // 定义 token
    const setToken = (t) => (token.value = t) // 设置 token

    return { token, setToken }
  },
  {
    persist: true // 持久化
  }
)

Pinia - 配置仓库统一管理

pinia 独立维护

- 现在：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一

- 优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用

仓库统一导出

- 现在：使用一个仓库 import { useUserStore } from ./stores/user.js 不同仓库路径不一致

- 优化：由 stores/index.js 统一导出，导入路径统一 ./stores，而且仓库维护在 stores/modules 中

数据交互 - 请求工具设计

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1. 创建 axios 实例

们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

安装 axios

pnpm add axios

新建 utils/request.js 封装 axios 模块

利用 axios.create 创建一个自定义的 axios 来使用

http://www.axios-js.com/zh-cn/docs/#axios-create-config

import axios from 'axios'

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  // TODO 1. 基础地址，超时时间
})

instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    return config
  },
  (err) => Promise.reject(err)
)

instance.interceptors.response.use(
  (res) => {
    // TODO 3. 处理业务失败
    // TODO 4. 摘取核心响应数据
    return res
  },
  (err) => {
    // TODO 5. 处理401错误
    return Promise.reject(err)
  }
)

export default instance

2. 完成 axios 基本配置

import { useUserStore } from '@/stores/user'
import axios from 'axios'
import router from '@/router'
import { ElMessage } from 'element-plus'

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  baseURL,
  timeout: 100000
})

instance.interceptors.request.use(
  (config) => {
    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({ message: res.data.message || '服务异常', type: 'error' })
    return Promise.reject(res.data)
  },
  (err) => {
    ElMessage({ message: err.response.data.message || '服务异常', type: 'error' })
    console.log(err)
    if (err.response?.status === 401) {
      router.push('/login')
    }
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }

首页整体路由设计

实现目标:

完成整体路由规划【搞清楚要做几个页面，它们分别在哪个路由下面，怎么跳转的…】
通过观察, 点击左侧导航, 右侧区域在切换, 那右侧区域内容一直在变, 那这个地方就是一个路由的出口
我们需要搭建嵌套路由

目标：

把项目中所有用到的组件及路由表, 约定下来

约定路由规则

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	二级路由

明确了路由规则，可以全部配完，也可以边写边配。

登录注册页面 [element-plus 表单 & 表单校验]

注册登录静态结构 & 基本切换

安装 element-plus 图标库

pnpm i @element-plus/icons-vue

静态结构准备

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
const isRegister = ref(true)
</script>

<template>
  <el-row class="login-page">
    <el-col :span="12" class="bg"></el-col>
    <el-col :span="6" :offset="3" class="form">
      <el-form ref="form" size="large" autocomplete="off" v-if="isRegister">
        <el-form-item>
          <h1>注册</h1>
        </el-form-item>
        <el-form-item>
          <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入再次密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button 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 ref="form" size="large" autocomplete="off" v-else>
        <el-form-item>
          <h1>登录</h1>
        </el-form-item>
        <el-form-item>
          <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            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
            >登录</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>

注册功能

实现注册校验

【需求】注册页面基本校验

用户名非空，长度校验5-10位
密码非空，长度校验6-15位
再次输入密码，非空，长度校验6-15位

【进阶】再次输入密码需要自定义校验规则，和密码框值一致（可选）

注意：

model 属性绑定 form 数据对象

const formModel = ref({
  username: '',
  password: '',
  repassword: ''
})

<el-form :model="formModel" >

v-model 绑定 form 数据对象的子属性

<el-input
  v-model="formModel.username"
  :prefix-icon="User"
  placeholder="请输入用户名"
></el-input>
... 
(其他两个也要绑定)

rules 配置校验规则

<el-form :rules="rules" >
    
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) => {
        if (value !== formModel.value.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

prop 绑定校验规则

<el-form-item prop="username">
  <el-input
    v-model="formModel.username"
    :prefix-icon="User"
    placeholder="请输入用户名"
  ></el-input>
</el-form-item>
... 
(其他两个也要绑定prop)

注册前的预校验

需求：点击注册按钮，注册之前，需要先校验

通过 ref 获取到表单组件

const form = ref()

<el-form ref="form">

注册之前进行校验

<el-button
  @click="register"
  class="button"
  type="primary"
  auto-insert-space
>
  注册
</el-button>

const register = async () => {
  await form.value.validate()
  console.log('开始注册请求')
}

封装 api 实现注册功能

需求：封装注册api，进行注册，注册成功切换到登录

新建 api/user.js 封装

import request from '@/utils/request'

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

页面中调用

const register = async () => {
  await form.value.validate()
  await userRegisterService(formModel.value)
  ElMessage.success('注册成功')
  // 切换到登录
  isRegister.value = false
}

eslintrc 中声明全局变量名, 解决 ElMessage 报错问题

module.exports = {
  ...
  globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }
}

登录功能

实现登录校验

【需求说明】给输入框添加表单校验

用户名不能为空，用户名必须是5-10位的字符，失去焦点和修改内容时触发校验
密码不能为空，密码必须是6-15位的字符，失去焦点和修改内容时触发校验

操作步骤：

model 属性绑定 form 数据对象，直接绑定之前提供好的数据对象即可

<el-form :model="formModel" >

rules 配置校验规则，共用注册的规则即可

<el-form :rules="rules" >

v-model 绑定 form 数据对象的子属性

<el-input
  v-model="formModel.username"
  :prefix-icon="User"
  placeholder="请输入用户名"
></el-input>

<el-input
  v-model="formModel.password"
  name="password"
  :prefix-icon="Lock"
  type="password"
  placeholder="请输入密码"
></el-input>

prop 绑定校验规则

<el-form-item prop="username">
  <el-input
    v-model="formModel.username"
    :prefix-icon="User"
    placeholder="请输入用户名"
  ></el-input>
</el-form-item>
...

切换的时候重置

watch(isRegister, () => {
  formModel.value = {
    username: '',
    password: '',
    repassword: ''
  }
})

登录前的预校验 & 登录成功

【需求说明1】登录之前的预校验

登录请求之前，需要对用户的输入内容，进行校验
校验通过才发送请求

【需求说明2】登录功能

封装登录API，点击按钮发送登录请求
登录成功存储token，存入pinia 和持久化本地storage
跳转到首页，给提示

【测试账号】

登录的测试账号: shuaipeng
登录测试密码: 123456

PS: 每天账号会重置，如果被重置了，可以去注册页，注册一个新号

实现步骤：

注册事件，进行登录前的预校验 (获取到组件调用方法)

<el-form ref="form">
    
const login = async () => {
  await form.value.validate()
  console.log('开始登录')
}

封装接口 API

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

调用方法将 token 存入 pinia 并自动持久化本地

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('/')
}

首页 layout 架子 [element-plus 菜单组件]

基本架子拆解

架子组件列表：

el-container

el-aside 左侧
- el-menu 左侧边栏菜单
el-container 右侧
- el-header 右侧头部
  - el-dropdown
- el-main 右侧主体
  - router-view

<script setup>
import {
  Management,
  Promotion,
  UserFilled,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
</script>

<template>
  <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">
          <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>小帅鹏</strong></div>
        <el-dropdown placement="bottom-end">
          <span class="el-dropdown__box">
            <el-avatar :src="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>

登录访问拦截

需求：只有登录页，可以未授权的时候访问，其他所有页面，都需要先登录再访问

// 登录访问拦截
router.beforeEach((to) => {
  const userStore = useUserStore()
  if (!userStore.token && to.path !== '/login') return '/login'
})

用户基本信息获取&渲染

api/user.js封装接口

export const userGetInfoService = () => request.get('/my/userinfo')

stores/modules/user.js 定义数据

const user = ref({})
const getUser = async () => {
  const res = await userGetInfoService() // 请求获取数据
  user.value = res.data.data
}

layout/LayoutContainer页面中调用

import { useUserStore } from '@/stores'
const userStore = useUserStore()
onMounted(() => {
  userStore.getUser()
})

动态渲染

<div>
  黑马程序员：<strong>{{ userStore.user.nickname || userStore.user.username }}</strong>
</div>

<el-avatar :src="userStore.user.user_pic || avatar" />

退出功能 [element-plus 确认框]

注册点击事件

<el-dropdown placement="bottom-end" @command="onCommand">

<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>

添加退出功能

const onCommand = async (command) => {
  if (command === 'logout') {
    await ElMessageBox.confirm('你确认退出大事件吗？', '温馨提示', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })
    userStore.removeToken()
    userStore.setUser({})
    router.push(`/login`)
  } else {
    router.push(`/user/${command}`)
  }
}

pinia user.js 模块提供 setUser 方法

const setUser = (obj) => (user.value = obj)

文章分类页面 - [element-plus 表格]

基本架子 - PageContainer

基本结构样式，用到了 el-card 组件

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>文章分类</span>
        <div class="extra">
          <el-button type="primary">添加分类</el-button>
        </div>
      </div>
    </template>
     ...
  </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>

考虑到多个页面复用，封装成组件
- props 定制标题
- 默认插槽 default 定制内容主体
- 具名插槽 extra 定制头部右侧额外的按钮

<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>

页面中直接使用测试 ( unplugin-vue-components 会自动注册)

文章分类测试：

<template>
  <page-container title="文章分类">
    <template #extra>
      <el-button type="primary"> 添加分类 </el-button>
    </template>

    主体部分
  </page-container>
</template>

文章管理测试：

<template>
  <page-container title="文章管理">
    <template #extra>
      <el-button type="primary">发布文章</el-button>
    </template>

    主体部分
  </page-container>
</template>

文章分类渲染

封装API - 请求获取表格数据

新建 api/article.js 封装获取频道列表的接口

import request from '@/utils/request'
export const artGetChannelsService = () => request.get('/my/cate/list')

页面中调用接口，获取数据存储

const channelList = ref([])

const getChannelList = async () => {
  const res = await artGetChannelsService()
  channelList.value = res.data.data
}

el-table 表格动态渲染

<el-table :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">
    <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>


const onEditChannel = (row) => {
  console.log(row)
}
const onDelChannel = (row) => {
  console.log(row)
}

el-table 表格 loading 效果

定义变量，v-loading绑定

const loading = ref(false)

<el-table v-loading="loading">

发送请求前开启，请求结束关闭

const getChannelList = async () => {
  loading.value = true
  const res = await artGetChannelsService()
  channelList.value = res.data.data
  loading.value = false
}

文章分类添加编辑 [element-plus 弹层]

点击显示弹层

准备弹层

const dialogVisible = ref(false)

<el-dialog v-model="dialogVisible" title="添加弹层" width="30%">
  <div>我是内容部分</div>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary"> 确认 </el-button>
    </span>
  </template>
</el-dialog>

点击事件

<template #extra><el-button type="primary" @click="onAddChannel">添加分类</el-button></template>

const onAddChannel = () => {
  dialogVisible.value = true
}

封装弹层组件 ChannelEdit

添加和编辑，可以共用一个弹层，所以可以将弹层封装成一个组件

组件对外暴露一个方法 open, 基于 open 的参数，初始化表单数据，并判断区分是添加还是编辑

open({ }) => 添加操作，添加表单初始化无数据
open({ id: xx, … }) => 编辑操作，编辑表单初始化需回显

具体实现：

封装组件 article/components/ChannelEdit.vue

<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)

const open = async (row) => {
  dialogVisible.value = true
  console.log(row)
}

defineExpose({
  open
})
</script>

<template>
  <el-dialog v-model="dialogVisible" title="添加弹层" width="30%">
    <div>我是内容部分</div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

通过 ref 绑定

const dialog = ref()

<!-- 弹窗 -->
<channel-edit ref="dialog"></channel-edit>

点击调用方法显示弹窗

const onAddChannel = () => {
  dialog.value.open({})
}
const onEditChannel = (row) => {
  dialog.value.open(row)
}

准备弹层表单

准备数据和校验规则

const formModel = ref({
  cate_name: '',
  cate_alias: ''
})
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'
    }
  ]
}

准备表单

<el-form
  :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>

编辑需要回显，表单数据需要初始化

const open = async (row) => {
  dialogVisible.value = true
  formModel.value = { ...row }
}

基于传过来的表单数据，进行标题控制，有 id 的是编辑

:title="formModel.id ? '编辑分类' : '添加分类'"

确认提交

api/article.js 封装请求 API

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

页面中校验，判断，提交请求

<el-form ref="formRef">

const formRef = ref()
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
}

通知父组件进行回显

const emit = defineEmits(['success'])

const onSubmit = async () => {
  ...
  emit('success')
}

父组件监听 success 事件，进行调用回显

<channel-edit ref="dialog" @success="onSuccess"></channel-edit>

const onSuccess = () => {
  getChannelList()
}

文章分类删除

api/article.js封装接口 api

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

页面中添加确认框，调用接口进行提示

const onDelChannel = async (row) => {
  await ElMessageBox.confirm('你确认删除该分类信息吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  await artDelChannelService(row.id)
  ElMessage({ type: 'success', message: '删除成功' })
  getChannelList()
}

Vue3 状态管理 - Pinia

1. 什么是Pinia

Pinia 是 Vue 的专属的最新状态管理库，是 Vuex 状态管理工具的替代品
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2. 手动添加Pinia到Vue项目

后面在实际开发项目的时候，Pinia可以在项目创建时自动添加，现在我们初次学习，从零开始：

使用 Vite 创建一个空的 Vue3项目

npm init vite@latest

按照官方文档安装 pinia 到项目中

3. Pinia基础使用

定义store
组件使用store

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4. getters实现

Pinia中的 getters 直接使用 computed函数进行模拟, 组件中需要使用需要把 getters return出去

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5. action异步实现

方式：异步action函数的写法和组件中获取异步数据的写法完全一致

接口地址：http://geek.itheima.net/v1_0/channels
请求方式：get
请求参数：无

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

需求：在Pinia中获取频道列表数据并把数据渲染App组件的模板中
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

6. storeToRefs工具函数

使用storeToRefs函数可以辅助保持数据（state + getter）的响应式解构
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

7. Pinia的调试

Vue官方的 dev-tools 调试工具对 Pinia直接支持，可以直接进行调试
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

8. Pinia持久化插件

官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

安装插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

使用 main.js

import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))

配置 store/counter.js

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

export const useCounterStore = defineStore('counter', () => {
  ...
  return {
    count,
    doubleCount,
    increment
  }
}, {
  persist: true
})