基于Vue 2.0的模块化前端 UI 组件库小结

AT-UI 是一款基于 Vue.js 2.0 的轻量级、模块化前端 UI 组件库，主要用于快速开发 PC 网站产品。

专门为桌面应用程序构建，AT-UI 提供了一套 npm + webpack + babel 前端开发工作流程，以及一个体面的干净整洁的 UI 组件。

特性

  • 基于 Vue 开发的 UI 组件
  • 基于 npm + webpack + babel 的工作流，支持 ES2015
  • CSS 样式独立，保证不同的框架实现都能保持统一的 UI 风格（ 详见： AT-UI Style）
  • 提供友好的 API，可灵活的使用组件

支持环境

安装

  • 推荐使用 npm 安装
npm install at-ui
  • 也可以使用 <script> 全局引用
<script type="text/javascript" src="at.min.js"></script>

使用

由于 AT-UI 的样式独立成了单独的项目，所以在使用  AT-UI 前，需要安装  at-ui-style 。可采用 npm 的方式安装，或者使用  <script> 标签的方式引入样式文件。

npm install at-ui-style

或者

<link rel="stylesheet" href="at.min.css" rel="external nofollow" />

总结

以上所述是小编给大家介绍的基于Vue 2.0的模块化前端 UI 组件库小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • Vue2.0 UI框架ElementUI使用方法详解
  • 详解vue2.0的Element UI的表格table列时间戳格式化
  • 基于Vue2.0+ElementUI实现表格翻页功能
  • Vue2.0+ElementUI实现表格翻页的实例
  • vue2.0 常用的 UI 库实例讲解
赞 (0)

