快速开始

在开始进入学习之前，你需要了解以下内容：

• ant-design-vue 相关的基础知识
• vue3 的基础知识
• 正确安装并配置了node v8.9以上版本

在线演示

本组件库的业务组件导出逻辑和基础组件相同，推荐在CodeSandBox中查看演示效果

使用组件

安装

IMPORTANT

1、确保公司内网访问

2、项目根目录下，.npmrc文件中添加以下配置，以保证组件的正常使用

 // .npmrc
@design-middle-center:registry=https://devsecops.mychery.com:8443/pkg/chery/npm/npm/release/

npm安装组件库依赖包

$ npm install @design-middle-center/fuse-design-vue --save
$ yarn add @design-middle-center/fuse-design-vue --save

注册组件

全局注册

import { createApp } from 'vue';
import Fused from 'fuse-design-vue';
import App from './App';

const app = createApp(App);

app.use(Fused).mount('#app');

统一默认组件规范配置

IMPORTANT

由于Fuse-design是基于ant-design-vue组件库，所以我们的组件库也需要进行一些配置，以保证组件的一致性。 需要你在项目最外层组件中引入FusedThemeConfig组件，这个组件基于ant-design-vue的ThemeProvider组件进行封装， 并默认配置了公司统一组件规范配置，如果你有个性化的组件样式需要配置，也可以传入theme对象。

// App.vue
<script>
import { FusedThemeConfig } from '@design-middle-center/fuse-design-vue'
const theme = ref({
  token: {
    fontFamily: 'MiSans-Regular',
    colorPrimary: 'red'
  }
})
</script>
<template>
  <FusedThemeConfig :theme="theme“> // [!code highlight]
    <Layout />
  </FusedThemeConfig>
</template>

使用基础组件

// index.vue
<template>
<DatePicker></DatePicker>
</template>
<script>
import { DatePicker } from '@design-middle-center/fuse-design-vue';
</script>

使用业务组件

具体使用方法参考左侧各个业务组件说明文档使用