# vue3_learning

**Repository Path**: www-cai-com/vue3_learning

## Basic Information

- **Project Name**: vue3_learning
- **Description**: 学习vue3
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-16
- **Last Updated**: 2025-03-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


```text
《Vue3》第23节：Vue3项目中实现菜单数据的动态加载
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485921&idx=1&sn=d2ea63470ad4be868d200253fa6cdcc2&chksm=f982448dcef5cd9b18ba134fbfb9442a9c9933a5a739ca6bf1a8a979d9257778ee73e084e729&cur_album_id=3753444636422111232&scene=189#wechat_redirect

不同的用户拥有不同的权限角色，登录后展示不同的菜单页面
1.2、新建mock.js文件
1.3、新建dynamicRoutes.js文件
1.4、修改login.js文件
1.5、修改permission.js文件



```

```text
《Vue3》第22节：Vue3项目控制访问页面的权限
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485908&idx=1&sn=f38f527a17c32b3437d9ea9021c8c62e&chksm=f98244b8cef5cdae38105c9b48dfd9d99df9e4673bc6bb5779002d40bb8f7f308ead1b4d76cf&scene=178&cur_album_id=3753444636422111232#rd

当不存在token时，会默认跳转到登录页面，登录成功后因为token存在，
所以即使用户直接访问login页面，此时也会直接跳转到后台首页

关键在于对permission.js文件里面的代码
router.beforeEach((to, from, next) => {})
router.afterEach((to, from) => {})
```

```text

《Vue3》第21节：Vue3项目引入NProgress加载进度条插件
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485902&idx=1&sn=1d426b8999030e6c2456573cf9aa02a3&chksm=f98244a2cef5cdb47f78a9a134f964642dd7d04da16351a6c26f2f38483cd9f7bbb4c58d4855&cur_album_id=3753444636422111232&scene=189#wechat_redirect
# 安装 nprogress 依赖
npm install nprogress --save


```

```text
《Vue3》第20节：Vue3项目全局设置滚动条样式
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485893&idx=1&sn=68df489c76c53ff2bd7d36f1de1c7872&chksm=f98244a9cef5cdbf7116af614f34099afc230b00acd005e717393027e70db56772bd3a250ed7&cur_album_id=3753444636422111232&scene=189#wechat_redirect

注意：一般在实际开发中，全局的CSS样式代码，都会抽取到styles.css或者styles.scss文件里面，
该文件可以直接放在src目录下，也可以放在src/assets/styles目录下，
我这里是放在了src/assets/styles目录里面。

```

```text
《Vue3》第19节：Vue3项目实现点击图标折叠和展开侧边栏的功能
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485887&idx=1&sn=1f0dbb02d68bbea729eac6c9696578f2&chksm=f98244d3cef5cdc5ced133c5d0e5cae078d8698afb84e58a4dd39d03e2cd01fd661d260f03bd&cur_album_id=3753444636422111232&scene=189#wechat_redirect

要实现侧边菜单栏的折叠和展开功能，需要动态地调整侧边栏的宽度：
    当折叠的时候将侧标栏宽度减少到最小的宽度，这里设置成64px;
    当展开的时候，将侧边栏增加到初始的宽度，比如是200px;
    
 3个问题如下
 1.第一个问题：要如何动态控制侧边栏宽度大小呢？
<el-aside :width="store.getters.isCollapsed ? '64px' : '200px'" class="v-layout-aside">
    <!-- 左侧菜单栏区域 -->
    <v-aside-bar/>
</el-aside>

2.第二个问题：要如何控制<el-menu>菜单组件的宽度？
Element Plus中的<el-menu>菜单组件提供了一个collapse属性，
通过这个collapse属性可以很方便的实现菜单栏的折叠和展开的功能。
另外，还需要使用:collapse-transition="false"禁用默认的过渡动画，
不然，折叠和展开的时候，会有点突兀，最后，我们自己添加过渡动画。

3.第三个问题：页面刷新后，如何记住上一次的折叠或展开状态？
要记住上一次侧边栏的状态，可以将侧边栏的状态保存到localStorage里面，
当页面刷新的时候，首先从localStorage里面取值，如果上一次的值不存在，则使用默认状态值。

```

