@rrc-materials/core/README.md

rrc materials for core

---
showNav: true
---

# core

> @rrc-materials/core for rrc

## 使用指南

::: tip
  默认生成的框架模板 以自动引入无需关注引入 
:::

安装

```shell
yarn add @rrc-materials/core -S
```

引入

```js
import Core from '@rrc-materials/core'

Vue.use(Core)
```


## 备注

> ElementUI 版本已经 锁死到 `2.13.0` 升级 需要排查我们的组件是否兼容。

## 包依赖

核心包已经默认依赖了如下包，在项目里不需要单独再引入如下包了，直接使用就好了。

```
"@rrc-materials/card": "^0.0.1-beta.10",
"@rrc-materials/card-footer": "^0.0.1-beta.10",
"@rrc-materials/container": "^0.0.1-beta.10",
"@rrc-materials/dialog": "^0.0.1-beta.10",
"@rrc-materials/form": "^0.0.1-beta.10",
"@rrc-materials/helpers": "^0.0.1-beta.10",
"@rrc-materials/http": "^0.0.1-beta.10",
"@rrc-materials/layout": "^0.0.1-beta.10",
"@rrc-materials/lazyload": "^0.0.1-beta.10",
"@rrc-materials/list": "^0.0.1-beta.10",
"@rrc-materials/page": "^0.0.1-beta.10",
"@rrc-materials/search": "^0.0.1-beta.10",
"@rrc-materials/select": "^0.0.1-beta.10",
"@rrc-materials/table": "^0.0.1-beta.10",
"@rrc-materials/theme": "^0.0.1-beta.10",
"@rrc-materials/toolbar": "^0.0.1-beta.10",
"@rrc/utils": "^0.0.4",
"element-ui": "2.4.6",
"nprogress": "^0.2.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
```

## 组件

提供的组件已经全局注册,可以直接使用

组件列表:

```
Page,
Toolbar,
Table,
Dialog,
Select,
List,
Card,
CardFooter,
Lazyload,
Container,
Form
```

## ElementUI

已经全局注册了Element，直接使用即可。
另外提供了`window.rrc.$notify` 和 `window.rrc.$loading` 来api调用`ElementUI`的`Notification`和`Loading`组件

## 路由

导入router对象，然后正常使用router即可，例子如下：

```
import router from '@rrc-materials/core/src/router/index'

Vue.use(component, {
  store,
  router
})
```

### 全局路由守卫使用

@see [路由守卫](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html)

::: tip
我们导出的 router 对象 是VueRouter 的一个实例 可以直接用来挂载 全局守卫

在项目的 index.js 中 可以通过  创建配置文件 或者直接使用的方式 使用路由守卫
:::

demo1:

```js
import router from '@rrc-materials/core/src/router/index'

router.beforeEach((to, from, next) => {
  // ...
})
```

demo2:

```js
import router from '@rrc-materials/core/src/router/index'
import loadingConfig from '@/config/loading.config'

// 传入 router 对象
loadingConfig(router)
```

## 配置

核心包集成了路由配置，核心包的路由会先去读取`src/config/router.config.js`里面的路由配置，然后创建相应的路由对象
```
{
    mode: 'history'
    global: 全局路由,适用于登录、注册或者新开窗口
    tabs: 带tab 模块的页面
    redirect: 重定向路由
    layout: 项目的布局组件，默认就是`src/layout`
}
```