# vite-admin

**Repository Path**: jxmlearner/vite-admin

## Basic Information

- **Project Name**: vite-admin
- **Description**: vue3 + vite + element-plus版本的后台管理系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-25
- **Last Updated**: 2024-01-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 开始

```shell
pnpm create vite

pnpm i vue-router pinia

pnpm i sass -D

pnpm i axios
pnpm install element-plus
pnpm i @vueuse/core
pnpm i nprogress
```

## vueuse 文档

```js
// http://www.vueusejs.com/guide/

import { useFullscreen } from '@vueuse/core'

const { isFullscreen, enter, exit, toggle } = useFullscreen()


const el = ref<HTMLElement | null>(null)

const { isFullscreen, enter, exit, toggle } = useFullscreen(el)

<video ref='el'>

```

## pinia 本地数据持久化

[pinia-plugin-persistedstate](https://prazdevs.github.io/pinia-plugin-persistedstate/zh/)

1. 安装插件： `npm i pinia-plugin-persistedstate`

2. 将插件添加到 `pinia` 实例上

① main.js 里导入持久化插件：import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

② app.use(pinia.use(piniaPluginPersistedstate))

3. .js 文件里，第三个参数的位置：

export const useChannelStore = defineStore('channel', () => {

}, {
persist: true
})

## vue 多页签方案

https://juejin.cn/post/7158017171816185869

## 菜单说明

```
<div class="layout-container">
    <h1>路由菜单配置</h1>
    <article>
      <section>
        <p>路由配置是整个系统的核心部分，整个架构的设计基于动态路由的概念，把路由分为了<b>基础路由</b>（包括了404路由、401路由、登录路由）+<b>页面路由</b>（文档路由、首页、组件、页面等等）。
        基础路由是在系统一进入就进行初始化好的，而页面路由是在系统登录之后才会加入到页面中，有效地杜绝了未授权访问等问题。</p>
        <p>所有路由需要关注的核心页面为：<b>router/index.ts</b>（js版本为router/index.js文件）, 在这个文件里面包含了路由的所有配置，包括了登录拦截、动态路由添加的逻辑等。</p>
        <p>当你需要由后台来控制路由的时候，这时候你就可以先请求后台路由接口，然后拿后台生成的权限路由数据来对比本地动态路由<b>asyncRoutes变量</b>，然后即可生成你自己的路由，包括了自定义名称、自定义路径 、自定义图标、自定义路由层级等。</p>
        <h3>常用配置参数清单</h3>
        <ul>
          <li>path: 路由地址，必填项</li>
          <li>component: 使用的组件，必填项</li>
          <li>redirect: 重定向地址，非必填</li>
          <li>alwayShow: 布尔类型，当子级只有一个时，是否展示父级菜单，true表示总是展示，false表示不展示，默认为false</li>
          <li>hideMenu: 是否隐藏菜单，可选</li>
          <li>meta: 基础元数据，是一个对象，包括了下列属性
            <ul>
              <li>title: 非国际化版本为<b>标题</b>，国际化版本为可供<b>$t函数</b>调用的<b>对象层级字符串</b>，必填项</li>
              <li>icon: 图标，非必填</li>
              <li>cache: 布尔类型，是否开启缓存功能，true表示开启，false表示关闭，默认为false, 非必填，目前仅支持在二级菜单上使用，暂不支持三级及三级以上菜单使用（社区难题，有待解决）</li>
              <li>hideTabs?: 布尔类型，是否在tab栏隐藏</li>
              <li>activeMenu?: 字符串类型，用于左侧菜单强制聚焦的路由</li>
              <li>自定义元数据，用于在其它定制化场景使用</li>
            </ul>
          </li>
          <li>children: 子路由（如果需要子路由，父级的comonent需要为Layout组件/Menu组件（在router/modules/menu.ts文件中有示范）/自定义父级组件）</li>
        </ul>
      </section>
    </article>
</div>
```

## setup语法定义组件name优化
```
# 安装
pnpm i unplugin-vue-setup-extend-plus

# vite.config.js中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        vueSetupExtend({
            /* options */
        })
    ],
    resolve: {
        alias: {
            '@': '/src'
        }
    }
})

# 在组件中就可以如下定义name了
<script setup name="secretCustomer">
...
</script>
```

## 参照

https://gitee.com/hsiangleev/element-plus-admin

https://blog.csdn.net/qq_61402485/article/details/132679904

## 天气插件
https://widget.qweather.com/create-simple

```
pnpm i dayjs
```

## 增加echarts
```
pnpm i echarts

```