Skip to content
forked from varletjs/varlet

基于Vue3的Material design风格移动端组件库 Material design mobile component library for Vue3

License

Notifications You must be signed in to change notification settings

deftliang/varlet

 
 

Repository files navigation

VARLET

Material design mobile component library for Vue3

Documentation(Vercel) | Documentation(Gitee) | 中文README

version stars vue licence coverage gzip ci


Intro

Varlet is a Material design mobile component library developed based on Vue3, developed and maintained by varletjs community team.

Features

  • 🚀   Provide 60+ high quality general purpose components
  • 🚀   Components are very lightweight
  • 💪   Developed by Chinese, complete Chinese and English documentation and logistics support
  • 🛠️   Support on-demand introduction
  • 🛠️   Support theme customization
  • 🌍   Support internationalization
  • 💡   Support WebStorm syntax highlighting
  • 💪   Support the SSR
  • 💡   Support the Typescript
  • 💪   Make sure more than 90 percent unit test coverage, providing stability assurance
  • 🛠️   Support dark mode
  • 🛠️   Provide official VSCode extension

Install

CDN

varlet.js contain all the styles and logic of the component library, and you can import them.

<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <!-- Desktop Adaptation -->
<script src="https://cdn.jsdelivr.net/npm/@varlet/touch-emulator/iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>
<script>
  const app = Vue.createApp({
    template: '<var-button>Button</var-button>'
  })
  app.use(Varlet).mount('#app')
</script>

Webpack / Vite

# Install with npm or yarn or pnpm

# npm
npm i @varlet/ui -S

# yarn
yarn add @varlet/ui

# pnpm
pnpm add @varlet/ui
import App from './App.vue'
import Varlet from '@varlet/ui'
import { createApp } from 'vue'
import '@varlet/ui/es/style'

createApp(App).use(Varlet).mount('#app')

Playground

See Varlet UI Playground.

Contribution

See Contributing Guide.

Community

We recommend that issue be used for problem feedback, or others:

  • Wechat group

Thanks to contributors

Thanks to the following sponsors

Sponsor this project

Sponsor this project to support our better creation. It is recommended to use afdian to subscribe, and your avatar will appear in this project.

Afdian

https://afdian.net/a/haoziqaq

Wechat / Alipay

About

基于Vue3的Material design风格移动端组件库 Material design mobile component library for Vue3

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Vue 39.4%
  • TypeScript 28.5%
  • JavaScript 22.5%
  • Less 9.5%
  • EJS 0.1%