<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<button v-if="$store.state.user.isLogin" @click="logout">注销</button>
</div>
<router-view/>
</div>
</template><script>
export default {
methods: {
logout() {
this.$store.dispatch('logout')
}
},
}
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
cube-ui组件的引用 cube-ui.js
import Vue from 'vue'// By default we import all the components.
// Only reserve the components on demand and remove the rest.
// Style is always required.
import {
/* eslint-disable no-unused-vars */
Style,
// basic
Button,
Loading,
Tip,
Toolbar,
TabBar,
TabPanels,
// form
Checkbox,
CheckboxGroup,
Checker,
Radio,
RadioGroup,
Input,
Textarea,
Select,
Switch,
Rate,
Validator,
Upload,
Form,
// popup
Popup,
Toast,
Picker,
CascadePicker,
DatePicker,
TimePicker,
SegmentPicker,
Dialog,
ActionSheet,
Drawer,
ImagePreview,
// scroll
Scroll,
Slide,
IndexList,
Swipe,
Sticky,
ScrollNav,
ScrollNavBar
} from 'cube-ui'
Vue.use(Button)
Vue.use(Loading)
Vue.use(Tip)
Vue.use(Toolbar)
Vue.use(TabBar)
Vue.use(TabPanels)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Checker)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Input)
Vue.use(Textarea)
Vue.use(Select)
Vue.use(Switch)
Vue.use(Rate)
Vue.use(Validator)
Vue.use(Upload)
Vue.use(Form)
Vue.use(Popup)
Vue.use(Toast)
Vue.use(Picker)
Vue.use(CascadePicker)
Vue.use(DatePicker)
Vue.use(TimePicker)
Vue.use(SegmentPicker)
Vue.use(Dialog)
Vue.use(ActionSheet)
Vue.use(Drawer)
Vue.use(ImagePreview)
Vue.use(Scroll)
Vue.use(Slide)
Vue.use(IndexList)
Vue.use(Swipe)
Vue.use(Sticky)
Vue.use(ScrollNav)
Vue.use(ScrollNavBar)
cube-ui的样式 theme.styl
@require "~cube-ui/src/common/stylus/var/color.styl"// action-sheet
$action-sheet-color := $color-grey
$action-sheet-active-color := $color-orange
$action-sheet-bgc := $color-white
$action-sheet-active-bgc := $color-light-grey-opacity
$action-sheet-title-color := $color-dark-grey
