ATUI学习记录

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