cris-header/README.md

阡陌云layout文件

# cris-header

## 介绍
阡陌云前端路由组件，提供统一的路由入口。

## 使用方法
### 1. Vue项目
1. 使用npm安装并引入，注意需要store传入作为参数
```bash
npm install cris-header
```

2. 在main.js中引入
```js
import WorkHeader from 'cris-header'
import 'cris-header/dist/cris-header.css'

Vue.use(WorkHeader, { store })
```

3. 在页面中使用组件，根据是否是开发环境判断模块点击的路由跳转
```html
<!-- layout.vue -->
<template>
<div>
    <!-- 顶部栏 -->
    <WorkHeader :isDev="isDev">
      <template slot="leftSlot">
	    </template>
	    <template slot="rightSlot">
	    </template>
    </WorkHeader>
    <!-- 下方区域 -->
    <div class="page-body">
      <router-view />
    </div>
</div>

<script>
export default {
    name: "Layout",
    computed() {
        isDev() {
            return process.env.NODE_ENV === 'development'
        }
    }
}
</script>
```
4. vue.config.js中路由配置（可选）
```js
  devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      ["/apps/cris"]: {
        target: `http://localhost:8081/apps/cris`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
      ['/apps/party']: {
        target: `http://localhost:8082/apps/party`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + '/apps/party']: ''
        }
      }
    },
    disableHostCheck: true
  },
```