# vue-admin-2301

**Repository Path**: connerljlx_admin/vue-admin-2301

## Basic Information

- **Project Name**: vue-admin-2301
- **Description**: 2301班vue后台管理项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-05-29
- **Last Updated**: 2023-06-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# eslint 标准版本
1 字符串必须 单引号
2 最外层 js代码 不能有缩进
3 ()两边必须有空格
4 {}前面也必须有空格
5 :要有空格
6 结尾必须有空行
# eslint常见规格  
https://blog.csdn.net/weixin_40013817/article/details/108003812

# sass
常见css 预处理器（css扩展语言）
sass
  sass (后缀名 sass)
    破坏性
    .box
      width 500
      height 500
      .p
        width 200
        color red
  scss
    扩展了css写法 兼容原来css的写法
less
  扩展了css写法 兼容原来css的写法
stylus
  破坏性

sass基础语法
```scss
// 变量 使用 $关键字
$color: #dc5678;
.box{
  width: 200px;
  height: 200px;
  background-color: $color;
}

// 选择器嵌套规则  定义后代选择器
.box{
  width: 200px;
  height: 200px;
  background-color: $color;
  // 选择器的嵌套
  .p{
    color: blue;
    span{
      color: green;
      &:hover{
        color: yellow;
      }
    }
  }
}

// 编译后
.box{
   width: 200px;
  height: 200px;
  background-color: #dc5678;
}
.box .p {
   color: blue;
}
.box .p span{
   color: green;
}
.box .p span:hover{
   color: yellow;
}

// 计算  
/* 除法运算 / (Division and /) / 在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 / 除法运算的功能。也就是说，如果 / 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。

以下三种情况 / 将被视为除法运算符号：

如果值，或值的一部分，是变量或者函数的返回值 如果值被圆括号包裹 如果值是算数表达式的一部分 */

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}
编译为

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }




// 混入  mixin  定义函数
// 定义公共混入 样式
@mixin box{
  width: 200px;
  height: 200px;
  background-color: #ce8541;
  margin-top: 10px;
  border-radius: 10px;
}
.box2{
  // 使用 @include关键字引入混入
  @include box;
}
// 可以传参的混入
@mixin box2($bgc:#dc5566){
  width: 200px;
  height: 200px;
  background-color: $bgc;
  margin-top: 10px;
  border-radius: 10px;
}

// 使用时 不传参 include可以不加括号
.box3{
  @include box2;
}

// 传参
.box4{
  @include box2(#4567ff);
}
```

# vueCli 环境变量
存储在全局的变量，可以 根据 程序环境  变化 值
举例：
  开发环境
          开发环境
          测试环境
          （uat环境  用户 演示环境）
          生产环境

场景：
  开发生产 请求 接口 源不一样的， 可以在 环境变量中存储 开发和生产的源

vueCli
存储在 process.env 全局变量下

process.env.NODE_ENV  预定义 代表所处 环境的 一个变量
  开发时  值 development
  上线   值 production   利用这个变量的值 判断我处于 开发还是生产

## 如何自定义 环境的变量
vueCli中  
  在项目根目录下 创建 如下文件 分别存储 环境变量在不同环境下的值，自定义环境变量语法
  key=v  且 必须命名为 VUE_APP_名字才能实现
  .env.development
  .env.production
# 项目要求：
  - 每人找一个电脑后台设计图  码云 （一定要有跟我不一样）
  - 要求还原  找项目布局和样式

# 项目搭建 
创建项目，配置项目基础配置、 基础 工具函数的封装

+ 二次封装 axios
  1 配置默认配置 请求源（一般存储在环境变量中）
  2 超时时间配置
  3 请求拦截器中 请求头添加token 做 登录鉴权token校验
  4 响应拦截 中 判断 code 做token过期和未登录处理
  5 添加全局loading 
+ 配置反向代理
  开发时 一定是跨域 真实情况。跨域是不允许访问（后端不会配置 cors），一定要做反向代理


  前后端分离的接口 一般都会有请求前缀
  www.xxx.com/api/getItemLists
  www.xxx.com/api/updateItem
  为什么这样设置：为了方便反向代理，反向代理需要有请求前缀
```js
devServer: {
    port: 3000,
    open: true,
    proxy: {
      // 所有请求必须以 /conner开头才能触发这个反向代理
      '/conner': {
        // 最终服务器请求的源
        target: 'https://api.it120.cc',
        // 是否切换源
        changeOrigin: true,
        // 请求前缀的重写
        pathRewrite: {
          '^/conner': ''
        }
      }
      /*
        服务器 发送的真实地址是
        1 开发的路径 /conner/a/b/c
        按照上述的 配置 服务器发送请求地址是 （前缀真实请求中判断 路径重写的值）
        target + 路径重写后的值 + 地址中去除 前缀的path
        https://api.it120.cc/conner/a/b/c
        2 为什么要将 请求的源（比如开发时是前缀）定义在环境变量中
      */
    }
  }
```

  
+ 安装 组件库 等依赖



# 常见的vue组件库
pc
  element-ui 适配vue2.x  element-plus vue3.x   饿了么
  antdesign-vue (1.x是大坑)   蚂蚁金服
  iviews 

移动端：
  vant-ui  有赞
  nut-ui 京东
  native-ui


https://element-plus.gitee.io/zh-CN/guide/quickstart.html
# vue中如何在父组件中修改子组件样式


vue2生态
  vue2.x+vue-router3.x+element-ui+vuex+vueCli
  vue3.x + vue-router4.x+element-plus + pinia + vite