1.main.js
import Vue from 'vue'
import FastClick from 'fastclick'
import VueRouter from 'vue-router'
import App from './App'
// 自定义的路由文件
import router from './router'
// 解决300ms延迟问题
FastClick.attach(document.body)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app-box',
router,
template: '<App/>',
components: { App }
})
2.路由 router/index.js
import Vue from 'vue'
import Router from 'vue-router'
// 首页
import Home from '@/pages/Home/Home'
// 我的设置
import MySettings from '@/pages/MySettings/MySettings'
Vue.use(Router)
// 路由配置
export default new Router({
routes: [
// 首页
{
path: '/',
name: 'Home',
component: Home
},
// 我的设置
{
path: '/mySettings',
name: 'MySettings',
component: MySettings
},
{
path: '/home',
redirect: '/'
},
{
path: '*',
redirect: '/'
},
]
})
3.主页面 App.vue
<template>
<div id="app">
<!-- 视图层 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
//
}
</script>
<style lang="less">
@import '~vux/src/styles/reset.less';
body {
background-color: #fbf9fe;
line-height: 1.2;
}
</style>
4.Header 组件
Header.vue
<!-- 顶部 标题栏 -->
<template>
<div>
<!-- 标题栏 -->
<x-header :left-options="{showBack: false}" style="background-color:#00CC66;">{{tag}}</x-header>
</div>
</template>
<script>
// 引入组件
import { XHeader, Tabbar, TabbarItem } from 'vux'
export default {
name: 'AppHeader',
data(){
return {
tag: '首页',
showMenus: false
}
},
components: {
XHeader,
Tabbar,
TabbarItem
}
}
</script>
<style lang="less" scoped>
.tabbar{
background-color: #00CC66;
height: 50px;
position: relative;
}
</style>
5.页面调用 Home.vue
<!-- 首页 -->
<template>
<div>
<!-- 顶部 标题栏 -->
<app-header></app-header>
</div>
</template>
<script>
import AppHeader from '../../components/Header'
export default {
name: 'Home',
components: {
AppHeader
},
data(){
return {
//
}
}
}
</script>
<style lang="less" scoped></style>
6.效果图