一、首页
1、 创建路由页面和路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
import Login from '../views/login.vue'
import Blog from '../views/blog.vue'
import BlogEdit from '../views/blogEdit.vue'
import BlogDetail from '../views/blogDetail.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/Login',
name: 'Login',
component: Login
},
{
path: '/Blog',
name: 'Blog',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: Blog
},
{
path: '/Blog/Edit',
name: 'BlogAdd',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: BlogEdit
},
{
path: '/Blog/Edit/:BlogId',
name: 'BlogEdit',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: BlogEdit
},
{
path: '/Blog/Detail/:BlogId',
name: 'BlogDetail',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: BlogDetail
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
2、全局样式
上面//注释不要加 |
|---|
| css中注释是/**/而不是//，加上会报错 |
3、编写home首页(先简单做一个，之后详细开发)
| html标签 |
|---|
<div class="home">
<div class="height1">
<div class="height1_Div">
<h1>My-Blog</h1>
<p>只要朝着一个方向努力，一切都会变得心应手</p>
<el-button type="primary" id="height1_button" @click="enterBlog()">Enter Blog</el-button>
</div>
</div>
</div>
| 样式 |
|---|
<style>
/*首页面*/
.height1{
background-image:url(http://www.lzqcode.com/templets/static/image/index_bg.jpg);/* 首页背景图片 */
background-position: center;/* 背景图片位置始终居中显示 */
background-attachment: fixed;/* 背景固定 */
background-repeat: no-repeat;/* 不平铺 */
position: relative;/* 相对定位 */
height: 100vh;/* 100vh表示正好和浏览器窗口大小一致 */
}
.height1_Div{
transition: 1.5s;/* 动画效果 */
transform: scale(.3);/* 缩放 */
color: rgb(255,255,255);/* 文字颜色 */
height: 20vh;/* 高度为浏览器20比 */
width: 100%;/* 宽度正好撑满 */
/* 以下是块级元素居中方案 */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.height1_Div h1{
font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;/* 设值文字 */
display: block;/* 转换为块级元素，让其独占一行 */
font-size: 2em;/* 字体大小 */
/* 外边距*/
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.height1_Div p{
font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;
margin: 20px 0;
letter-spacing: 10px;/* 文字间距 */
display: block;
/* 外边距*/
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
#height1_button{
margin-top: 20px;
display: inline-block;
height: 38px;
line-height: 38px;
padding: 0 18px;
text-align: center;
font-size: 14px;
border: none;
border-radius: 2px;
cursor: pointer;/* 鼠标指针指入变为手的形状 */
}
</style>
4、js代码
export default{
data(){
return{
}
},
created() {
/*初始动画效果*/
window.onload=function(){
let height1_Div=document.querySelector(".height1_Div");
height1_Div.style.transform="scale(1,1)";
}
},
methods:{
enterBlog(){
this.$router.push({name:"Blog"})
}
}
}
二、公共头部组件
1、代码
| html |
|---|
<template>
<header class="Handler">
<div class="header-fixed">
<div class="header-inner">
<a href="javascript:void(0)" class="header-logo" id="logo">Mr.liu</a>
<nav class="nav" id="nav">
<ul>
<li><a href="/" >首页</a></li>
<li><a href="#" @click.stop.self="blog()">博客</a></li>
<li><a href="#" @click.stop.self="leaveWord()">留言</a></li>
<li><a href="#" @click.stop.self="diary()">日记</a></li>
<li><a href="#" @click.stop.self="FriendsOfTheChain()">友链</a></li>
</ul>
</nav>
<a href="#" class="blog-user">
<i class="el-icon-user-solid" @click="login()"></i>
</a>
<a class="phone-menu">
<i></i>
<i></i>
<i></i>
</a>
</div>
</div>
</header>
</template>
| css |
|---|
<style scoped>
.Handler{
width: 100%;
min-height: 60px;
position: fixed;
background-color: rgba(255,255,255,1);
z-index: 999;
top: 0;
left: 0;
border-bottom: 1px solid #e8e9e7;
font-size: 14px;
display: block;
font: 14px/1.5 "Helvetica neue",Helvetica,Tahoma,"lantinghei sc","Microsoft Yahei",sans-serif;
color: #515250;
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
.header-fixed {
width: 90%;
}
.header-fixed {
margin-left: auto;
margin-right: auto;
position: relative;
}
.header-inner {
margin-left: 10px;
margin-right: 10px;
position: relative;
}
.header-logo {
font-family: "agency fb";
font-size: 40px;
color: #444647;
text-align: center;
position: absolute;
left: 0;
}
a, img {
text-decoration: none;
border: none;
}
#nav{
display: block;
position: absolute;
right: 15%;
margin: 0;
padding: 0;
border: 0;
}
ul {
display: block;
list-style-type: disc;
}
.nav li {
display: block;
float: left;
margin: 10px 5px;
position: relative;
}
.nav li:before {
width: 0;
height: 2px;
position: absolute;
bottom: -11px;
left: 50%;
background-color: #6bc30d;
content: "";
transition: all .6s;
z-index: -1;
}
.nav li:hover:before {
width: 100%;
left: 0;
}
li {
list-style: none;
}
.nav li a {
display: block;
line-height: 32px;
padding: 4px 28px;
color: #212220;
font-weight: 400;
font-size: 15px;
text-shadow: 0 1px 0 rgba(255,255,255,.2);
-webkit-transition: all .2s;
transition: all .2s;
}
.blog-user{
position: absolute;
right: 0;
line-height: 60px;
font-size: 24px;
color: #000000;
}
</style>
| js |
|---|
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods:{
blog(){
this.$router.push({name:'Blog'})
},
login(){
this.$router.push({name:'Login'})
},
leaveWord(){
// this.$router.push({name:'留言'})
},
diary(){
// this.$router.push({name:'日记'})
},
FriendsOfTheChain(){
// this.$router.push({name:'友链'})
},
}
}
</script>
2、解决路由重复点击报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
3、引用组件
<template>
<div>
<Handler id="handler"></Handler>
lll
</div>
</template>
<script>
import Handler from '@/components/Handler.vue'
export default{
components:{
Handler
}
}
</script>
<style>
#handler{
position: relative;
}
</style>