# cloud-ui

**Repository Path**: Sam997/cloud-ui

## Basic Information

- **Project Name**: cloud-ui
- **Description**: 基于vue全家桶+element-ui架构的前端项目
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-15
- **Last Updated**: 2024-07-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Cloud-UI后台管理系统


> 技术选型
>
> 框架：element-ui、vue全家桶
>
> 构建工具：vue-cli3
>
> 请求：axios

**线上地址:** ##

## 安装

```bash

# 进入项目目录
cd cloud-ui

# 安装依赖
npm install

# 启动项目
npm run dev
```

输入地址访问 http://localhost:9528

## 打包

```bash
# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod
```

## 高级

```bash
# 预览发布环境效果
npm run preview

# 预览发布环境效果 + 静态资源分析
npm run preview -- --report

# 代码格式检查
npm run lint

# 代码格式检查并自动修复
npm run lint -- --fix
```

## 权限模块

```javascript
// permission.js
// 通过路由守卫判断用户是否是否拥有路由权限列表去获取允许访问的路由表。
const hasAddRoutes = store.getters.addRoutes && store.getters.addRoutes.length > 0
 if (hasAddRoutes) {
        next()
      } else {
          // 调取permission模块中generateRoutes函数发起请求获取路由表
          store.dispatch('permission/generateRoutes').then(async () => {
               let addRoutes = store.getters.addRoutes  // 添加的路由
               let routes = store.getters.routes  // 所有的路由
               // 路由更新
               router.options.routes = routes
               // 添加路由
              router.addRoutes(addRoutes)
              // 获取到路由表后调取user模块中profile函数发起请求获取用户信息
              await store.dispatch('user/profile')
               // 获取到路由表后调取permission模块中generatePermissions函数发起请求获取用户可操作按钮
              await store.dispatch('permission/generatePermissions')
          })
      }
```

## 插件配置

~~~js
// babel.config.js
module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    // 开发环境插件配置
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
      'plugins': ['dynamic-import-node']
    },
    // 发布环境插件配置
    'production': {
      'plugins': ['transform-remove-console']
    }
  }
}
~~~

## 操作控制

~~~js
// utils/astrict.js
// 在登录成功后启用
// 页面加载或者刷新会执行这个函数
window.onload = function() {
  // 点击事件
  window.document.onmousedown = function() {
    // 判断页面是否需要操作控制
    if (window.location.pathname !== '/login' && window.location.pathname.split('_')[0] !== '/public') {
     storage.setItem("lastTime", new Date().getTime())
    }
  }
  
  // 刷新页面重现开启定时器
  let isLogin = storage.getItem('isLogin')
  if (isLogin && window.location.pathname !== '/login' && window.location.pathname.split('_')[0] !== '/public') {
    window.timerTimeOut = window.setInterval(checkTimeout, 30000)  // 启动定时器
    window.timerToken =  window.setInterval(checkToken, 30000) // 启动定时器
  }
}
~~~