快速开始

本节将介绍如何在项目中使用Radiant-UI。

安装

前置准备

因本组件库基于element-plus开发，因此要求您本地环境需满足以下条件：

• vue 3.4及以上版本。
• element-plus 2.8及以上版本
• Node.js 18 及以上版本。

依赖安装

npm

$ npm add @ovyvo/radiant-ui@latest

pnpm

$ pnpm add @ovyvo/radiant-ui@latest

yarn

$ yarn add @ovyvo/radiant-ui@latest

项目使用

组件支持两种使用方式，全量引入及手动按需引入。

WARNING

注意：因组件库基于Element-plus开发，请在使用之前务必保证正确引入element-plus样式文件,保证组件样式正常

// main.ts
import "element-plus/dist/index.css"

全量引入

// main.ts
import { createApp } from "vue"
import RadiantUI from "@ovyvo/radiant-ui"
import "element-plus/dist/index.css"
import "@ovyvo/radiant-ui/dist/index.css"
import App from "./App.vue"

const app = createApp(App)

app.use(RadiantUI)
app.mount("#app")

按需引入

<template>
  <ra-button>RaButton</ra-button>
</template>
<script>
import { RaButton } from "@ovyvo/radiant-ui"
import "@ovyvo/radiant-ui/theme-chalk/src/ra-button.css"
export default {
  components: { RaButton }
}
</script>

规划

• 解决按需自动引入问题
• 解决elment-plus样式依赖引入问题