# vue3-cli-admin

**Repository Path**: Hijackme666/vue3-cli-admin

## Basic Information

- **Project Name**: vue3-cli-admin
- **Description**: vue3 + ts + vite 的 一个 脚手架（模板）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-07
- **Last Updated**: 2022-04-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

值得注意的点：

### a. router-view 动画

<router-view > 本身是一个组件！！！

<router-view #default="{Component}">

<Transition appear enter-active-class="">

<component :is="Component" />

</Transition>

</router-view>



可以通过默认插槽 结构出待渲染组件的组件，并添加动画效果！！！



### b.历史菜单

历史点击菜单的效果实现：

![tips1](D:\phpstudy_pro\WWW\lecturedemo\vue\2022-houdunren\vue3-cli-admin\screenshots\tips1.png)

想实现这种效果，



step1： 

定义一个历史路由 historyroutes [],

每次点击将路由压入historyroutes[],

最后循环 <router-view v-for="(v, i) in historyroutes">



思考： 直接这么做会有一个问题，点击任何的路由都会被记录， 而这里其实只需要记录侧边导航栏里的路由 其他的 不需要，这里压入 路由的时候，就需要判断是否是侧边栏的路由，所以最好在 定义注册路由的时候，在meta元信息中声明一个字段去区分！！！

### c. 全局响应式数据

vuex /pinia  vue 全局状态 state 的改变 尽量 使用 actions 去改变 mutations 也不是不行。但是 actions  异步更改更符合需求！！！一般都是 异步请求后有数据变化 后修改！！！



### d.

```
import {ref} from 'vue'
/* vue3 支持 组合式 compisition api 后， 可以定义全局的 响应式数据  */


class Menu { 
  public menus = ref<IMenu[]>([])
  public history = ref<IMenu[]>([])
}

export default new Menu()

这样 只要导入 这个 ts 文件， 就可以全局拿到这个响应式的 数据 menus 和 history 
```



### e. tailwindcss 



| tailwindcss 常见样式                    | 解释                                                         |
| --------------------------------------- | ------------------------------------------------------------ |
| <div class="grid grid-cols-[auto_1fr]"> | 表示 display： grid, 并且 按列划分为两列，一列自动，一列1fr  |
| 《div class="truncate"》                | truncate 表示截断， 这里表示  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 这三段代码 溢出截断为 ... 号 |

<div class="truncate">

### f. 全屏js用法

网页 全屏按钮 的实现方法：



document.documentElement.requestFullscreen() , 点击全屏按钮或者图标 执行这代码即可！！！

按esc  退出全屏  





### g.

路由 

import {useRouter, useRoute} from 'vue-router'

const router = useRouter()

两者区别：router 用于 路由跳转 route用于获取路由信息。

const route = useRoute()



route中  包含路由信息， 其中 有个 属性叫做 matched  包含 路由匹配的关系， 包含父级路由和子级路由。如果菜单栏路由都是循环出来的，并且都带有元信息（meta:{title:xxx}）,就可以通过这个matched  记录的父子路由来实现面包屑导航功能

![tips2](D:\phpstudy_pro\WWW\lecturedemo\vue\2022-houdunren\vue3-cli-admin\screenshots\tips2.png)



元信息 声明类型提示？

![tips3](./screenshots/tips3.png)



#### g.a.编程式添加（注册） 路由

vue-router4 除了在  createRouter（{}） 中去 注册路由外， 还可以 通过 路由操作对象 const router = useRouter() 来 通过 api 添加路由，

router.addRoute(route), 去编程式的 添加注册路由， 通过 这种方式  还有一个 好处就是 可以 去通过 权限 控制 路由， 后台给用户返回什么权限就展示 哪些板块， 不存在的路由权限就通过 上面的方式 ，遍历所有的路由， 剔除不属于用户的权限后再注册。 这样 即实现了权限控制！！！



### h. vuex 日志插件

vuex 中 自带的 logger 日志插件（vue2），

引入： import  logger from 'vuex/dist/logger'

使用： store/index.js 中：

plugins:[logger()]



vuex4中 （vue3）

import {createLogger} from 'vuex'

plugins:[createLogger()]