CLWY权限管理（一）--- 项目搭建

创建项目

vue ui

# 或

vue create app

安装依赖

yarn add element-ui axios moment

添加环境变量

新建 .env.development 文件

VUE_APP_BASE_API=http://localhost:3000

封装axios

新增 src/utils/request.js 文件

import axios from "axios";

const service = axios.create({
   
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000,
});

service.interceptors.response.use((response) => {
   
  return response.data;
});

export default service;

配置全局过滤器

新建 src/filters/index.js 文件

import moment from "moment";

/**
 * "Fri Dec 10 2021 01:01:49 GMT+0800 (China Standard Time)" => "2021年12月10日凌晨1点01分"
 * @param {number} num
 */
export function dateFormat(value) {
   
  if (!value) {
   
    return "";
  }

  moment.locale("zh-cn");
  return moment(value).format("LL");
}

CSS 文件

新建 src/styles/common.scss 文件

a {
   
  color: #1f99b0;
  text-decoration: none;
}

.clear:after {
   
  display: block;
  content: "clear";
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.thumb {
   
  max-height: 65px;
  max-width: 120px;
}

.gray {
   
  background: #e6e8ec;
}

新建 src/styles/element-ui.scss 文件

.el-menu-item.is-active {
   
  color: #1f99b0 !important;
}

.el-switch.is-checked .el-switch__core {
   
  border-color: #1f99b0 !important;
  background-color: #1f99b0 !important;
}

.el-button--primary {
   
  color: #fff !important;
  background-color: #1f99b0 !important;
  border-color: #1f99b0 !important;
}

.el-menu-item:focus, .el-menu-item:hover {
   
  background-color: #e1f0f0 !important;
}

.el-submenu__title:hover {
   
  background-color: #e1f0f0 !important;
}

.el-tag {
   
  background-color: #e1f0f0;
  border-color: #e1f0f0;
  color: #1f99b0;
}

.el-button.el-button--default:focus, .el-button.el-button--default:hover {
   
  color: #1f99b0;
  border-color: #dcdef6;
  background-color: #e1f0f0;
}

.el-radio__input.is-checked .el-radio__inner {
   
  border-color: #1f99b0;
  background: #1f99b0;
}

.el-radio__input.is-checked + .el-radio__label {
   
  color: #1f99b0;
}


.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
   
  background-color: #1f99b0;
  border-color: #1f99b0;
}

.el-button--text{
   
  color: #1f99b0;
}

.el-button--text:focus, .el-button--text:hover {
   
  color: #1f99b0;
  text-decoration: underline;
}

.el-input.is-active .el-input__inner, .el-input__inner:focus {
   
  border-color: #1f99b0;
  outline: 0;
}

.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
   
  color: #1