标签：实现 启动 wrap main 搭建 pre out efault 建立
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from ‘vue‘ import App from ‘./App‘ // 引入router路由 import Router from ‘vue-router‘ // 引入项目的四个模块组件 import introduce from ‘./components/introduce‘ import home from ‘./components/home‘ import employment from ‘./components/employment‘ import consult from ‘./components/consult‘ // 使用router Vue.use(Router) // 定义路由 var routes = [{ path: ‘/home‘, component: home }, { path: ‘/introduce‘, component: introduce }, { path: ‘/employment‘, component: employment }, { path: ‘/consult‘, component: consult }] // 实例化路由 var vueRouter = new Router({ routes }) // 创建和挂载根实例 new Vue({ el: ‘#app‘, router: vueRouter, template: ‘<App></App>‘, components: { App } })
<template> <div id="app"> <div class="nav-top"> <!-- 引入公用的头部 header组件 --> <v-header></v-header> </div> <div class="banner"> </div> <div class="contianer"> <!-- 路由中的几个组件在这里被渲染，默认被渲染的为第一个组件，也就是home组件 --> <router-view></router-view> </div> </div> </template> <style> #app { font-family: ‘Avenir‘, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } .nav-top { position: absolute; top: 0; left: 50%; margin-left: -600px; z-index: 99; } .banner{ width: 100%; height: 370px; overflow: hidden; background: url("components/banner.jpg"); background-repeat: no-repeat; } </style> <script> //引入header组件 import header from ‘./components/header.vue‘ //输出header组件 export default{ components: { ‘v-header‘: header } } </script>
<template> <div class="header"> <div class="header-wrapper"> <div class="logo"> <a href="/home"><img src="../assets/ysh.png" alt width="210"></a> </div> <ul class="nav"> <li><router-link to="/home">首页</router-link></li> <li><router-link to="/introduce">公司介绍</router-link></li> <li><router-link to="/employment">招贤纳士</router-link></li> <li><router-link to="/consult">易点咨询</router-link></li> </ul> </div> </div> </template> <style> .header{ width:1200px; height:100px; margin:0 auto; color:#fff; } .header-wrapper{ width:1200px; height:100px; } .logo{ width:210px; height:100px; float:left; } .nav{ width:700px; height:100px; font-size:15px; float:right; } .nav li{ float:left; margin-right:30px; height:34px; line-height:34px; overflow:hidden; margin-top:34px; } .nav li:last-child{ margin-right:0; } .nav a{ display:inline-block; padding:0 13px; color:#fff; border-radius:15px; } .nav a.router-link-active{ background:#c10514; } </style>
<template> <div class="intro"> 公司介绍 </div> <div> zx </div> </template> <style> .intro{ font-size:20px; color:#000; margin:20px auto; } </style>
<template> <div class="intro"> 公司介绍 </div> </template> <style> .intro{ font-size:20px; color:#000; margin:20px auto; } </style>
标签：实现 启动 wrap main 搭建 pre out efault 建立
原文地址：http://www.cnblogs.com/weiyemo/p/6591334.html