```text
《Vue3》第18节：Vue3项目实现点击刷新图标重新加载组件界面
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485881&idx=1&sn=26bead0ce1c004b4bc844715a898288b&chksm=f98244d5cef5cdc3aaeaaacde193ae614374823f5671009cf97c3b9389d9294e74b7362d6b8f&cur_album_id=3753444636422111232&scene=189#wechat_redirect

<transition/>标签
name属性 过渡效果的class类名称，默认名称是：
v-enter-from：进入过渡的开始状态
v-enter-to：进入过渡的结束状态
v-enter-active：进入过渡的激活状态
v-leave-from：离开过渡的开始状态
v-leave-to：离开过渡的结束状态
v-leave-active：离开过渡的激活状态
也可以自定义class类名称，只需要name指定自定义的class类名称即可。

mode属性 指定过渡效果的模式
有三个取值：
in-out模式：新的组件先过渡进入，当前组件再过渡离开。
out-in模式：当前组件先过渡离开，新的组件再过渡进入。
default模式：进入和离开同时。

```


```text

《Vue3》第17节：Vue3项目实现点击图标进入全屏显示的功能
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485875&idx=1&sn=eac265694ba1b3f39101288fe8487fbf&chksm=f98244dfcef5cdc93fd4c215ba4644581e54a7bbeb18226734f16f709cd69ba2abafda399c5b&cur_album_id=3753444636422111232&scene=189#wechat_redirect

vue3中，要想实现点击某个图标后，让界面全屏展示，那么可以使用screenfull全屏插件，
该插件提供全屏，退出全屏，监听全屏状态等功能。
# 安装 screenfull 全屏插件
npm install screenfull


```


```text
《Vue3》第16节：Vue3项目实现管理后台头部信息栏的功能
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485868&idx=1&sn=915b40c7b78bc0a2b66457dafe960f6e&chksm=f98244c0cef5cdd6165934f3e66602e20619df7eaf72515889b76e791dcc0856d858cdb43600&cur_album_id=3753444636422111232&scene=189#wechat_redirect
实际开发中，管理后台首页的头部信息栏，一般会显示头像，个人中心，退出登录，全屏显示等功能，这些需求可以根据实际的需要来添加


```


```text
《Vue3》第15节：Vue3项目实现管理后台左侧菜单栏的功能
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485858&idx=1&sn=e972e27571c13c03546b8f57f80d773f&chksm=f98244cecef5cdd8d2c25a068c0e92a8d1394bb68b1e2a0d27a03c2061b86cde3b75304bd936&cur_album_id=3753444636422111232&scene=189#wechat_redirect
左侧菜单栏可以实现多层级的，可以无限嵌套层级，

```

```text

《Vue3》第14节：Vue3项目实现管理后台首页面布局
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485852&idx=1&sn=fe6a16769f1b76a0e7b1a41b6a719f28&chksm=f98244f0cef5cde6d47a856e250dec11ab4b95c3db61b9af1eb72b85da1edf07c475abcca0a8&scene=178&cur_album_id=3753444636422111232#rd

在后台管理系统中，首页的布局基本上都是3部分组成：头部信息栏，左侧菜单栏，内容区域。
布局代码如下
<template>
  <div class="main-layout-container">
    <el-container>
      <el-aside width="200px" class="v-layout-aside">
        <!-- 左侧菜单栏区域 -->
        <v-aside-bar/>
      </el-aside>
      <el-container>
        <el-header class="v-layout-header">
          <!-- 头部区域 -->
          <v-header/>
        </el-header>
        <!-- 内容区域，一般是动态显示组件内容的 -->
        <el-main class="v-layout-main">
          <!-- 使用 router-view 渲染组件 -->
          <router-view v-slot="{ Component }">
            <!--  组件切换的时候，加上过渡效果  -->
            <transition>
              <div>
                <!--   这里显示具体的组件内容   -->
                <component :is="Component"/>
              </div>
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
```

