**标准组件库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);
```
- 内容介绍
- EcmaScript基础
- 快速入门
- 常量与变量
- 字符串
- 函数的基本概念
- 条件判断
- 数组
- 循环
- while循环
- for循环
- 函数基础
- 对象
- 对象的方法
- 函数
- 变量作用域
- 箭头函数
- 闭包
- 高阶函数
- map/reduce
- filter
- sort
- Promise
- 基本对象
- Arguments 对象
- 剩余参数
- Map和Set
- Json基础
- RegExp
- Date
- async
- callback
- promise基础
- promise-api
- promise链
- async-await
- 项目实践
- 标签系统
- 远程API请求
- 面向对象编程
- 创建对象
- 原型继承
- 项目实践
- Classes
- 构造函数
- extends
- static
- 项目实践
- 模块
- import
- export
- 项目实践
- 第三方扩展库
- immutable
- Vue快速入门
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入门
- 模板语法
- 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
- 组件注册
- Prop
- 自定义事件
- 插槽
- 混入
- 过滤器
- 项目实践
- 标签编辑
- 移动客户端开发
- uni-app基础
- 快速入门程序
- 单页程序
- 底部Tab导航
- Vue语法基础
- 模版语法
- 计算属性与侦听器
- Class与Style绑定
- 样式与布局
- Box模型
- Flex布局
- 内置指令
- 基本指令
- v-model与表单
- 条件渲染指令
- 列表渲染指令v-for
- 事件与自定义属性
- 生命周期
- 项目实践
- 学生实验
- 贝店商品列表
- 加载更多数据
- 详情页面
- 自定义组件
- 内置组件
- 表单组件
- 技术专题
- 状态管理vuex
- Flyio
- Mockjs
- SCSS
- 条件编译
- 常用功能实现
- 上拉加载更多数据
- 数据加载综合案例
- Teaset UI组件库
- Teaset设计
- Teaset使用基础
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代码模版
- 项目实践
- 标签组件
- 失物招领客户端原型
- 发布页面
- 检索页面
- 详情页面
- 服务端开发技术
- 服务端开发环境配置
- Koajs快速入门
- 快速入门
- 常用Koa中间件介绍
- 文件上传
- RestfulApi
- 一个复杂的RESTful例子
- 使用Mockjs生成模拟数据
- Thinkjs快速入门
- MVC模式
- Thinkjs介绍
- 快速入门
- RESTful服务
- RBAC案例
- 关联模型
- 应用开发框架
- 服务端开发
- PC端管理界面开发
- 移动端开发
- 项目实践
- 失物招领项目
- 移动客户端UI设计
- 服务端设计
- 数据库设计
- Event（事件）
- 客户端设计
- 事件列表页面
- 发布页面
- 事件详情页面
- API设计
- image
- event
- 微信公众号开发
- ui设计规范