当前位置: 首页 > 软件库 > Web应用开发 > Vue 组件 >

OpenAnts

基于 ElementUI 的 VUE 组件库
授权协议 未知
开发语言 JavaScript
所属分类 Web应用开发、 Vue 组件
软件类型 开源软件
地区 国产
投 递 者 汪德明
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

OpenAnts 是基于 ElementUI 的 VUE 组件库。

截图

安装

npm install openants -S
or
yarn add openants

快速开始

OpenAnts组件是基于Element开发,所以在你安装安装OpenAnts我们将自动帮你安装ElementUI,而无需你自己安装,我们建议elementUI全局引入!

全局使用OpenAnts

main.js中的配置

import Vue from 'vue';
import ElementUI from 'element-ui';   // 需要引入 element-ui
import 'element-ui/lib/theme-chalk/index.css';  // 需要引入 element-ui 的主题文件
import OpenAnts from 'openants';   // 需要引入 OpenAnts
import "openants/lib/openants.css";   // 需要引入 OpenAnts 的 css文件
import App from './App.vue';

Vue.use(ElementUI);  // 将 ElementUI 组件注册到VUE
Vue.use(OpenAnts);  // 将 ElementUI OpenAnts

new Vue({
  el: '#app',
  render: h => h(App)
});

按需使用OpenAnts

main.js中的配置

import Vue from 'vue';
import ElementUI from 'element-ui';   // 需要引入 element-ui
import 'element-ui/lib/theme-chalk/index.css';  // 需要引入 element-ui 的主题文件
import {btn,xxx} from 'openants';   // 需要引入 OpenAnts
import "openants/lib/openants.css";   // 需要引入 OpenAnts 的 css文件
import App from './App.vue';

Vue.use(ElementUI);  // 将 ElementUI 组件注册到VUE
Vue.component(btn.name, btn);
Vue.component(xxx.name, xxx);
/* 或写为
 * Vue.use(btn)
 * Vue.use(xxx)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

完整教程

http://docs.unpor.com/docs/openants_for_vue/openants_for_vue-1c9f9qf36cnl9

 相关资料
  • 如果您在声明组件时更喜欢基于类的 API,则可以使用官方维护的vue-class-component装饰器: import Vue from 'vue' import Component from 'vue-class-component' // @Component 修饰符注明了此类为一个 Vue 组件 @Component({ // 所有的组件选项都可以放在这里 template:

  • 本文向大家介绍vue基于element的区间选择组件,包括了vue基于element的区间选择组件的使用技巧和注意事项,需要的朋友参考一下 公司的系统中,产品经理在设计时经常要求对某个字段进行区间阈值设置或者作为筛选条件。但是苦于element中没有非常契合的组件(slider组件并不支持两端均能设定),于是自己动手造了一个。 成果 最终的展示效果如下: 需求 这里以项目的需求为例,基本的需求如下

  • 1. 前言 本节我们将介绍如何使用组件(Component),组件是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树: 如何规划和设计组件是学习组件的难点,在编写组件时,我们需要不断思考如何提高组件的可复用性。 2. 慕课解释 组件是可复用的 Vue 实例,且带有一

  • 本文向大家介绍基于Vue的文字跑马灯组件(npm 组件包),包括了基于Vue的文字跑马灯组件(npm 组件包)的使用技巧和注意事项,需要的朋友参考一下 一、前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的‘marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了‘marquee'标签 既然HTML标准已经废弃了这个标签,现在工作上用的是Vu

  • 本文向大家介绍vue+elementUi图片上传组件使用详解,包括了vue+elementUi图片上传组件使用详解的使用技巧和注意事项,需要的朋友参考一下 上传组件封装需求分析 在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息。加上后台要求要传递小于2M的图片,因此封装了一个upload.vue组件作为上传页面的子组件,它用于管理图片上

  • 本文向大家介绍基于vue的验证码组件的示例代码,包括了基于vue的验证码组件的示例代码的使用技巧和注意事项,需要的朋友参考一下 最近在自己写页面,模仿思否论坛,然后写登录注册UI的时候需要一个验证码组件. 去搜一下没找到什么合适的,而且大多都是基于后端的,于是自己手写一个。 演示 分析验证码组件 分析验证码功能 随机出现的数字大小写字母 (基础功能) 不同的数字或者字母有不同的颜色 (功能优化)