基于vue框架的ui组件_基于vue.js的组件框架

最新推荐文章于 2024-07-30 21:54:07 发布

cuk5239

最新推荐文章于 2024-07-30 21:54:07 发布

阅读量368

点赞数

文章标签： vue java js nodejs npm ViewUI

原文链接：https://vuejsexamples.com/a-framework-of-components-based-on-vue-js/

版权

基于vue框架的ui组件

Vuemerang (Vuemerang)

Vuemerang is a framework of components based on vue.js, it is a framework that is designed from scratch to be incrementally adoptable.

Vuemerang是一个基于vue.js的组件框架，它是一个从头开始设计以逐渐采用的框架。

The framework is focused on facilitating the development of applications, improving the design of the same without removing the necessary functionality. we want all the components to be independent in colors, shapes and design for a freedom that we like all front-end but without losing the speed of creation and production.

该框架致力于促进应用程序的开发，在不删除必要功能的情况下改进其设计。我们希望所有组件在颜色，形状和设计上都是独立的，以实现我们喜欢所有前端的自由，同时又不损失创建和生产的速度。

View demo 查看演示 View Github 查看Github

支持项目⭐ (Support the project ⭐)

If you feel awesome and want to support us in a small way, please consider starring and sharing the repo! This helps us getting known and grow the community. 🙏

如果您觉得很棒，并希望以少量方式支持我们，请考虑加注星标并共享该存储库！这有助于我们获得知名度并扩大社区。 🙏

浏览器支持 (Browser Support)

Recent versions of Firefox, Chrome, Edge, Opera and Safari. IE10+

Firefox ， Chrome ， Edge ， Opera和Safari的最新版本。 IE10 +

快速启动CDN (Quick-start CDN)

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/vuemerang/dist/vuemerang.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <vm-button vm-type="filled">Hello World</vm-button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuemerang/dist/vuemerang.umd.js"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

CDN链接 (CDN Links)

- https://cdn.jsdelivr.net/npm/vuemerang/dist/vuemerang.umd.js
- https://cdn.jsdelivr.net/npm/vuemerang/dist/vuemerang.css

安装en Proyecto NPM (Install en Proyecto NPM)

# npm
npm install vuemerang

# yarn
yarn add vuemerang

用 (Use)

所有组件 (All components)

import Vue from 'vue'
import Vuemerang from 'vuemerang'

import 'vuemerang/dist/vuemerang.css'
Vue.use(Vuemerang)

或使用单个组件： (Or use individual components:)

import Vue from 'vue'
import { vmButton, vmSelect, vmPopup } from 'vuemerang/dist/components'
import 'vuemerang/dist/vuemerang.css'

Vue.use(vmButton)
Vue.use(vmSelect)
Vue.use(vmPopup)