```text
《Vue3》第13节：Vue3项目实现用户注册登录界面
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485846&idx=1&sn=d1f6cda69fec74e4a2cab31d995f391f&chksm=f98244facef5cdec4d506c1602a5f9a10a68f0f4dadb2d5fa9d276b745023ab3a0d0529f9d39&scene=178&cur_album_id=3753444636422111232#rd
PS：样式并不重要，重要的是如何实现登录、注册的交互效果，以及界面的跳转功能。

1 通过@keyup.enter监听回车事件，
用户名和密码的输入框中，分别添加@keyup.enter事件，这样就可以实现回车触发登录的功能。

2 实现登录思路
在实际开发过程中，实现登录功能的时候，一般会在store中定义相应的方法，
然后通过嗲用store.dispatch()方法来触发登录，
在处理登录的store方法中，需要调用后端服务的接口

3 校验登录
校验是否登录成功，如果登录成功，则需要将后端返回的token保存到localStoreage中，
另外登录成功之后可以跳转到指定的页面（一般是首页）


```

```text
《Vue3》第12节：Vue3项目采用SVG方式引入图标文件
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485838&idx=1&sn=251a1634be6c57ad2b758d14248df939&chksm=f98244e2cef5cdf49a2b3f2e63306962ea21091f7663fde21ae139f5eb1894db1f9c5a707112&cur_album_id=3753444636422111232&scene=189#wechat_redirect
介绍
iconfont是阿里巴巴提供的一个图标素材库，这个图标库中有非常多的icon图标，
可以直接搜索自己想要的图标，还支持调整颜色、大小、图标样式等等功能。
官网地址：
https://www.iconfont.cn/search/index

1  安装 vite-plugin-svg-icons 依赖
npm i vite-plugin-svg-icons fast-glob -D

要想在Vue3 + Vite的项目中正确识别SVG图标，还需要安装一个vite-plugin-svg-icons插件和fast-glob插件，

vite-plugin-svg-icons插件的作用是：
批量处理所有的SVG文件，将每一个SVG文件转换成唯一的SVG Symbol，
之后在需要使用SVG图标的地方，就可以直接通过SVG Symbol唯一标识访问到了。

fast-glob插件的作用：
用于文件系统路径的匹配和遍历，说到直接一点，就是使用这个fast-glob插件来处理文件路径。
在这个小节中，是通过fast-glob插件来快速获取到SVG文件的路径相关信息。

2 在vite.config.js中配置插件
在vite.config.js配置文件中，
添加vite-plugin-svg-icons插件的相关配置信息，核心配置代码，如下所示：

import path from'path';
// 引入SVG插件
import {createSvgIconsPlugin} from'vite-plugin-svg-icons';

exportdefault defineConfig({
    plugins: [
        vue(),
        createSvgIconsPlugin({
            // vite-plugin-svg-icons 插件会读取指定文件夹下的所有svg图标
            iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
            // 指定生成SVG的 symbolId 格式
            symbolId: 'icon-[name]',
        })
    ]
});

3 在main.js中导入图标
// 导入SVG图标注册脚本
import 'virtual:svg-icons-register';

```


```text
《Vue3》第11节：Vue3项目引入Font Awesome图标库
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485752&idx=1&sn=df398490585330f50278bf7a4c57861f&chksm=f9824454cef5cd4266df73a26a0ab3cc8fe2542a7b5a1d19236babf7506d45333a4db3032a90&cur_album_id=3753444636422111232&scene=189#wechat_redirect
Font Awesome是一个第三方提供的图标库，v5版本提供了1820个图标，
可以覆盖大部分的图标使用场景了，可以去官网查看有哪些图标。
https://fontawesome.com.cn/v5

 
1# 安装 font-awesome 图标库的依赖
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/vue-fontawesome@latest-3

2 注册图标组件
// 引入 font-awesome 图标库
import {library} from'@fortawesome/fontawesome-svg-core';
import {FontAwesomeIcon} from'@fortawesome/vue-fontawesome';
// 按需引入要使用的图标，例如：我要使用 faHome 这个图标，那就需要引入这个图标
import {faHome} from'@fortawesome/free-solid-svg-icons';

// 添加图标到库中
library.add(faHome);

// 创建Vue3实例对象
const app = createApp(App);
// 注册图标组件
app.component('font-awesome-icon', FontAwesomeIcon);
// 挂载Vue3实例到 #app 容器
app.mount('#app');

3 <font-awesome-icon>组件 
icon属性：必填，指定具体的图标样式和图标名称。可以使用字符串、数组两种方式。
size属性：不必填，设置图标大小，如 "2xs"、"xs"、"sm"、"lg"、"xl"、"2xl"等。
spin属性：不必填，设置图标是否添加顺时针自动旋转效果，默认不旋转。
如果需要设置其他性质，比如设置颜色，只能通过css样式设置
 比如直接使用 style="color:red;" 修改图标颜色，示例如下： 
<font-awesome-icon :icon="['fad', 'home']" size="2xl" style="color: red"/>

```


