Quick Start

Prerequisites

• Node.js recommended version 18 or above

How to Install

npm

$ npm install mengyue-components

pnpm

$ pnpm install mengyue-components

yarn

$ yarn add mengyue-components

Installation Process

npm

$ npm install mengyue-components

added 28 packages in 18s

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

pnpm

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

dependencies:
+ mengyue-components 0.1.1

Done in 10.8s using pnpm v10.12.1

yarn

$ yarn add mengyue-components
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-components@0.1.1
info All dependencies
├─ mengyue-components@0.1.1
├─ [other dependencies...]
└─ [other dependencies...]
Done in 8.2s.

How to Use

Global Registration of mengyue-components

vue

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

const app = createApp(App)
app.use(MengyueComponents)
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-components also supports on-demand component loading, which reduces code redundancy.

vue

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

Here is the result after running

Button Demo

Learn More

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