# vue-admin-2302

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

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-04
- **Last Updated**: 2023-08-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# eslint standand标准常见 规范
1 字符串必须单引号
2 小括号两边必须由空格

# css 预处理器
也称为 css扩展语法
+ sass (webpack中需要基于  sass-loader css-loader dart-sass)
  .sass后缀名
    激进 破坏式  破坏了 css语法
    ```sass
      .box
        width 200
        height 300
        .p
          color red
    ```
  .scss后缀名
    温和型，支持 css写法，对于css做了扩展
+ less
+ stylus


## scss基础语法
+ 定义变量
```scss
// 这是单行注释
/* 
  这是多行注释
*/
$color: red; // 利用 $定义变量
```
+ 选择器嵌套 定义后台选择器
```scss
.box{
  width: 300px;
  height: 300px;
  background-color: $bg;
  color: red;
  .op{
    color: blue;
    span{
      color: rgb(16, 232, 203);
      // 当前选择器
      &:hover{
        color: red;
      }

    }
  }
}

// 编译css 会变成如下选择器
.box{
  xxx
}
.box .op{
  xxx
}
.box .op span{
  xxx
}
.box .op span:hover{
  xxx
}


// + - * /   + - * 都没有特殊（记得有单位）
/*
  / 很长场景下 不会编译成 算数运算 /  css 值中 有 / 关键字
    如下情况会解析为计算
      1 在小括号中    (200px/10)
      2 100px+200px/10 参与其他运算
      3 有变量 $width/2;
    普通 编译 分隔符
    height: 200px/10;  这不是除法  而是 分隔符
*/
$width: 200px;
.box{
  width: 100px+200px;
  // height: (200px/10);
  // height: 100px+200px/10;
  height: $width/2;
  background-color: red;
}


// 继承  一个选择器 可以继承另一个选择器中所有的样式
.box{
  width: 200px;
  height: 200px;
  background-color: #ae1b1b;
}
.box2{
  // 使用extend继承 .box选择器样式
  @extend .box;
  margin-top: 20px;
  border: 10px solid #c7d047;
  border-radius: 10px;
}




// 混入 定义重复代码块  （理解为函数，混入定义 1 不加括号 2 加括号可以传参）
// 使用 @mixin定义混入
/* @mixin box{
  width: 200px;
  height: 200px;
  background-color: #ae1b1b;
}
.box{
  // 使用 @include关键字 将混入 引入 某个选择器中
  @include box;
}
.box2 {
  @include box;
} */
// 定义混入时 加括号 定义形参
@mixin box($color:#dc5566){
  width: 200px;
  height: 200px;
  background-color: $color;
}
// 不传参 include时候可以不加括号
.box{
  @include box;
}
// 引入混入时 加括号 给形参传递 实参
.box2{
  @include box(#77ddcc)
}
```

# vue.config.js 中常用配置
```js
const { defineConfig } = require('@vue/cli-service')
const path = require('path')

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: 'localhost',
    port: 3000,
    open: true,
    // 配置开发服务器反向代理 解决开发时 ajax 跨域的问题
    proxy: {}
  },
  // 关闭 保存代码 就检查 eslint格式
  lintOnSave: false,
  // 自定义路径别名 @
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', path.join(__dirname, 'src'))
      .set('@v', path.join(__dirname, 'src/views'))
      .set('@c', path.join(__dirname, 'src/components'))
      .set('@s', path.join(__dirname, 'src/store'))
  }

})

```
# 单文件组件中 如何 修改 子组件的 默认样式
# 常用的 vue ui组件库