# vue2-simple

**Repository Path**: liang-tian-yu/vue2-simple

## Basic Information

- **Project Name**: vue2-simple
- **Description**: vue2+iviewUI 的前端通用模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-02
- **Last Updated**: 2025-08-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## vue2-simple

vue2+iviewUI 的前端通用模板，满足基本web开发

<p align=center>
    <a href="http://gitee.com/liang-tian-yu/vue2-simple">vue2-simple</a>
</p>
<p align="center">
<a target="_blank" href="http://gitee.com/liang-tian-yu">
    <img src="https://img.shields.io/badge/vue-2.6-green" ></img>
    <img src="https://img.shields.io/badge/vuex-3.6-green" ></img>
    <img src="https://img.shields.io/badge/viewDesign-4.7.0-brightgreen" ></img>
</a></p>



![](./doc/vue2-simple.png)




内容如下：

- 前端基础页面
- 请求封装跨域
- 权限管理+路由拦截
- 自定义权限指令
- 错误页
- CRUD模板



[TOC]



## 快速上手

TODO

- [ ] 配置prettier和eslint
- [ ] 配置后端地址(vue.config.js：proxy)
- [ ] 修改项目基本信息(如项目title,logo)



可选

- [ ] 定义主题色global.css设置root颜色
- [ ] 取消全局居中(App.vue里#app的text-align: center;)



### 分支说明

|        | 说明              |
| ------ | ----------------- |
| master | 正式、稳定        |
| dev    | 正在添加新功能... |



## 业务功能

### 路由配置

- 隐藏菜单

```
meta: {
  hideInMenu: true,
},
```



- 权限控制

```
meta: {
  access: ACCESS_ENUM.ADMIN,
},
```



### 请求封装

具体实现看axios.js



### 权限控制

对元素标签实现权限控制

```
<p v-role="['admin','user']">权限可见标签</p>
```



### CRUD模板

参考book文件夹



### error页

404、403



## 架构设计

合理分层：符合最佳实践开发设计

```
src
├── access         // 权限控制
├── api		    //业务请求
├── components    // 组件
│   ├── GlobalFooter.vue
│   ├── GlobalHeader.vue
├── directive        // 指令
│   ├── permission
│   └── index.js
├── enum            //枚举
├── layouts         // 布局
│   ├── BasicLayout.vue
│   └── UserLayout.vue
├── plugins        // 插件
├── router        //路由
│   ├── index.js
│   └── routes.js
├── store          //全局状态
├── views        //页面
│   ├── book
│   ├── error
│   ├── user
│   ├── AdminView.vue
│   ├── HomeView.vue
│   └── TestView.vue
├── App.vue            //主入口
├── global.css         //全局样式
└── main.js		   //主文件
```



## 项目部署

nginx.conf

```
server{
    listen 8090;
    server_name localhost;
    
     location / {
        root /home/www/vue2_demo/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:8088;
    }
}
```