首页 > 其他分享> 文章详细

ATUI学习记录

2022-08-20 17:00:09 阅读：145 来源： 互联网

标签：style Vue 记录学习 ui UI i18n import 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

标签：style,Vue,记录,学习,ui,UI,i18n,import,ATUI
来源： https://www.cnblogs.com/min77/p/16608115.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ATUI学习记录

特性

官网文档

安装与使用