MG Design

Appearance

快速上手 ​

安装 ​

bash
pnpm add @mg-design/components @mg-design/theme element-plus

完整引入 ​

ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@mg-design/theme'
import MGDesign from '@mg-design/components'
import App from './App.vue'

createApp(App).use(ElementPlus).use(MGDesign).mount('#app')

按需引入（推荐） ​

配合 unplugin-vue-components 实现自动按需引入：

ts
// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { MgResolver } from '@mg-design/components/resolver'

export default {
  plugins: [
    Components({ resolvers: [MgResolver()] }),
  ],
}

从 Element Plus 迁移 ​

通用组件 API 与 Element Plus 完全兼容，迁移只需替换标签前缀：

vue
<!-- Element Plus -->
<el-button type="primary">按钮</el-button>

<!-- MG Design -->
<MgButton type="primary">按钮</MgButton>