Quick Start

Prerequisites

• Node.js recommended version 18 or above

How to Install

npm

$ npm install mengyue-plus

pnpm

$ pnpm install mengyue-plus

yarn

$ yarn add mengyue-plus

Installation Process

Using pnpm as an example

npm

$ npm install mengyue-plus

added 28 packages in 18s

3 packages are looking for funding
  run `npm fund` for details

pnpm

$ pnpm install mengyue-plus
Packages: +24
++++++++++++++++++++++++
Progress: resolved 24, reused 23, downloaded 1, added 24, done

dependencies:
+ mengyue-plus 0.0.62

Done in 10.8s using pnpm v10.12.1

yarn

$ yarn add mengyue-plus
yarn add v1.22.22
[1/28] Resolving packages...
[2/28] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[28/28] Linking dependencies...
success Saved lockfile.
success Saved 13 new dependencies.
info Direct dependencies
└─ mengyue-plus@0.0.62
info All dependencies
├─ mengyue-plus@0.0.62
├─ [other dependencies...]
└─ [other dependencies...]
Done in 8.2s.

How to Use

Global Registration of mengyue-plus

vue

// In main.js/ts file of Vue project
import MengyuePlus from 'mengyue-plus'
import 'mengyue-plus/style.css'

const app = createApp(App)
app.use(MengyuePlus)
app.mount('#app')

When using, you can directly write the tag as shown in the documentation examples. For example, if I want to implement a button with #409EFF color, I can write the following in a Vue file:

<template>
    <MYButton type="primary">Primary Button</MYButton>
</template>

Here is the result after running

Button Demo

Local Registration

Of course, in some projects, a component library that takes up too much space can have negative effects, so mengyue-plus also supports on-demand component loading, which reduces code redundancy.

vue

<template>
    <MYButton type="primary">Primary Button</MYButton>
</template>
<script>
import { MYButton } from 'mengyue-plus'
import 'mengyue-plus/index.css'
</script>

Here is the result after running

Button Demo

Learn More

• Node.js official website: https://nodejs.org
• mengyue-plus npm address: https://www.npmjs.com/package/mengyue-plus
• mengyue-plus GitHub address: https://github.com/mengyuecengj/mengyue-components
• To learn more components, please continue reading this guide.