相关推荐

  • 基于Vue2.0+ElementUI实现表格翻页功能

    基于Vue2.0+ElementUI实现表格翻页功能

    Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,它面向企业级的后台应用,能够帮助你快速地搭建网站,极大地减少研发的人力与时间成本.在这个月的 NingJS 上我们开源了这个项目,当时它的文档还没有准备好.今天,经过两周多的完善, Element UI 的文档正式上线啦!目前它处于 rc 阶段,正式版将于 Vue 2.0 发布后第一时间跟进. 欢迎大家来使用和完善,一起把它做成 Vue 最好的企业级组件库. ElementUI的表格要求的数据类型为字典数组.我使用了py

  • vue2.0 常用的 UI 库实例讲解

    1.mint-ui 安装: npm install mint-ui --save 使用: main.js // MintUI组件库 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.use(MintUI) 2.vux 安装: npm install vux --save npm install vux-loader --save 使用: vux2必须配合vux-loader使用, 请在build/webpack.bas

  • Vue2.0+ElementUI实现表格翻页的实例

    Vue2.0+ElementUI实现表格翻页的实例

    ElementUI的表格要求的数据类型为字典数组.我使用了python3写后端,那么从数据库取数据时添加一行cursorclass=pymysql.cursors.DictCursor即可.取出后我将其存入redis数据库方便之后取用.取用时使用eval()函数再传到前端即可. 前端放置Pagination 分页器,我这里直接采用了完整功能的分页器. <el-pagination @size-change="handleSizeChange" @current-change=&q

  • 详解vue2.0的Element UI的表格table列时间戳格式化

    这两天学习了vue2.0的Element UI的表格table列时间戳格式化,所以,今天添加一点小笔记. 表格属性 <el-table :data="tableData" v-loading.body="loading" border @selection-change="selectionChange" style="width: 100%"> <el-table-column prop="cre

  • Vue2.0 UI框架ElementUI使用方法详解

    Vue2.0 UI框架ElementUI使用方法详解

    今天来介绍一下ElementUI的使用,在Vue2.0更新之后,很多UI框架也应运而生,这个框架是饿了么团队开发的一款适用于PC的一个UI框架,体验之后给我的个人感觉确实是有助于快速开发的一款UI框架,在饿了么GitHub中我下载了一个团队开发的官方Demo(GitHub链接为:https://github.com/taylorchen709/vue-admin)感觉可以应对初期团队项目为管理系统的开发这一类的网站,下面我就来仔细讲解下如何让官方的Demo运行起来 首先我们使用windows件+

  • 基于Vue 2.0的模块化前端 UI 组件库小结

    AT-UI 是一款基于 Vue.js 2.0 的轻量级.模块化前端 UI 组件库,主要用于快速开发 PC 网站产品. 专门为桌面应用程序构建,AT-UI 提供了一套 npm + webpack + babel 前端开发工作流程,以及一个体面的干净整洁的 UI 组件. 特性 基于 Vue 开发的 UI 组件 基于 npm + webpack + babel 的工作流,支持 ES2015 CSS 样式独立,保证不同的框架实现都能保持统一的 UI 风格( 详见: AT-UI Style) 提供友好的

  • 如何使用Vue3.2+Vite2.7从0快速打造一个UI组件库

    目录 1. 前言 2. 使用Vite搭建官网 2.1 创建项目 2.1.1. 全局安装vite(这里我装的时候是2.7.2) 2.1.2. 构建一个vue模板(项目名可以改成自己的名字) 2.1.3. 装好之后按照提示逐步执行命令 2.2 基本完成官网的搭建 2.2.1. 下载vue-router 2.2.2. 创建home首页与doc文档页 以及顶部导航栏 2.2.3. 配置路由 3. 封装一个Button组件 4. 封装Markdown组件介绍文档 4.1. 下载 4.2. main.ts中

  • React UI组件库之快速实现antd的按需引入和自定义主题

    React UI组件库之快速实现antd的按需引入和自定义主题

    目录 React UI组件库 流行的开源React UI组件库 antd的基本使用 antd样式按需引入 antd自定义主题 总结 React UI组件库 流行的开源React UI组件库 material-ui(国外) ant-design(国内蚂蚁金服) antd的基本使用 antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品. 安装antd组件库: npm install antd --save yarn add antd 默认按需引入

  • 基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" >

  • Vue中UI组件库之Vuex与虚拟服务器初识

    一.日历组件 new Date()的月份是从0开始的. 下面表达式是:2018年6月1日 new Date(2018, 5, 1); 下面表达式是:2018年5月1日 new Date(2018, 4, 1); 或 new Date(2018, 5-1, 1); 下面表达式是:2018年5月31日(得到上个月的最后一天) new Date(2018, 5 , 0); 日的参数可以是0,也可以是负数,表示上个月底的那一天. 下面表达式是:2018年7月01日 new Date(2018, 5, 3

  • 详细讲解如何创建, 发布自己的 Vue UI 组件库

    详细讲解如何创建, 发布自己的 Vue UI 组件库

    前言 在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI_, _Vuetify 等. 只需一行命令, 即可方便的将这些库引入我们当前的项目: npm install vuetify // or yarn add vuetify 但是当我们自己开发了一个 _UI Component_, 需要在多个项目中使用的时候呢? 我们首先想到的可能是直接复制一份过去对吗? 这样做是很方便, 但是有两个问题: 当该 component 需要更新时, 我们需要手动维

  • mpvue项目中使用第三方UI组件库的方法

    mpvue项目中使用第三方UI组件库的方法

    说明 整理了一份简单的源码,放在github,有需要参考的同学自取~ 简介 微信小程序上线已有一年多时间啦,自美团的mpvue(基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系)问世也过去了好几个月. 前端技术日新月异,小程序的UI框架也层出不穷. 例如: WeUI: 一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.(github) ZanUI: 有赞移动 Web UI 规范 ZanUI 的小

  • 教你搭建按需加载的Vue组件库(小结)

    按需加载的原理 按需加载,本质上是把一个组件库的不同组件 拆分成不同文件 ,按照需要引用对应的文件,而该文件暴露一个 install方法 ,供Vue.use使用. 比如:我只想引用element库里的一个Button组件 import Button from 'element-ui/lib/Button.js' import Button from 'element-ui/lib/theme-chalk/Button.css' Vue.use(Button); 上面的写法比较繁琐,而且需要知道每

  • 从零撸一个pc端vue的ui组件库( 计数器组件 )

    听到计数器这个名字很多人是不是一瞬间没有什么印象, 毕竟这个组件用的比较少,就是那种左边一个'-'右边一个'+', 控制某些数量的时候才会用到, 比如我之前做的商城小程序只有'下单'页面的规格弹出框里面才有他的身影, 如果是涉及到处理商品数量很频繁的业务场景应该会很常见吧, 但是不要看这个组件小, 编写它的时候坑还不少, 本次我们就来做一个计数器, 目标就是尽可能小, 尽可能的省性能. 1:需求分析 每次+1 -1是常态, 但是如果搞活动, 每次最少为+-2个或三个, 就要兼容一下了,( 举一个

  • 基于Vue+ElementUI的省市区地址选择通用组件

    一.缘由 在项目开发过程中,有一个需求是省市区地址选择的功能,一开始想的是直接使用静态地址资源库本地打包,但这种方式不方便维护,于是放弃.后来又想直接让后台返回全部地址数据,然后使用级联选择器进行选择,但发现数据传输量有点大且处理过程耗时,于是又摒弃了这种方法.最后还是决定采用异步的方式进行省市区地址选择,即先查询省份列表,然后根据选择的省份code查询城市列表,最后根据选择的城市列表获取区/县列表,最终根据应用场景不同,给出了两种实现方案. 其中后台总共需要提供4个接口,一个查询所有省份的接口

随机推荐