```text
《Vue3》第10节：Vue3项目引入Element Plus图标库组件
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485751&idx=1&sn=2811095b44cbccbf72d3d5ea929df21c&chksm=f982445bcef5cd4d8841cb7c7bda0b6712725bbfe285a9739d78e3aa1b4fac7961e415da0a44&scene=178&cur_album_id=3753444636422111232#rd
1 安装 @element-plus/icons-vue 依赖
npm install @element-plus/icons-vue

2 全局注册图标
// 引入图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue';

// 注册图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}

3 使用
图标列表
https://element-plus.org/zh-CN/component/icon.html#icon-collection

方式一：直接通过SVG方式显示图标。
<!-- 要设置宽度、高度，也可以设置颜色 -->
<Delete style="width: 2em; height:2em; margin-right: 8px;color: lightcoral;"/>

方式二：使用<el-icon>标签显示图标。
<el-icon>
  <SuccessFilled/>
</el-icon>
<el-icon size="40" color="#409EFF">
  <Edit/>
</el-icon>

```

```text
《Vue3》第09节：Vue3项目引入vue-cropper实现图片裁剪

1 # 安装 vue-cropper 依赖
npm install vue-cropper@latest




```

```text
《Vue3》第08节：Vue3基于ElementPlus自定义表单组件
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485655&idx=1&sn=08cc8dc0ee23c40c58bd77d40749f84a&chksm=f98245bbcef5ccad55c236202460bf6cca20a231aa4e6f7b9318dd524d5885ef393970e793ce&cur_album_id=3753444636422111232&scene=189#wechat_redirect

1 $attrs标签属性
1 $attrs是Vue中提供的一个属性，可以获取到组件标签上的属性，并且是非props属性。
2 如果子组件中定义了一个name的props属性，那么$attrs是无法获取到name属性，因为$attrs只能获取非props属性。
3 $attrs只能使用在<template>模板区域中，如果你想在<script>脚本区域中使用，
那么必须使用useAttrs()方法，然后才可以获取到标签的属性。
4 一般情况下，$attrs属性会和v-bind命令结合使用，
这样可以快速实现属性的绑定，而不需要将属性全部写在标签上面。



```




```text
《Vue3》第07节：Vue3基于ElementPlus自定义dialog组件
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485654&idx=1&sn=86db0090aef10887720c6b24c3332aca&chksm=f98245bacef5ccacde36d1f48fdbc8aadb9d364394bfd26a82e83249fd33b9b20943221973c9&cur_album_id=3753444636422111232&scene=189#wechat_redirect

1.1、props属性
// 定义属性
const props = defineProps({
// 这里使用 modelValue ，这样就可以在父组件直接使用 v-model 双向绑定
// 如果不写 modelValue ，那么父组件中，就必须使用 v-model:属性名称 绑定数据
modelValue: {
    type: Boolean,
    default: false
  },
title: {
    type: String,
    default: '提示'
  },
});

1.2、emits事件
//其中'update:modelValue'表示属性的双向绑定事件，作用类似于v-model
const emit = defineEmits(['update:modelValue', 'close', 'confirm']);
//触发事件
emits('事件名称', 事件参数);


1.3、watch监听
// 监听属性变化
watch(() => props.modelValue, (newVal) => {
  // 通知父组件，数据发生变化
  emits('update:modelValue', newVal);
  console.log('数据发送变化===>', newVal);
  //深度监听属性变化
  //组件挂载的时候是否立即执行一次watch方法。
}, {deep: true,immediate:true});

1.4 v-model 双向绑定
v-model默认的props的属性名称是 modelValue，
即v-model:modelValue="value"，简写成v-model="value"



```

