# EasyPlayAdminVue3

**Repository Path**: a-lover-in-autumn/easy-play-vue-test

## Basic Information

- **Project Name**: EasyPlayAdminVue3
- **Description**: 测试版本的Vue3脚手架，帮助小白快速上手开发
- **Primary Language**: TypeScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-09-09
- **Last Updated**: 2024-05-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# EasyPlayVue3
## EasyPlayVue3是干什么的？
* 为了快速搭建Admin项目的脚手架
* 项目结构简单
* 帮助小白迅速上手
* 项目构建基于 **Vue3 + Vite + Pinia** 
* 推荐使用 **pnpm** 来运行项目
---
## 快速开始
 如果你还未安装 pnpm 请使用以下命令安装
```
npm i pnpm -g
```
 安装项目依赖
```
pnpm install
```
启动项目
```
pnpm dev
```
---
## 使用说明
1. 如果你是Vue3小白，希望直接上手写页面的，那么你只需要搞清楚两个地方
    * `/src/router/common.router.tsx` 这里是用户路由配置页面
    * `/src/views/@Admin/` 这里是用户写页面的地方，在这新建一个文件后，再将该文件的路由放到 `/src/router/common.router.tsx` 中，你就可以看到你创建的页面了。
    * 例如在 `/src/views/@Admin/` 下我创建了文件 `Test.vue`，并写入了以下代码
        ```
        <script setup lang="ts"></script>
        <template>
            <h2>这里是 Test 页面</h2>
        </template>

        ```
        那么我只需要在 `/src/router/common.router.tsx` 中的`CommonRouter`这个列表中加入对应的路由
        ```
        {
            path: "Test",
            name: "Test",
            title: "Test 页面",
            icon: <ThunderboltOutlined />,
            component: () => import("../views/@Admin/Test.vue"),
        }
        ```
        你就可以在左侧导航栏上看到这个Tab了，点击就会到达Test页面