# vue3-admin

**Repository Path**: sephriese/vue3-admin

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-17
- **Last Updated**: 2024-09-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

# 构建基本的vue-vant-template的工程结构 

## 解决setup name的问题

使用 vite-plugin-vue-setup-extend 插件

```
// vite.config.js
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [
    VueSetupExtend()
  ]
})

```

## 解决 API 自动导入

使用 unplugin-auto-import 插件

```
// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      // dts: 'src/auto-imports.d.ts', // 可以自定义文件生成的位置，默认是根目录下
      imports: ['vue']
    })
  ]
})

```

## 去掉.value

推荐使用插件  @vue-macros/reactivity-transform/vite

https://vue-macros.dev/features/reactivity-transform.html

```
import { defineConfig } from 'vite'
import ReactivityTransform from '@vue-macros/reactivity-transform/vite'

export default defineConfig({
  plugins: [
    vue(),
    ReactivityTransform()
  ]
})

```

在查阅了一些资料以后，发现，这样子使用会带来一些 双向绑定上的响应问题，需要在使用 $$() 包裹以后去解决，带来了一定的心智负担，很难去评价，这个模式和.value那个更优秀

具体问题可以查看vue3官方文档，问题的总结基本就是函数的返回值是$ref()转义过的对象或者值的话，就需要在返回值外面用$$()包裹一下，在处理一次

## 自动导入图片

使用  vite-plugin-vue-images 插件

没使用插件的时候

```
<template>
  <img :src="Logo" />
</template>

<script lang="js" setup>
import Logo from '@/assets/image/logo.png'
</script>

```

```
// vite.config.js
import { defineConfig } from 'vite'
import ViteImages from 'vite-plugin-vue-images'

export default defineConfig({
  plugins: [
    ViteImages({
      dirs: ['src/assets/image'] // 指明图片存放目录
    })
  ]
})

```

直接使用就好了，名字的大小写不敏感
```
<template>
  <img :src="Logo" />
</template>

```
# 构建vant 样式库

## 按需引入

npm i @vant/auto-import-resolver unplugin-vue-components -D

具体配置项

``` 
// vite.config.ts
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ]
};

```

另外，根据官方文档 需要 额外引入 函数组件，可以定义一个文件，在main文件中引用，具体的组件是 Toast，Dialog，Notify 和 ImagePreview


# permission 中调用function promise, 使用then的方式会报错

router.beforeEach 中调用 store中的user对象实例中的方法，涉及到一些方法，比如getUserInfo的时候，我使用了.then的方式，就是会报错，`The "next" callback was never called inside of` 大概是在function中需要去调用next来返回，但是我实际是有用到 next 回调的，不知道为什么没有找到，一直找不到原因，但是换成 async await就可以了，之后看一下源码找一下原因，
在vue-router 中，调用了 guardToPromiseFn方法，其中校验了回调函数的使用方式是否一致，如果都是 await，就保持一至，就不会发出警告。

注释是 // wrapping with Promise.resolve allows it to work with both async and sync guards

检测方法如下

```
 // wrapping with Promise.resolve allows it to work with both async and sync guards
        const guardReturn = guard.call(record && record.instances[name], to, from, (process.env.NODE_ENV !== 'production') ? canOnlyBeCalledOnce(next, to, from) : next);
        let guardCall = Promise.resolve(guardReturn);
        if (guard.length < 3)
            guardCall = guardCall.then(next);
        if ((process.env.NODE_ENV !== 'production') && guard.length > 2) {
            const message = `The "next" callback was never called inside of ${guard.name ? '"' + guard.name + '"' : ''}:\n${guard.toString()}\n. If you are returning a value instead of calling "next", make sure to remove the "next" parameter from your function.`;
            if (typeof guardReturn === 'object' && 'then' in guardReturn) {
                guardCall = guardCall.then(resolvedValue => {
                    // @ts-expect-error: _called is added at canOnlyBeCalledOnce
                    if (!next._called) {
                        warn(message);
                        return Promise.reject(new Error('Invalid navigation guard'));
                    }
                    return resolvedValue;
                });
            }
            else if (guardReturn !== undefined) {
                // @ts-expect-error: _called is added at canOnlyBeCalledOnce
                if (!next._called) {
                    warn(message);
                    reject(new Error('Invalid navigation guard'));
                    return;
                }
            }
        }

```