# vue-admin

**Repository Path**: openour/vue-admin

## Basic Information

- **Project Name**: vue-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**: 2025-10-22
- **Last Updated**: 2025-10-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-admin

一个vue学习实践的项目

## 项目的创建

```shell
npm create vite@latest vue3-demo
```

## 引入 element-plus

```shell
npm install element-plus
```

`main.js`

```javascript
// main.js
import {createApp} from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
```

`src/App.vue`

```vue

<script setup></script>

<template>
  <el-button type="primary">Hello Element Plus</el-button>
</template>

<style scoped></style>
```

## 路由

1. 先配置下`@``
   
   * `vite.config.js`
   
   ```javascript
   import {defineConfig} from 'vite'
   import vue from '@vitejs/plugin-vue'
   import path from 'path'
   
   export default defineConfig({
       plugins: [vue()],
       resolve: {
           alias: {
               '@': path.resolve(__dirname, './src'), // 👈 关键配置
           },
       },
   })
   ```

2. 安装表要的包

   ```shell
   npm install vue-router@4
   ```

3. 创建路由配置文件 `src/router/index.js`：

   ```javascript
   import {createRouter, createWebHistory} from 'vue-router'
   import Home from '@/views/Home.vue'
   import About from '@/views/About.vue'
   
   const routes = [
       {path: '/', name: 'home', component: Home},
       {path: '/about', name: 'about', component: About},
   ]
   
   const router = createRouter({
       history: createWebHistory(),
       routes,
   })
   
   export default router
   ```

4. `src/views/login/index.vue` 配置界面

5. 配置`src/App.vue`

   ```javascript
   <script setup></script>
   
   <template>
     <el-button type="primary">Hello Element Plus</el-button>
     <router-view></router-view>  <!-- 👈 关键点 -->
   </template>
   
   <style scoped></style>
   ```

6. 配置`src/main.js`

   ```java
   import {createApp} from 'vue'
   import App from './App.vue'
   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'
   import router from './router'
   
   createApp(App).use(router).use(ElementPlus).mount('#app')
   ```

## 引入Element 图标

### 安装依赖

```shell
npm install @element-plus/icons-vue
```





## 版本对应的实现

* v1.0.1 构建开发环境
    * v1.1.0 构建登录页面UI结构
      * V1.1.1 构建目录结构
      * V1.1.2 让login界面运行起来
    * v1.2.0 美化登录页面样式