|
项目结构：
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>ll3</title>
</head>
<body>
<div id="app-box"></div>
<!-- built files will be auto injected -->
</body>
</html>
----------------------------------------------------------------------------
main.js:
/*所有的入口逻辑我们都将在 main.js 中编写;顶级路由的配置，多少个页面（组件）分别设置多少个顶级路由。在main.js中配置路由;
2.x的routes接收的就是多个对象*/
import Vue from 'vue' // 0、
import FastClick from 'fastclick' // 0、
import VueRouter from 'vue-router' // 0、
//发送ajax请求，mainjs中引入axios，其他地方使用的话 如同使用 vue-resource 一样
import axios from 'axios'
//import VueAxios from 'vue-axios'
//Vue.use(VueAxios, axios)
Vue.prototype.$http = axios
/* 加入各组件包块中的Index.vue，各个包中Index.vue管理自己的子组件 */
//import Index from './components/public/Index' //test
//import App from './App' // 1、
import arroundSpace from './components/arroundSpace/Index' //块一
import person from './components/person/Index' //块二
import dynamic from './components/dynamic/Index' //块三
import festivalCustom from './components/festivalCustom/Index' //块三
//##########################
Vue.config.debug = true //
Vue.use(VueRouter)
//###########################
const routes = [
// Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
{
path: '/', //默认
name:'def',
component: festivalCustom,
//children: [{path:'clink',component: Clink},{path:'loving',component: Loving}]
},
{
path: '/arr', //路径
name:'arr',
//别名
component: arroundSpace, //对应导入的 import
},
{
path: '/per',
name:'per',
component: person
},
{
path: '/dy',
name:'dy',
component: dynamic
},
/*子菜单
{
path: 'comm',
component: Comm
},
{
path: 'invite',
component: Invite
},
{
path: 'record',
component: Record
},
{
path: 'hot',
component: Hot
}
*/
]
const router = new VueRouter({
mode: 'history', //如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
base: __dirname
, //
routes,
})
FastClick.attach(document.body)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
router,
render: h => h(App)
}).$mount('#app-box')
-------------------------------------------------
APP.vue
<template>
<div id="app">
<!-- <loading v-model="isLoading"> </loading> -->
<!-- <router-view ></router-view> -->
<!-- test -->
<router-view > </router-view>
<!-- <footer>u</footer> -->
</div>
</template>
<script>
//import Home from './components/public/Home'; //test
//import Footer from './components/Footer'; //页脚
//import {Card,Box,Icon,Grid, GridItem, GroupTitle,XHeader,Tabbar,TabbarItem,Sticky} from 'vux'
export default {
name: 'app',
components: {
//Grid,
//GridItem,
//GroupTitle,
//XHeader,
//Tabbar,
//TabbarItem,
//Sticky,
//Box,
//Icon,
//Card,
//Home
//Footer,
},
}
</script>
<style lang="less">
@import '~vux/src/styles/reset.less';
body {
background-color: #fbf9fe;
}
html, body {
height: 100%;
width: 100%;
overflow-x: hidden;
}
home,footer,footer1{
height: 10%;
width: 100%;
background-color: #D80000;
}
</style>
------------------
其他子组件.... | 
转播
