vue2.0 + vux (一)Header 组件
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.效果图