# oil_project

**Repository Path**: jishupeng/oil_project

## Basic Information

- **Project Name**: oil_project
- **Description**: vue + cubeui 测试项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-28
- **Last Updated**: 2020-12-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# oil_project

### 介绍
路由文档 `https://www.showdoc.com.cn/p/2774d328905f898ae68412661eb548cb`

vue + view-design 测试项目：
- 登录页 ／login
- 首页列表 ／add_oil
- 加油站详情 ／detail
- 我的 /mine
- 订单列表页 /order
- 订单详情页 /order_detail
- 优惠券 /coupon

使用： 
- git clone https://gitee.com/jishupeng/oil_project.git
- cd oil_fontend
- npm install
- yarn serve

### 初始化项目
```
vue create oil_project
```

### 通用配色
```
标题 Title
#464c5b

正文 Content
#657180

辅助/图标 Sub Color
#9ea7b4

失效 Disabled
#c3cbd6

背景 Background
#f5f7f9
```

### rem布局 
```
1、npm i amfe-flexible
 
2、main.js 中引入 import 'amfe-flexible'

3. npm i postcss-px2rem

4. 设置package.json
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem": {
        "remUnit": 37.5
      }
    }
  }
```

### 开发过程中的报错解决方法
```
1. error: Cannot find module 'vue-loader/package.json'
解决方法: yarn install 重新安装一下依赖, 然后重启项目
```

### click.native 在view-design中没有@click属性给自定的组件添加原生点击事件

### [vuex] 使用vuex管理tab导航栏高亮状态
```
// 组件渲染完成的时候首先从vuex中获取tab的高亮状态
mounted() {
  this.tabName = this.$store.state.highLightTabName
},

methods: {
  // 点击的时候对vuex中的高亮状态进行更换
  navClickHandle(tabName) {
    this.$store.commit('changeHightLightTabName', tabName)
    this.tabName = tabName;
  }
}
```

### 当页面刷新的时候让路由直接跳转至首页
使用beforeEnter路由导航守卫
```
{
  path: "mine",
  name: "Mine",
  component: Mine,
  beforeEnter(to, from, next) {
    if (from.name === null) {
      next({ name: "AddOil" });
    } else {
      next();
    }
  }
}
```