**標準組件庫Teaset的使用基礎** [TOC] 將常見的布局做成模版保存為通用的模板庫可以提高開發的效率。 # 全局引入CSS文件 建議在App.vue文件中全局引入標準組件庫的樣式文件，這樣避免每一個頁面都要引入組件的SCSS文件： ``` @import 'components/teaset/teaset.scss'; ``` > 未來版本會支持風格切換 ``` <style lang="scss"> /*teaset組件庫的樣式文件*/ @import 'components/teaset/teaset.scss'; /*項目定義的樣式文件*/ @import 'common/variables.scss'; /*項目定義的樣式文件*/ @import 'common/app.scss'; page { font-size: $uni-font-size-base; } page { min-height: 100%; } </style> ``` # 在main.js全局注冊 > 全局注冊常用的組件，不常用的組件，還是需要在頁面中使用的時候注冊。 ``` import Vue from 'vue' import App from './App' //常用組件，全局注冊 import tsAd from "@/components/teaset/components/ts-ad/ts-ad.vue"; import tsBadge from "@/components/teaset/components/ts-badge/ts-badge.vue"; import tsButton from "@/components/teaset/components/ts-button/ts-button.vue"; import tsBanner from "@/components/teaset/components/ts-banner/ts-banner.vue"; // import tsCityPicker from '@/components/teaset/components/ts-city-picker.vue'; // import tsDrawer from "@/components/teaset/components/ts-drawer.vue"; import tsFab from "@/components/teaset/components/ts-fab/ts-fab.vue"; // import tsFeedbackStar from '@/components/teaset/components/ts-feedback-star.vue'; import tsGap from '@/components/teaset/components/ts-gap/ts-gap.vue'; import tsIcon from "@/components/teaset/components/ts-icon/ts-icon.vue"; import faIcon from "@/components/teaset/components/ts-icon/fa-icon.vue"; import tsLeftCategory from '@/components/teaset/components/ts-left-category.vue'; import tsList from "@/components/teaset/components/ts-list/ts-list.vue"; import tsListItem from "@/components/teaset/components/ts-list/ts-list-item.vue"; import tsLoadMore from "@/components/teaset/components/ts-load-more/ts-load-more.vue"; import tsLine from '@/components/teaset/components/ts-line/ts-line.vue'; import tsNoticeBar from "@/components/teaset/components/ts-notice-bar/ts-notice-bar.vue"; import tsPopup from "@/components/teaset/components/ts-popup/ts-popup.vue"; // import tsPopupAd from "@/components/teaset/components/ts-popup/ts-popup-ad.vue"; import tsShareButton from "@/components/teaset/components/ts-share/ts-share-button.vue" import tsSearchBar from "@/components/teaset/components/ts-search-bar/ts-search-bar.vue"; import tsSegmentedControl from "@/components/teaset/components/ts-segmented-control/ts-segmented-control.vue"; import tsSection from '@/components/teaset/components/ts-section/ts-section.vue' import tsSectionTitle from '@/components/teaset/components/ts-section/ts-section-title.vue' import tsSectionBody from '@/components/teaset/components/ts-section/ts-section-body.vue' import tsSectionFooter from '@/components/teaset/components/ts-section/ts-section-footer.vue' // import tsSwipeAction from "@/components/teaset/components/ts-swipe-action/ts-swipe-action.vue"; import tsTag from "@/components/teaset/components/ts-tag/ts-tag.vue"; import tsTags from "@/components/teaset/components/ts-tag/ts-tags.vue"; import tsTagSelector from "@/components/teaset/components/ts-tag/ts-tag-selector.vue"; // import tsSteps from "@/components/teaset/components/ts-steps/ts-steps.vue"; // import tsTimeline from '@/components/teaset/components/ts-timeline/ts-timeline.vue'; // import tsTimelineItem from '@/components/teaset/components/ts-timeline/ts-timeline-item.vue'; import tsTable from "@/components/teaset/components/ts-table/ts-table.vue"; import tsTd from "@/components/teaset/components/ts-table/ts-td.vue"; import tsTh from "@/components/teaset/components/ts-table/ts-th.vue"; import tsTr from "@/components/teaset/components/ts-table/ts-tr.vue"; //注冊全局組件 Vue.component('ts-ad', tsAd); Vue.component('ts-badge', tsBadge); Vue.component('ts-banner', tsBanner); Vue.component('ts-button', tsButton); Vue.component('ts-fab', tsFab); Vue.component('ts-gap', tsGap); Vue.component('ts-icon', tsIcon); Vue.component('fa-icon', faIcon); Vue.component('ts-line', tsLine); Vue.component('ts-load-more', tsLoadMore); Vue.component('ts-list', tsList); Vue.component('ts-list-item', tsListItem); Vue.component('ts-notice-bar', tsNoticeBar); Vue.component('ts-popup', tsPopup); Vue.component('ts-search-bar', tsSearchBar); Vue.component('ts-segmented-control', tsSegmentedControl); Vue.component('ts-left-category', tsLeftCategory); Vue.component('ts-section', tsSection); Vue.component('ts-section-title', tsSectionTitle); Vue.component('ts-section-body', tsSectionBody); Vue.component('ts-section-footer', tsSectionFooter); Vue.component('ts-tag', tsTag); Vue.component('ts-tags', tsTags); Vue.component('ts-tag-selector', tsTagSelector); Vue.component('ts-share-button', tsShareButton); Vue.component('ts-table', tsTable); Vue.component('ts-th', tsTh); Vue.component('ts-td', tsTd); Vue.component('ts-tr', tsTr); ```