ATUI学习记录

文章ATUI学习记录，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

AT-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品

特性

官网文档

://at-ui.github.io/at-ui/#/zh/docs/tabs

安装与使用

1、安装

npm install at-uinpm 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 = NotificationVue.prototype.$Loading = LoadingBarVue.prototype.$Modal = DialogVue.prototype.$Message = Message