快速开始
安装
npm install fs-ui -S
1
引入组件
方式一. 导入所有组件
// plugins/fs-ui.js
import Vue from 'vue'
import fsUI from 'fs-ui'
import 'fs-ui/lib/fsui-style/index.css'
Vue.use(fsUI)
1
2
3
4
5
6
7
2
3
4
5
6
7
方式二. 使用插件 babel-plugin-import (推荐)按需引入
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D
1
2
2
// .babelrc
{
"plugins": [
["import", {
"libraryName": "fs-ui",
"libraryDirectory": "lib",
"style": true
}]
]
}
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'fs-ui',
libraryDirectory: 'lib',
style: true // 设置true,引入组件样式
}, 'fs-ui']
]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
接着你可以在代码中直接引入 FS-UI 组件使用
import { Button } from 'fs-ui'
components: {
fsButton: Button
}
1
2
3
4
5
2
3
4
5
也可以全局注册
// plugins/fs-ui.js
import Vue from 'vue'
import fsUI from 'fs-ui'
import {
Button,
Icon,
Popup,
PopupSelect,
Grid,
GridItem,
Row,
Col,
Input,
Checkbox,
CheckboxGroup,
Switch,
Cell,
CellGroup,
Search,
NumberKeyboard,
PasswordInput,
Slider,
Rate,
Stepper,
Loading,
PullRefresh,
SwipeCell,
Collapse,
CollapseGroup,
Tag,
Card,
List,
ListItem,
NavBar,
Pagination,
Badge,
Tab,
Tabs,
Tabbar,
TabbarItem,
Linkage,
SelectGroup,
Select,
Option,
Picker,
PickerColumn,
Calendar,
Dialog,
Notice,
Toast,
LazyLoad
} from 'fs-ui'
Vue.component('FsButton', Button)
Vue.component('FsIcon', Icon)
Vue.component('FsPopup', Popup)
Vue.component('FsPopupSelect', PopupSelect)
Vue.component('FsGrid', Grid)
Vue.component('FsGridItem', GridItem)
Vue.component('FsRow', Row)
Vue.component('FsCol', Col)
Vue.component('FsInput', Input)
Vue.component('FsCheckbox', Checkbox)
Vue.component('FsCheckboxGroup', CheckboxGroup)
Vue.component('FsSwitch', Switch)
Vue.component('FsCell', Cell)
Vue.component('FsCellGroup', CellGroup)
Vue.component('FsSearch', Search)
Vue.component('FsNumberKeyboard', NumberKeyboard)
Vue.component('FsPasswordInput', PasswordInput)
Vue.component('FsSlider', Slider)
Vue.component('FsRate', Rate)
Vue.component('FsStepper', Stepper)
Vue.component('FsLoading', Loading)
Vue.component('FsPullRefresh', PullRefresh)
Vue.component('FsSwipeCell', SwipeCell)
Vue.component('FsCollapse', Collapse)
Vue.component('FsLoading', Loading)
Vue.component('FsCollapseGroup', CollapseGroup)
Vue.component('FsTag', Tag)
Vue.component('FsCard', Card)
Vue.component('FsList', List)
Vue.component('FsListItem', ListItem)
Vue.component('FsNavBar', NavBar)
Vue.component('FsPagination', Pagination)
Vue.component('FsBadge', Badge)
Vue.component('FsTab', Tab)
Vue.component('FsTabs', Tabs)
Vue.component('FsTabbar', Tabbar)
Vue.component('FsTabbarItem', TabbarItem)
Vue.component('FsLinkage', Linkage)
Vue.component('FsSelectGroup', SelectGroup)
Vue.component('FsSelect', Select)
Vue.component('FsOption', Option)
Vue.component('FsPicker', Picker)
Vue.component('FsPickerColumn', PickerColumn)
Vue.component('FsCalendar', Calendar)
Vue.prototype.$notice = Notice
Vue.prototype.$toast = Toast
Vue.prototype.$dialog = Dialog
Vue.use(LazyLoad)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
方式三. 不使用插件的按需引入
import Button from 'fs-ui/lib/button'
import 'fs-ui/lib/button/style'
1
2
2