```text
《Vue3》第06节：Vue3项目引入Vuex状态管理插件
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485651&idx=1&sn=ddcc1069e9375844af9e60a6a3f713c7&chksm=f98245bfcef5cca9c038051fd1e14b2a45214149d8ba43532172043f7d811e83daa7c1c972de&cur_album_id=3753444636422111232&scene=189#wechat_redirect

概念： 状态管理插件，用于管理项目中的共享状态，包括用户信息、购物车、订单等。
相当于缓存的作用，只是这是应用级别的缓存，不会保存在浏览器中。可以跨页面共享。

1 安装vuex
# 安装 Vuex 依赖
npm install vuex

2 目录结构,注意store/modules 目录一个js文件就是一个vuex模块
- src
 - store
  - index.js
  - getters.js
  - modules
   - login.js
   - user.js
   - 其他的模块....
   
 2.1 在store/modules 目录下，新建一个login.js文件，用于管理登录状态，比如登录、登出、获取用户信息等。
     新建一个user.js文件，用于管理用户信息，比如获取用户信息、修改用户信息等。   

2.3 新建getters.js文件。（在src/store目录下）
注意：使用getters获取的状态变量，相当于计算属性，也就是说，当其他地方修改了这个变量之后，
那么所有使用到这个变量的地方，数据会立马发生相应的变化。

3 main.js挂载Vuex

4 概念解释 state, commit, dispatch, getters
const actions = {
    updateTokenValue({commit},tokenValue){
        commit('SET_TOKEN_VALUE',tokenValue)
    },
    updateTokenValue2( { state, commit, dispatch, getters },tokenValue){
        console.log( 'state',state  )
        console.log(  'commit==>调用mutations对象中的方法',commit,  )
        console.log(  'dispatch==>调用actions中的方法', dispatch  )
        console.log( 'getters', getters )
        
        //调用mutations对象中的方法
        // commit('SET_TOKEN_VALUE',tokenValue)
        //调用actions中的方法
        dispatch('updateTokenValue',tokenValue)
    }
}

5     state, mutations, actions 三者的区别
5.1 state 
它是vuex的一个全局响应式的对象，所有组件都可以通过 this.$store.state 访问它。
特点
存储全局状态：state 是应用的单一数据源，所有组件的状态都存储在这里。
响应式：state 是响应式的，当状态发生变化时，Vue 会自动更新视图。
不可直接修改：state 的值不能直接修改，必须通过 mutations 或 actions 来修改。

5.2 mutations 
目的用于修改 state 的方法。它们是同步的，必须直接修改 state 的值。
特点
同步操作：mutations 必须是同步的，不能包含异步操作。
直接修改 state：mutations 是唯一可以直接修改 state 的地方。
必须有类型：每个 mutation 都有一个唯一的类型（字符串），用于区分不同的操作。
#方法示例
SET_TOKEN_VALUE(state,value){}
state：state 是当前组件的 state 对象，可以通过 state 访问当前组件的状态。
value：value 是要修改的 state 的值。

5.3 actions 
目的是执行 mutations/actions中的方法，但它们可以包含异步操作。
actions 通常用于处理复杂的逻辑，如 API 调用或多个 mutations 的组合。
特点
异步操作：actions 可以包含异步操作，如 API 调用。
触发 mutations：actions 通过调用 mutations 来修改 state。
灵活的逻辑：actions 可以包含复杂的逻辑，如条件判断、多个 mutations 的组合等。

#方法示例
 updateTokenValue( { state, commit, dispatch, getters },tokenValue){}
state：state 是当前组件的 state 对象，可以通过 state 访问当前组件的状态。
commit：commit 是用于调用 mutations 的方法，用于修改 state。
dispatch：dispatch 是用于调用 actions 的方法，用于执行异步操作。
getters：getters 是用于计算属性的，它们是只读的，不能修改 state 的值。

5.4 getters
使用getters获取的状态变量，相当于计算属性，
也就是说，当其他地方修改了这个变量之后，那么所有使用到这个变量的地方，
数据会立马发生相应的变化。

5.5 概况的来说
通过store.dispatch可以调用actions中的方法
 store.dispatch('login/updateTokenValue', Math.random());
 store.dispatch('login/updateTokenValue2', Math.random());
 通过store.commit可以调用mutations中的方法
 store.commit('login/SET_TOKEN_VALUE',Math.random());


```


