# LeeUITest

**Repository Path**: uf_lee/lee-ui-test

## Basic Information

- **Project Name**: LeeUITest
- **Description**: LeeUI的案例及测试代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-09
- **Last Updated**: 2025-11-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LeeUI的测试项目

使用 Vue 3 + TypeScript + Vite

测试项目地址：https://github.com/uf_lee/lee-ui-test

# 开发步骤记录
## 创建项目
1. npm init vite lee-ui-test -- --template vue-ts
2. cd lee-ui-test
3. npm install
4. npm install @uf_lee/leeui 

## 配置@解析
1. npm install @types/node@18.7.18 -D
2. 修改vite.config.ts
```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

function resolvePath(paths:any) {
    return path.resolve(__dirname, paths)
}

export default defineConfig({
  base: './',
  plugins: [vue()],
  resolve: {
    alias: {
        '@': resolvePath('src')
    },
  },
})
```
3. 修改tsconfig.json
```json
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
    	"@/*": ["src/*"]
    }
  }
}
```
4. 修改vite-env.d.ts 让其支持vue文件（主要是vscode报错）
```typescript
declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}
```

## 安装路由
1. npm i vue-router -S
2. 添加路由配置文件 src/router/index.ts
```typescript
import { createRouter, createWebHashHistory } from "vue-router";
import type { App } from "vue";
// 引入布局组件
import CaseLayout from '@/layouts/CaseLayout.vue'
export const routes = [
    {
        path: "/",
        redirect: "/home",
    },
    {
        path: "/home",
        component: () => import("@/pages/home/index.vue"),
        name: "Home",
        meta: {
            hidden: true,
            title: "首页",
            noTagsView: true,
        },
    }
];
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
export const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
});
export const setupRouter = (app: App<Element>) => {
    app.use(router);
};
export default router;
```
3. 修改src/main.ts
```typescript
...
// 路由
import { setupRouter } from "./router";

// 创建实例
const setupAll = async () => {
    const app = createApp(App);
    setupRouter(app);
    app.mount("#app");
};
setupAll();
```
4. 修改src/App.vue
```html
<script setup lang="ts">
</script>

<template>
  <router-view></router-view>
</template>

<style scoped>
</style>
```

## 安装element-plus
1. npm i element-plus -S
2. 修改src/main.ts
```typescript
...
import "element-plus/theme-chalk/index.css";
import ElementPlus from "element-plus";
....
const setupAll = async () => {
    ...
    app.use(ElementPlus);
    ...
}
....
```