# vue3-init

**Repository Path**: liang-tian-yu/vue3-init

## Basic Information

- **Project Name**: vue3-init
- **Description**: vue3+elementUI项目脚手架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-12
- **Last Updated**: 2025-08-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



## vue3-init

<p align=center>
    <a href="http://gitee.com/liang-tian-yu">vue3-init</a>
</p>
<p align="center">
<a target="_blank" href="http://gitee.com/liang-tian-yu">
    <img src="https://img.shields.io/badge/vue3-3.2.13-green" ></img>
    <img src="https://img.shields.io/badge/vuex-green" ></img>
    <img src="https://img.shields.io/badge/element-2.10.3-blue" ></img>
</a></p>

**vue3+elementUI 项目开发脚手架**

[TOC]



## 快速开始

- 安装依赖

```bash
npm install
```

- 启动开发

```bash
npm run dev
```

- 构建生产

```bash
npm run build
```

## 功能特性

- [x] 基础页面
- [x] 请求封装
- [x] 权限管理
- [x] 路由拦截
- [x] 全局状态管理(vuex)
- [x] 自定义权限指令
- [x] CRUD模板
- [x] 常用依赖及项目说明等信息

## 技术栈

### 核心框架
- **Vue 3.2.13** - 渐进式JavaScript框架
- **Vue Router 4.0.3** - Vue.js官方路由管理器
- **Vuex 4.0.0** - Vue.js的状态管理模式

### UI组件库
- **Element Plus 2.10.3** - 基于Vue 3的组件库
- **@element-plus/icons-vue 2.3.2** - Element Plus图标库

### 开发工具
- **TypeScript 5.3.3** - JavaScript的超集
- **Vue CLI 5.0.0** - Vue.js开发工具链
- **Less 4.4.1** - CSS预处理器

### 工具库
- **Axios 1.10.0** - HTTP客户端
- **Lodash 4.17.21** - JavaScript实用工具库
- **Day.js 1.11.13** - 轻量级日期处理库
- **File-saver 2.0.5** - 文件保存工具

### 构建工具
- **Webpack 5** - 模块打包工具
- **Babel** - JavaScript编译器
- **Copy Webpack Plugin** - 文件复制插件

## 项目结构

```
vue3-init/
├── public/                 # 静态资源目录
│   ├── favicon.ico        # 网站图标
│   └── index.html         # HTML模板
├── src/                   # 源代码目录
│   ├── access/           # 权限控制
│   │   ├── accessEnum.ts # 权限枚举
│   │   └── checkAccess.ts # 权限检查
│   ├── api/              # API接口
│   │   ├── book.ts       # 书籍相关API
│   │   └── user.ts       # 用户相关API
│   ├── assets/           # 资源文件
│   │   └── logo.png      # 项目logo
│   ├── components/       # 公共组件
│   │   └── GlobalHeader.vue # 全局头部组件
│   ├── config/           # 配置文件
│   │   └── index.ts      # 全局配置
│   ├── directive/        # 自定义指令
│   │   └── permission/   # 权限指令
│   │       └── hasRole.ts # 角色权限指令
│   ├── layouts/          # 布局组件
│   │   ├── BlankLayout.vue # 空白布局
│   │   └── MainLayout.vue  # 主布局
│   ├── plugins/          # 插件配置
│   │   └── axios.ts      # Axios配置
│   ├── router/           # 路由配置
│   │   ├── index.ts      # 路由入口
│   │   └── routes.ts     # 路由定义
│   ├── store/            # 状态管理
│   │   ├── index.ts      # Store入口
│   │   └── user.ts       # 用户状态
│   ├── utils/            # 工具函数
│   ├── views/            # 页面组件
│   │   ├── book/         # 书籍相关页面
│   │   ├── error/        # 错误页面
│   │   ├── sys/          # 系统管理页面
│   │   └── user/         # 用户相关页面
│   ├── App.vue           # 根组件
│   ├── global.less       # 全局样式
│   ├── main.ts           # 应用入口
│   └── shims-vue.d.ts    # Vue类型声明
├── babel.config.js       # Babel配置
├── package.json          # 项目依赖
├── tsconfig.json         # TypeScript配置
├── vue.config.js         # Vue CLI配置
└── README.md             # 项目说明
```

## 开发指南



### 目录说明

- **views/**: 页面组件，按功能模块组织
- **components/**: 可复用的公共组件
- **api/**: API接口定义，按模块分类
- **store/**: Vuex状态管理，按功能模块划分
- **router/**: 路由配置，支持权限控制
- **directive/**: 自定义指令，如权限指令
- **utils/**: 工具函数和辅助方法

### 权限管理

项目实现了完整的权限管理系统：

- **路由权限**: 基于角色的路由访问控制
- **组件权限**: 使用自定义指令控制组件显示
- **API权限**: 接口级别的权限验证

### 代理配置

开发环境已配置API代理，将 `/api` 请求代理到 `http://localhost:8088`,具体参考vue.config.js



## 部署说明



nginx.conf

```

server{
    listen 8089;
    server_name localhost;
	root /home/www/vue3-init/dist;
    index  index.html index.htm;
	
	# 启用 gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    
    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    # HTML 文件不缓存
    location ~* \.html$ {
        expires -1;
        add_header Cache-Control "no-cache, no-store, must-revalidate";
    }

    location / {
      try_files $uri $uri/ /index.html;
    }

  	location /api/ {
        proxy_pass http://127.0.0.1:8088;
        add_header 'Access-Control-Allow-origin' $http_origin;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS';
        add_header Access-Control-Allow-Headers '*';
        if ($request_method = 'OPTIONS'){
          add_header 'Access-Control-Allow-Credentials' 'true';
          add_header 'Access-Control-Allow-Origin' $http_origin;
          add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, PATCH';
          add_header 'Access-Control-Request-Private-Network' 'true';
          add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
          add_header 'Access-Control-Max-Age' 1728000;
          add_header 'Content-Type' 'text/plain; charset=utf-8';
          add_header 'Content-Length' 0;
          return 204;
        } 
    }

}
```



## 更新日志

### v1.0.0
- 初始版本发布
- 集成Vue 3 + Element Plus
- 实现基础权限管理
- 配置TypeScript支持



欢迎提交 Pull Request 或 Issue 来帮助改进项目。



### 许可证

[MIT](LICENSE)