一、首页
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' ,
component: Blog
} ,
{
path: '/Blog/Edit' ,
name: 'BlogAdd' ,
component: BlogEdit
} ,
{
path: '/Blog/Edit/:BlogId' ,
name: 'BlogEdit' ,
component: BlogEdit
} ,
{
path: '/Blog/Detail/:BlogId' ,
name: 'BlogDetail' ,
component: BlogDetail
}
]
const router = new VueRouter ( {
mode: 'history' ,
base: process. env. BASE_URL ,
routes
} )
export default router
2、全局样式
上面//注释
不要加 css中注释是/**/而不是//,加上会报错
3、编写home首页(先简单做一个,之后详细开发)
< 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;
}
.height1_Div {
transition : 1.5s;
transform : scale ( .3) ;
color : rgb ( 255, 255, 255) ;
height : 20vh;
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、代码
< 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>
<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>
< script>
export default {
name: 'HelloWorld' ,
props: {
msg: String
} ,
methods: {
blog ( ) {
this . $router. push ( { name: 'Blog' } )
} ,
login ( ) {
this . $router. push ( { name: 'Login' } )
} ,
leaveWord ( ) {
} ,
diary ( ) {
} ,
FriendsOfTheChain ( ) {
} ,
}
}
< / 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>