```text

《Vue3》第05节：Vue3项目引入Axios插件实现网络通信
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485399&idx=1&sn=f84e4117a7f0407991ce3ce0f705042e&chksm=f9824abbcef5c3adb09f57ff3912da7c95c9a5cac3780d712fe0b9173be3aa6713587b61b657&cur_album_id=3753444636422111232&scene=189#wechat_redirect
1.1、安装依赖
# 安装 Axios
npm install axios

1.2、新建request.js文件
import axios from 'axios'
import {ElMessage} from "element-plus";

//配置统一的请求根路径，超时时间，请求头等参数
const  $axios = axios.create({
    //.......................
})

//配置请求拦截器，对请求做一些预处理
//比如设置 token，请求头等参数
$axios.interceptors.request.use(
    //.......................
 )

//配置相应拦截器
$axios.interceptors.response.use(
    //.......................
)

export default $axios

1.3、配置服务代理

    server:{
        port:3500,
        host:'0.0.0.0',
        open:true,
        //配置代理服务器
        proxy:{
            '/api':{
                target: 'http://localhost:65535',
                // 允许跨域，后端也需要同步设置跨域
                changeOrigin:true,
                // 路径重写，所有以 /api 开头的请求，其中 /api 部分都将被替换为空字符串
                // 举个例子：请求 /api/user 将会被代理到 http://127.0.0.1:8080/api-v2/user
                rewrite:path=>path.replace(/^\/api/,'')
            }
        }

    },



```


```text

《Vue3》第04节：VueRouter路由组件的用法介绍
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485398&idx=1&sn=3b079cce8f2dc01df3e240b162ad14c3&chksm=f9824abacef5c3ac3a4592aaa5d995341b1166c2701cd37e8e455422af24d9fb7b3601205d74&cur_album_id=3753444636422111232&scene=189#wechat_redirect
1.1、<router-link>标签
to 属性：路由地址 to="/a/page" :to="{path:'/a/page',query{id:1}"
tag 属性：标签标签，默认是a标签，可以设置为div标签，span标签等
replace 属性：是否替换当前路由，默认是false，不替换，true是替换
active-class 属性：激活时的样式
exact-active-class  精确匹配路由时候，激活状态的css样式。
注意： <router-link>标签可以在不进行页面刷新的情况下，改变浏览器的URL地址，
并触发相应路由的更新，使得<router-view>组件能够渲染与新路由对应的内容。

1.2、<router-view>标签
作用： <router-view>标签的作用是指定路由视图，
也就是指定显示具体路由组件的区域，它相当于一个路由区域占位符，
当路由切换的时候，会将路由对应的组件内容显示在<router-view>标签所在的位置之上。

注意： 需要注意的是，一个<router-view>标签只能显示一层路由，
如果在router/index.js文件中存在多级嵌套路由，
那么在对应的父路由组件中，也必须使用<router-view>标签，
这样才可以将子路由的内容显示到父路由组件中指定的位置。

通俗解释： 父组件会将子组件渲染在<router-view>标签所在的位置。

1.3、router对象
import {useRoute,useRouter} from 'vue-router'

//当前路由route对象
const  route  = useRoute()
//router对象
const   router  = useRouter()
  console.log('route',route)
  console.log('router',router)


1.4、options属性
router对象中有一个options属性，而options属性包含如下2个属性
  routes 该对象是当前项目中所有路由信息组成的一个数组
 history 对象其实就是浏览器中的window.history历史访问记录对象。

1.5、路由跳转
router对象中提供了几个路由跳转的方法，
router.push() 最常用 跳转到指定路由地址，不会替换历史访问记录中的当前路由。
router.replace()  最常用 跳转到指定路由地址，会替换历史访问记录中的当前路由。
router.go()  url历史记录中 前进或者后退num个路由，例如：router.go(2)就是前进2个路由。
router.back() 后退1个路由，也就是等价于router.go(-1)的作用。
router.forward() 前进1个路由，也就是等价于router.go(1)的作用。


1.6、useRoute方法
route.name可以获取到index.js路由配置文件中指定的name属性值。
route.meta可以获取到index.js路由配置文件中指定的meta属性值，meta是允许用户自定义的属性
route.query可以获取到路由传递的参数，query参数是显示在浏览器地址栏中的，用户可以看得见。
route.params可以获取到动态路由传递的参数，params参数会动态替换到路由路径里面。
route.path可以获取当前访问的路由路径,不包含?后面的查询参数
route.fullPath可以获取完整的路由访问路径，也就是地址栏中端口之后的所有内容。
route.hash可以获取到地址栏中的hash字符串，也就是地址栏中#号之后的所有内容。

1.7、动态路由跳转
方式1 通过<router-link>标签跳转
<router-link :to="{name:'demo_B',params:{id:1,name:'张三'}}">跳转到B页面</router-link>

方式2 通过router对象跳转页面

//1 路由定义如下
{
 // 动态路由定义格式
 // 路由路径/:路由参数1/:路由参数2
 path:'B/:id/:name',
 name:'demo_B',
 component:()=>import('../components/demo02/DemoB.vue')
}
//跳转代码如下
router.push({
"path":""
})

传递参数方式如下
<router-link :to="{name:'demo_B',params:{id:1,name:'张三'}}">跳转到B页面</router-link>
<router-link :to="{name:'demo_B/3/tom'}}">跳转到B页面</router-link>


```

