# vue3-admin-show

**Repository Path**: liusi/vue3-admin-show

## Basic Information

- **Project Name**: vue3-admin-show
- **Description**: ssssssssssss
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-10
- **Last Updated**: 2024-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## axios 简易封装

推荐使用 @/request/index.ts 发送请求，基于 axios 的封装，便于统一处理

POST，GET 等请求参数，请求头，以及错误提示信息等。具体可以参看 @/request/index.ts 它封装了全局 request 拦截器、response 拦截器、统一的错误处理、baseURL 设置等。

### 接口定义

所有的接口应定义在 @/api 文件夹内。

### 跨域问题

本地代理 这个自行百度配置

## 便捷功能

### 组件全局引用

```js
// components/index.ts

import StaticFile from '@/components/common/StaticFile.vue'
import SvgIcon from '@/components/common/SvgIcon.vue'
import MButton from '@/components/mobile/button/index.vue'

export const components = [StaticFile, SvgIcon, MButton] //需要全局引用的组件在这里注册

export const plugins = [] //需要全局引用的插件在这里注册
```

### script 标签支持 name 属性

setup 语法大大简化冗余代码，释放了我们的双手，但有我们仍可以做一些更加方便的优化。

> script 标签支持 name 属性

使用 setup 语法带来的第一个问题就是无法自定义 name，而我们使用 keep-alive 往往是需要 name 的，解决这个问题通常是通过写两个 script 标签来解决，一个使用 setup，一个使用 defineComponent，但是这种语法看起来十分奇怪：

```vue
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: '***'
})
</>

<script lang="ts" setup>
// ...
</script>
```

借助插件 vite-plugin-vue-setup-extend 解决了这个问题，可以直接在 script 标签上定义 name：

```vue
<script lang="ts" setup name="***">
// ...
</script>
```

### API 自动导入

对于一些常用的 Vue3 API，比如 ref、computed、watch 等，每次都需要我们在页面上手动进行 import，通过 unplugin-auto-import 实现自动导入，无需 import 即可在文件里使用 Vue 的 API。

```vue
<script lang="ts" setup name="***">
const count = ref(0)

onMounted(() => {
  console.log('mounted')
})
</script>
```

### 关于 .value

ref 要求我们访问变量时需要加上.value，如果这让你觉得难受，你可以通过开启官方提供的另一种方式，在 ref 前加上 $，该功能默认是关闭状态，你可以手动开启：

```js
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      refTransform: true // 开启ref转换
    })
  ]
})
```

开启后你可以这样写：

```vue
<script lang="ts" setup name="***">
let count = $ref(1)

const addCount = () => {
  count++
}
</script>
```

## 文件路由

### 内置 Meta 配置

vue-router 我们可以自定义的类型就是 meta，在路由配置中，集成了权限验证、页面标题、页面缓存：

属性|说明| 类型 |默认值
title|页面独立的标题| string |-
auth|此路由是否需要进行登陆权限验证 |boolean |false

## 自动注册 Svg 图标

在 src/assets/icons 文件夹下的 svg 图表会被自动注册，这是因为使用了 vite-plugin-svg-icons 插件进行了相关设置，文件全部打包成 svg-sprite。

### 内置组件

通过全局注册的组件 <svg-icon /> 即可显示已经注册的 svg 图表。

首先将下载的 .svg 图标放入 @/assets/icons 文件夹下，然后使用组件：

```js
<svg-icon name="filename" />
```

属性|说明 |类型 |默认值
name|放置在 @/assets/icons 文件夹下的文件名| string |-
fill|颜色填充，使用此项会默认覆盖图标颜色| string |-

### 静态资源

```js
<static-file src="filePath" type="img" />
```

属性|说明|类型 |默认值
src|静态资源的路径 |string |-
type|文件类型，仅支持 img、video、audio| 'img', 'video', 'audio' |'img'
autoplay|如果是 video 类型，可以控制视频是否自动播放 |boolean |true

## Hooks

### 内置 Hook

useClipboard

> 基于 clipboard@2.0.6 的文本复制 vue 指令。

```js
import useClipboard from '@/hooks/useClipboard'

const { copyText } = useClipboard()
```

参数|说明|类型|默认值
copyText|复制的内容 |(text: string) => void |-

useDevice

> 获取设备信息，可针对不同终端进行适配。

```js
import useDevice from '@/hooks/useDevice'

const { deviceType, deviceOrientation, deviceOs } = useDevice()
```

参数|说明|类型|默认值
deviceType|当前设备类型|<DeviceType>|-
deviceOrientation|当前设备定位(方向)|<DeviceOrientation>|-
deviceOs|操作系统|<DeviceOs>|-

useFullscreen

> 用于实现浏览器全屏。

```js
import useFullscreen from '@/hooks/useFullscreen'

const { screenfullActive, toggleScreenfull, openScreenfull, closeScreenfull } = useFullscreen()
```

参数|说明|类型|默认值
screenfullActive|是否全屏的状态|boolean|false
toggleScreenfull|切换全屏|() => void| -
openScreenfull|开启全屏|() => void |-
closeScreenfull|关闭全屏|() => void| -

## 状态管理

### 什么是 Pinia ？

由于 vuex 4 对 typescript 的支持让人感到难过，所以状态管理弃用了 vuex 而采取了 pinia。

#### 创建 Store

Pinia 已经内置在脚手架中，并且与 vue 已经做好了关联，你可以在任何位置创建一个 store：

```js
import { defineStore } from 'pinia'

export const useUserStore = defineStore({
  id: 'user',
  state: () => ({}),
  getters: {},
  actions: {}
})
```

#### State

创建好 store 之后，可以在 state 中创建一些属性了，

```js
state: () => ({ name: 'codexu', age: 18 })
```

将 store 中的 state 属性设置为一个函数，该函数返回一个包含不同状态值的对象，这与我们在组件中定义数据的方式非常相似。

#### 在模板中使用 store

> 注意这里并不需要 userStore.state.name

现在我们想从 store 中获取到 name 的状态，我们只需要使用以下的方式即可：

```js
<h1>{{userStore.name}}</h1>

const userStore = useUserStore()
return { userStore }
```

虽然上面的写法很舒适，但是你一定不要用解构的方式去提取它内部的值，这样做的话，会失去它的响应式：

```js
const { name, email } = useUserStore()
```

#### Getters

Pinia 中的 getter 与 Vuex 中的 getter 、组件中的计算属性具有相同的功能，传统的函数声明使用 this 代替了 state 的传参方法，但箭头函数还是要使用函数的第一个参数来获取 state ，因为箭头函数处理 this 的作用范围：

```js
getters: {
  nameLength() {
    return this.name.length
  },
  nameLength: state => state.name.length,
  nameLength: ()=> this.name.length ❌
}
```

#### Actions

这里与 Vuex 有极大的不同，Pinia 仅提供了一种方法来定义如何更改状态的规则，放弃 mutations 只依靠 Actions，这是一项重大的改变。

Pinia 让 Actions 更加的灵活

- 可以通过组件或其他 action 调用
- 可以从其他 store 的 action 中调用
- 直接在商店实例上调用
- 支持同步或异步
- 有任意数量的参数
- 可以包含有关如何更改状态的逻辑（也就是 vuex 的 mutations 的作用）
- 可以 $patch 方法直接更改状态属性

```js
actions: {
  async insertPost(data){
    await doAjaxRequest(data);
    this.name = '...';
  }
}
```