vux

最新推荐文章于 2024-08-19 17:40:00 发布

qq_32444825

最新推荐文章于 2024-08-19 17:40:00 发布

阅读量2.4k

点赞数

分类专栏： Vue/Vux

本文链接：https://blog.csdn.net/qq_32444825/article/details/77481070

版权

Vue/Vux 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

项目结构：

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>

</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">




<router-view > </router-view>

</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>