```text
《Vue3》第03节：Vue3项目引入VueRouter路由组件
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485397&idx=1&sn=075052fce067217f6c701803e4e38ced&chksm=f9824ab9cef5c3af90dffd882e1c9ec428ea0fba1ae8ea31e43fe52d28d646e8d543c41480f4&cur_album_id=3753444636422111232&scene=189#wechat_redirect

路由的作用:切换页面：原理时将url地址映射到配置的vue文件

1.1、安装路由依赖
# 安装 VueRouter 依赖
npm install vue-router

1.2、配置路由文件
import {createRouter,createWebHistory} from "vue-router";

 const routes = [
      {
     path: "/demo03",
     children: [
         {
             path: 'a/page',
             component: () => import('../components/demo03/PageA.vue')
         },
         {
             path: 'b/page',
             component: () => import('../components/demo03/PageB.vue')
         }
     ]
 },
 ]

const  router = createRouter({
    history: createWebHistory(),
    routes
})

export default router
1.4、main.js引入配置
// 引入路由
import router from './router';
// 使用路由
app.use(router);


```
```text
《Vue3》第02节：Vue3项目引入ElementPlus组件库
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485329&idx=1&sn=bfeaf20b8ed7086394e97d17183170c5&chksm=f9824afdcef5c3eb19642d7cfd66f10b7726a5b5fda7fc9f5cf6a6282d7e8b6b107e8121118d&scene=178&cur_album_id=3753444636422111232#rd
1.1、安装Element Plus依赖
npm install element-plus

1.2、安装图标依赖
npm install @element-plus/icons-vue

1.3、main.js引入组件

//引入element-plus组件
import ElementPlus from 'element-plus'
//引入 Element Plus 的 CSS 样式
import 'element-plus/dist/index.css'
//引入Element Plus图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'


//注册图标
for(const [key,component] of Object.entries(ElementPlusIconsVue)){
    console.log('打印图标的kv==',key,component)
    //注册组件
    app.component(key,component)
}
// app.use(ElementPlus)
app.use(ElementPlus,{size:'small'})



```


```text

《Vue3》第01节：Vue3+Vite项目基础环境搭建
https://mp.weixin.qq.com/s?__biz=MzUxODgyMjkxNQ==&mid=2247485311&idx=1&sn=61d5a1c05ff92b1e8d5d09c343984d03&chksm=f9824a13cef5c3052f8cf4afcbc27bb8430203c844bb1253539c1115737e4f8769d092114b0f&scene=178&cur_album_id=3753444636422111232#rd

npm init

npm install vue

npm install vite

npm install @vitejs/plugin-vue
#安装这个依赖，防止打包时报错
npm install terser --save-dev

```


