# ESpace_fronted_new

**Repository Path**: E-Space/ESpace_fronted_new

## Basic Information

- **Project Name**: ESpace_fronted_new
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-11-12
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Espace Fronted

## 资源

[设计稿]("http://zincox.gitee.io/espace_design")

[element ui 2.9.2]("https://element.eleme.cn/2.9/#/zh-CN/component/installation")

## 注意事项

- *使用Sass*替代CSS来进行布局和修改样式，参见 [Sass文档]("https://www.sass.hk/guide/")
- 颜色、字体，尽量使用 `src/styles/global.scss` 下配置好的全局配置来使用
- 不要乱推！！！！！！
- 不要把什么文件都推上来，推前看一下 `status` ，并使用 `git restore` 去掉其他无关文件，如果不会，使用 Webstorm 的 `Commit` 功能
- 合并冲突使用 `merge` 而不是 `rebase`


## 使用 Mock 数据

使用 Mock 能在不访问后台情况下返回模拟数据，MockJs 和 Axios 已整合完毕，直接使用即可。

### 添加 Mock URL 和响应

在 `src/apis/mock/` 下建立相应的响应js，格式如 `src/apis/mock/competition.js` 所示。定义好路由，请求方法和请求函数。

### 将自定义的响应文件加入主文件中

在 `src/apis/config/mock.js` 下，引入你的响应js，并加入循环中。
```javascript
import competition from "@/apis/mock/competition";

// 加入模拟数据
const mockApis = [
    ...competition
];
```

### 封装请求 Api

通常，封装一个 api 为 js 文件，格式如 `src/apis/competition.js` 所示， axios 已封装为 request ，直接使用 request 对象即可。

```javascript
// 导入已经封装好的 request 对象
import request from '@/apis/config/request'

export function getFilterSelections() {
    return request({
        url: 'competition/filters',
        method: 'get',
    })
}

export default {
    getFilterSelections
}

```

### 使用封装好的 api

```javascript
    import {getFilterSelections} from "@/apis/competition";

    export default {
        methods: {
            ajax() {
                getFilterSelections().then((data)=>{
                
                })
            }
        }  
    }       

```


## 外联`@import`使用 CSS / SCSS 的方法

使用 `@import` 导入外部样式表时，无论导入的 `<style></style>`标签内是否含有 `scope` 关键字，都会作为`全局 css 样式`导入（实际创建了一个新 `style` 标签）。
这就会造成样式污染问题。

### 建议

建议只在页面(`views`)下使用外联的样式表，组件样式使用内联样式表

### 改用局部标签引入

在 `style` 标签上方，再插入一个需要引入的 `style` 标签

```html
    <style scoped src="xxx.css"></style>
```

### 嵌套使用

使用 scss 提供的嵌套功能，将所有的样式，限定在需要使用的 `class` 内

#### 给页面组件添加 `class`

在`views/page`页面组件下，给顶级`div`添加对应的`class`，用于限定样式范围

```vue
<!-- MyPage 某页面组件 -->
<template>
    <!-- 给顶级div，或者其他包裹元素，添加一个 class -->
    <div class="my-page">
        <!-- ... -->
   </div>
</template>

```

#### 新建外联样式

在 `src/styles/` 下，添加一个 `scss` 文件（css也行，但不方便），使用嵌套CSS来限定布局

```scss
.my-page{
  // 经过 Sass编译和Webpack打包后，变为 .my-page .box1{} 和 .my-page .box2{}，从而限定 CSS 样式范围
  .box1{
  
  } 
  .box2{
  
  }
}
```

#### 添加样式

最后在页面文件下，使用`@import`引入即可

```vue
<style>
  @import "~@/styles/xxx.scss";
</style>
```