189 8069 5689

Vue3组件库Varlet有什么用

小编给大家分享一下Vue3组件库Varlet有什么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

十年的东洲网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整东洲建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“东洲网站设计”,“东洲网站推广”以来，每个客户项目都认真落实执行。

Vue3组件库Varlet有什么用

这个组件库是基于 Material Design 的设计进行规范的，在此期间作者与合作的小伙伴们共同参考社区成品以及结合国内开发者感兴趣的 api 。对于为何选择 Material，作者在官方文档中这样描述：

在早期的移动端设备中，大色块以及强烈对比色，对显示设备要求很高，同时非线性动画和水波纹对 GPU 有一定要求。 导致 Material 风格并没有在移动端浏览器环境下有很好的体验，更多选择更扁平朴素的风格投入产品。 但随着现代设备和新的 js 框架运行时处理的效率的逐步提升，浏览器有了更多的空闲时间和能力去处理动画效果，Material Design 将会给应用带来更好的体验。

经历了多次的反复推敲之后，组件库隐约有了个雏形。打这时起， Varlet 也正式开源，并采用 MIT开源许可证。

Vue3组件库Varlet有什么用

之后的日子里，Varlet 不仅获得阮一峰老师的推荐，同时也得到了国外开源技术社区的认可，其中 Vite 核心团队的 Antfu 大神也接受了这个组件库的 PR。不久前，在 Vue3 的 2021 年度总结分享会上，尤雨溪大神也推荐了 Varlet 。前段时间，在 Gitee 上开源的 varlet-ui 项目经过评估，也获得了Gitee的推荐，项目地址：https://gitee.com/varlet/varlet-ui

那么 Varlet 究竟有着怎样的魅力，吸引着这么多大神与优质平台的推广呢？

从特性上看

  • 提供50个高质量通用组件

  • 组件十分轻量

  • 由国人开发，完善的中英文文档和后勤保障

  • 支持按需引入

  • 支持主题定制

  • 支持国际化

  • 支持 webstorm，vscode 组件属性高亮

  • 支持 SSR

  • 支持 Typescript

  • 确保90%以上单元测试覆盖率，提供稳定性保证

  • 支持暗黑模式

如何安装与部署

cdn

varlet.js 包含组件库的所有样式和逻辑, 因此只需引入即可。

Webpack/Vite

# 通过 npm、yarn 或 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.js'

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

如何引入？

Vue3组件库Varlet有什么用

手动引入

每一个组件都是一个 Vue 插件，并由组件逻辑和样式文件组成，如下方式进行手动引入使用。

import { createApp } from 'vue'
import { Button } from '@varlet/ui'
import '@varlet/ui/es/button/style/index.js'

createApp().use(Button)

自动引入

所有在模板中的组件，都会被 unplugin-vue-components插件自动扫描，插件会自动引入组件逻辑和样式文件并注册组件。

# 安装插件

# npm
npm i unplugin-vue-components -D

# yarn
yarn add unplugin-vue-components -D

# pnpm
pnpm add unplugin-vue-components -D

Vue Cli

// vue.config.js
const Components = require('unplugin-vue-components/webpack')
const { VarletUIResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [VarletUIResolver()]
      })
    ]
  }
}

Vite

// vite.config.js
import vue from '@vitejs/plugin-vue'
import components from 'unplugin-vue-components/vite'
import { VarletUIResolver } from 'unplugin-vue-components/resolvers'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue(),
    components({
      resolvers: [VarletUIResolver()]
    })
  ]
})

注意

完成配置后如下使用即可

如何切换主题

该项目提供了暗黑模式的主题，暗黑模式的优势在于在弱光环境下具有更高的可读性。

Vue3组件库Varlet有什么用

切换主题复制代码
import dark from '@varlet/ui/es/themes/dark'
import { StyleProvider } from '@varlet/ui'

export default {
  setup() {
    let currentTheme
    
    const toggleTheme = () => {
      currentTheme = currentTheme ? null : dark
      StyleProvider(currentTheme)
    }
    
    return { toggleTheme }
  }
}

注入组件库推荐的文字颜色和背景颜色变量来控制整体颜色

body {
  transition: background-color .25s;
  color: var(--color-text);
  background-color: var(--color-body);
}

样式展示

Vue3组件库Varlet有什么用

Vue3组件库Varlet有什么用

在线编辑地址

前往下列网址：https://varlet.gitee.io/varlet-ui/#/zh-CN/quickstart

点击界面右上方：

Vue3组件库Varlet有什么用

以上是“Vue3组件库Varlet有什么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


分享标题：Vue3组件库Varlet有什么用
当前链接：http://cdxtjz.cn/article/jphoep.html

其他资讯