AT-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品
特性
- 基于
Vue开发的 UI 组件 - 使用 npm + webpack + babel 的工作流，支持 ES2015
- CSS 样式独立，即使使用不同的框架实现，也都能保持统一的 UI 风格（ 详见：AT-UI Style ）
- 提供友好的 API，可灵活的使用组件
官网文档
https://at-ui.github.io/at-ui/#/zh/docs/tabs
安装与使用
1、安装
npm install at-ui
npm install at-ui-style
2、全局引用
import Vue from 'vue'
import AtComponents from 'at-ui'
import 'at-ui-style' // 引入组件样式
// import 'at-ui-style/src/index.scss' // 或者引入未构建版本的 scss 样式
Vue.use(AtComponents)
3、按需引用且配置.babelrc
npm install babel-plugin-component
{
"presets": ["es2015", "stage-2"],
"plugins": [["import", {
"libraryName": "at",
"libraryDirectory": "src/components"
}]]
}
4、国际化
import Vue from 'vue'
import AtUI from 'at-ui'
import 'at-ui-style' // 引入组件样式
import VueI18n from 'vue-i18n'
import enLocale from 'at-ui/dist/locale/en-US'
import zhLocale from 'at-ui/dist/locale/zh-CN'
Vue.use(VueI18n)
Vue.use(AtUI)
const i18n = new VueI18n({
locale: 'en',
fallbackLocale: 'en',
messages: {
'en': { ...enLocale },
'zh': { ...zhLocale }
}
})
AtUI.i18n((key, value) => i18n.t(key, value))
new Vue({ i18n }).$mount('#app')
按需引用列表
import Vue from 'vue'
import {
Button,
ButtonGroup,
Tag,
Radio,
RadioGroup,
RadioButton,
Checkbox,
CheckboxGroup,
Input,
InputNumber,
Textarea,
Badge,
Switch,
Slider,
Tooltip,
Popover,
Alert,
Progress,
LoadingBar,
Modal,
Select,
Option,
OptionGroup,
Dropdown,
DropdownMenu,
DropdownItem,
Breadcrumb,
BreadcrumbItem,
Pagination,
Menu,
MenuItem,
MenuItemGroup,
Submenu,
Table,
Card,
Collapse,
CollapseItem,
Steps,
Step,
Rate,
Tabs,
TabPane,
Timeline,
TimelineItem
} from 'at-ui'
Vue.prototype.$Notify = Notification
Vue.prototype.$Loading = LoadingBar
Vue.prototype.$Modal = Dialog
Vue.prototype.$Message = Message