```text


项目的目录结构

- node_modules   存放项目第三方依赖。
- public   其他静态资源，如favicon.ico等静态资源。
- src
  - api   和服务端接口交互的文件。
  - assets   放置项目中的静态资源。
  - components  存放可复用的Vue组件。
  - router   配置项目路由信息。
  - store   全局状态管理。
  - views（或pages）  存放页面级别的Vue组件。
  - util   通用工具。
  - App.vue   Vue应用的根组件。
  - main.js   项目的入口文件。
- package.json   项目的配置文件，记录项目依赖的库及其版本等。
- README.md   项目的说明文档。
- index.html   项目在浏览器端的入口HTML文件。




```


```text
npm 命令详解
npm install 根据package.json文件中的dependencies和devDependencies字段安装依赖。

npm install --production
仅安装 dependencies，跳过 devDependencies，适用于生产环境。

npm install --save-dev xxxx
将包添加到 devDependencies 中，适用于开发环境。

npm install -g xxxx
全局安装包，适用于 CLI 工具等。

npm install --no-save xxxx
不记录依赖到 package.json 文件中，适用于临时安装。

npm install --force xxxx
强制安装包，适用于临时安装。

npm install --legacy-peer-deps xxxx
解决依赖版本冲突问题,适用于某些旧版本的包。

npm install <package-name>@<version>
安装特定版本的包。

npm install <package-name>@latest
安装最新版本的包。

npm install https://github.com/user/repo.git
安装网络包




```
=============================================================================================================
在 Vue.js 中，`app.use()` 和 `app.component()` 是两种不同的方法，用于不同的目的。以下是它们的区别和具体用法：

### **1. `app.use()`**
`app.use()` 是一个全局注册方法，用于注册插件（plugins）。插件通常用于扩展 Vue 的功能，例如添加全局组件、指令、过滤器或修改 Vue 的内部行为。

#### **特点**
- **全局注册**：插件通常会影响整个 Vue 应用。
- **扩展功能**：用于添加全局功能，如路由、状态管理、国际化等。
- **参数**：通常接受一个插件对象或函数，插件可以返回一个对象或函数来扩展 Vue。

#### **示例**
```javascript
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp({});

// 使用 ElementPlus 插件
app.use(ElementPlus);

app.mount('#app');
```

在这个例子中，`ElementPlus` 是一个插件，通过 `app.use()` 注册后，整个应用都可以使用 Element Plus 提供的组件和功能。

### **2. `app.component()`**
`app.component()` 是一个方法，用于全局注册组件。全局注册的组件可以在应用的任何地方使用，而不需要在每个文件中单独导入。

#### **特点**
- **全局注册**：组件可以在整个应用中使用。
- **简化代码**：避免在每个文件中重复导入组件。
- **参数**：接受组件名称和组件定义。

#### **示例**
```javascript
import { createApp } from 'vue';
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';

const app = createApp({});

// 全局注册 FontAwesomeIcon 组件
app.component('font-awesome-icon', FontAwesomeIcon);

app.mount('#app');
```

在这个例子中，`FontAwesomeIcon` 是一个组件，通过 `app.component()` 注册后，可以在应用的任何地方使用 `<font-awesome-icon>` 标签。

### **3. 区别**
| 特性 | `app.use()` | `app.component()` |
|------|-------------|-------------------|
| **用途** | 注册插件，扩展全局功能 | 注册全局组件 |
| **参数** | 插件对象或函数 | 组件名称和组件定义 |
| **影响范围** | 整个 Vue 应用 | 整个 Vue 应用 |
| **示例** | `app.use(ElementPlus)` | `app.component('font-awesome-icon', FontAwesomeIcon)` |

### **4. 总结**
- **`app.use()`**：用于注册插件，扩展 Vue 的全局功能。
- **`app.component()`**：用于全局注册组件，使组件可以在应用的任何地方使用。

在你的代码中：
```javascript
app.use(ElementPlus); // 注册 ElementPlus 插件
app.component('font-awesome-icon', FontAwesomeIcon); // 全局注册 FontAwesomeIcon 组件
```

- `app.use(ElementPlus)`：注册了 Element Plus 插件，使整个应用可以使用 Element Plus 提供的组件和功能。
- `app.component('font-awesome-icon', FontAwesomeIcon)`：全局注册了 `FontAwesomeIcon` 组件，可以在任何地方使用 `<font-awesome-icon>` 标签。

希望这些信息对你有帮助！