# vue-cli4-manage-system

**Repository Path**: e4glet/vue-cli4-framwork

## Basic Information

- **Project Name**: vue-cli4-manage-system
- **Description**: Vue2.x+Element-UI后台管理框架模版，适用常用的管理系统开发
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2020-07-09
- **Last Updated**: 2024-08-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# Vue2.x manager system

<a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/vue-2.6.14-brightgreen.svg" alt="vue">
  </a>
  <a href="https://github.com/ElemeFE/element">
    <img src="https://img.shields.io/badge/element--ui-2.15.14-brightgreen.svg" alt="element-ui">
  </a>
  <a href="https://gitee.com/e4glet/vue-cli4-framwork/blob/master/LICENSE">
    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
  </a>

### 介绍
基于 Vue2.x + Element UI 的后台管理系统模版，参考了其他项目的特点，综合功能。
数据操作使用async await进行异步处理。


### 效果展示
![输入图片说明](https://images.gitee.com/uploads/images/2020/0725/224122_a4b9836a_1651640.png "QQ图片20200725214713.png")

### 框架版本
1. nodejs v16.17.0
2. vue/cli 5.0.0
3. element-ui/2.15.14


### 框架结构

```c
    src             --  资源目录
        api         --  请求接口
        axios       --  封装axios
        assets      --  静态资源文件
        components  --  组件
        router      --  路由，负责指定页面链接
        service     --  服务层，数据联调，引入请求
        store       --  Vuex
        views       --  视图页面
        main.js     --  入口文件
```


## 项目初始化
```
npm install
```

#### 如果安装依赖失败怎么办？
删除目录下的package-lock.json文件，然后重新运行
```
npm install
```

### 编译运行
```
npm run serve
```

### 编译生产文件
```
npm run build
```

### 默认项目访问入口
http://localhost:8089/

### 修改vue默认配置信息  
```
const {
    defineConfig
  } = require('@vue/cli-service')
  module.exports = defineConfig({
    transpileDependencies: true,
    // 公共路径(必须有的)
    publicPath: "./",
    // 输出文件目录
    outputDir: "dist",
    // 静态资源存放的文件夹(相对于ouputDir)
    assetsDir: "assets",
    // eslint-loader 是否在保存的时候检查(果断不用，这玩意儿我都没装)
    lintOnSave: false,
    // 我用的only，打包后小些
    runtimeCompiler: false,
    productionSourceMap: true, // 不需要生产环境的设置false可以减小dist文件大小，加速构建
  
    devServer: {
      open: true, // npm run serve后自动打开页面
      host: '0.0.0.0', // 匹配本机IP地址(默认是0.0.0.0)
      port: 8089, // 开发服务器运行端口号
      proxy: null,
      // history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，所以需要配置这一项
  
    },
    configureWebpack: config => {
      // 为生产环境修改配置...
      if (process.env.NODE_ENV === 'production') {
        config.mode = 'production';
        // 打包文件大小配置
        config.performance = {
          maxEntrypointSize: 10000000,
          maxAssetSize: 30000000
        }
      }
    },
  })
```

### 参考项目
1. https://github.com/lin-xin/vue-manage-system
2. https://github.com/yqrong/vvproject


### 项目打包
```
npm run build
```
vue.config.js为打包配置文件。
打包生成的dist目录为最终生成的vue应用目录，将其放置服务器即可。


### Docker部署
1. 编写docker-compose.yaml  
```c
version: '2.1'
services:
  nginx:
    restart: always
    image: nginx
    volumes:
      #~ /var/local/nginx/nginx.conf为本机目录, /etc/nginx为容器目录
      - /var/local/nginx/nginx.conf:/etc/nginx/nginx.conf
      #~ /var/local/app/dist 为本机 build 后的dist目录, /usr/src/app为容器目录,
      - /var/local/app/dist:/usr/src/app
    ports:
      - 80:80
    privileged: true
```

2. 编写 nginx.conf 配置  
```c
#user  nobody;

worker_processes  2;

#工作模式及连接数上线
events {
    worker_connections  1024;   #单个工作进程 处理进程的最大并发数
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    #sendfile 指令指定 nginx 是否调用 sendfile 函数（zero copy 方式）来输出文件，对于普通应用，
    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    # 开启GZIP
    gzip  on;

    # # 监听 80 端口，转发请求到 3000 端口
    server {
        #监听端口
        listen      80;
        #编码格式
        charset utf-8;

        # 前端静态文件资源
        location / {
        root  /usr/src/app;
            index index.html index.htm;
            try_files $uri $uri/ @rewrites;
        }
        # 配置如果匹配不到资源，将url指向 index.html， 在 vue-router 的 history 模式下使用，就不会显示404
        location @rewrites {
            rewrite ^(.*)$ /index.html last;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}
```

3. 执行 docker-compose
```c
docker-compose -d up
```

### 更新日志
- 2023年9月25日
1. 更新适配node v16.17.0,同步更新elementui，vuex等相关版本
2. 全新的axios组件，支持token统一认证
3. 更新vue.config.js配置文件，支持生产编译大文件
4. 新增统一标题模块vue-wechat-title

- 2020年8月9日
1. 修复多级路由目录tags的keep-Alive状态失效问题（解决部分）

- 2020年7月28日
1. 增加多权限访问控制，可以根据需要增加2个或2个以上的权限角色
2. 增加浏览器上方加载进度条（仿YouTube）

- 2020年7月25日
1. 增加tags标签功能
2. 增加全屏显示功能

- 2020年7月21日
1. 扩展了后台管理模版

- 2020年7月13日
1. 精简完善axios示例，与后端SpringMVC对接
2. 增加Qs引入并配置全局方法

- 2020年7月12日
1. 安装axios，并对axios模块进行封装
2. 增加使用axios示例

- 2020年7月9日
1. 上传vuecli4基础框架，包含router，vuex；
2. 增加登录验证示例，使用localStorage存储本地用户信息