# control-platform-frontend

**Repository Path**: zhangqiang0508/control-platform-frontend

## Basic Information

- **Project Name**: control-platform-frontend
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-18
- **Last Updated**: 2024-06-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 管控平台

## 使用
> 推荐使用`pnpm`  

依赖下载 `pnpm install ` 

代码格式化 `pnpm lint`

运行 `pnpm dev`

打包 `pnpm build`

打包分析 `pnpm build:analyse`


## 开发

### 总览 

框架: `Vue3` + `pinia` + `vue-router`

UI库： [ElementPlus](https://element-plus.org/zh-CN/guide/design.html)

工具库: `lodash`、 `axios` 、 `typescript`

插件: `unplugin-auto-import` 、 `unplugin-vue-component` 和 `unplugin-vue-macros`


### Scss
> 建议使用`BEM`规范，[`BEM`文档地址](https://bemcss.com/)

#### `BEM`规范

BEM Example: 
```vue
<script lang="ts" setup>
const ns = useNamespace("home");

</script>  

<template>
  <div :class="[ns.b()]">
    <header :class="[ns.b('header')]">
      <h3 :class="[ns.e('title')]">title</h3>   
      <nav :class="[ns.b('nav'),ns.is('active'),ns.has('logo')]">
        <img :class="[ns.e('logo')]" src="path/to/xxx.svg" alt="logo"/>  
      </nav> 
    </header>       
  </div> 
</template>  

<style lang='scss'>
@include bem(home){

  @include b(header){
    // header style 
  }
  
  @include e(title){
    // title style
  }
  
  @include b(nav){
    // nav style
    
    @include when(active){
      // nav active style
    } 
    
    @include has(logo){
      // nav has logo style 
    }
  }
  
  @include e(logo){
    // logo style 
  }
}
</style>

```

#### 主题化变量


### Vue
> 建议使用`setup`语法糖统一写法