showNav: true

core

@rrc-materials/core for rrc

使用指南

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

安装

yarn add @rrc-materials/core -S

引入

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 路由守卫

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

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

demo1:

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

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

demo2:

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`
}