kepro
- vue create kepro =>my vue2(vue2 router vuex eslint)
- npm install swiper@5 vue-awesome-swiper@3 --save
BlogContent.vue
<template>
<div class="content">
<div class="" @click="$router.push('/category/'+id)">
>>>返回列表
</div>
<div>
<div class="bt">{{blog.title}}</div>
<div class="nr">{{blog.content}}</div>
</div>
</div>
</template>
<script>
export default {
// 这里接收两个参数
props:['id','bid'],
data() {
return {
blog:{}
}
},
mounted() {
this.blog = this.$store.state.category.find(r=>r.id == this.id).blogs.find(r=>r.id == this.bid)
console.log(this.blog);
},
};
</script>
<style scoped>
.content{
padding: 10px;
}
.fhlb{
padding: 20px 0;
}
.bt{
margin: 20px 0;
text-align: center;
font-weight: bold;
}
.nr{
margin: 20px 0;
text-align: center;
}
</style>
BlogList.vue
<template>
<div class="list">
<div class="category">
"{{category.category}}"类目下文章列表
</div>
<div @click="$router.push('/')">
>>>返回首页
</div>
<div @click="gotoContent(item.id)" class="blogs" v-for="(item,index) in category.blogs" :key="index">
{{item.title}}
</div>
</div>
</template>
<script>
export default {
name: "BlogList",
props:['id'],
data() {
return {
// 定义一个分类对象
category:{
}
}
},
// 页面挂在完成后
mounted() {
this.category = this.$store.state.category.find(r=>r.id == this.id)
},
methods: {
gotoContent(bid){
this.$router.push(`/category/${this.id}/${bid}`)
}
},
};
</script>
<style scoped>
.list{
padding: 10px;
}
.category{
margin: 20px 0;
font-size: 20px;
font-weight: bold;
}
.blogs{
margin: 10px 0;
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
</style>
Home.vue
<template>
<div>
<HomeBanner/>
<HomeMenu/>
<HomeBlog/>
</div>
</template>
<script>
import HomeBanner from './HomeBanner.vue'
import HomeMenu from './HomeMenu.vue'
import HomeBlog from './HomeBlog.vue'
export default {
name: "Home",
components:{
HomeBanner,
HomeMenu,
HomeBlog
}
};
</script>
<style scoped>
</style>
HomeBanner.vue
<template>
<div class="banner">
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide>
<img src="../../assets/images/html.png" />
</swiper-slide>
<swiper-slide>
<img src="../../assets/images/react.png" />
</swiper-slide>
<swiper-slide>
<img src="../../assets/images/vue.png" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
data() {
return {
swiperOptions: {
pagination: {
el: ".swiper-pagination"
},
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false
}
}
};
}
};
</script>
<style scoped >
.banner img{
width: 100vw;
height: 200px;
}
</style>
HomeBlog.vue
<template>
<div class="blog">
<h4>推荐文章</h4>
<div v-for="(item,index) in $store.state.hotblogs.blogs" :key="index">
<div class="bg">
{{item.title}}
<div class="name">Angular</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "HomeBlog"
};
</script>
<style scoped>
.blog{
padding: 10px;
}
h4{
margin-left:10px ;
margin-bottom: 20px;
}
.bg{
width: 100%;
height: 100px;
background-color: #ccc;
text-align: center;
line-height: 100px;
margin-bottom: 10px;
border-radius: 5px;
position: relative;
}
.name{
position: absolute;
background-color: #666;
color: white;
width: 80px;
height: 30px;
line-height: 30px;
right: 10px;
bottom: 10px;
border-radius: 5px;
}
</style>
HomeMenu.vue
<template>
<div class="menu">
<div @click="gotoList(item.id)" v-for="(item,index) in $store.state.category" :key="index">
<div class="bg" :style="{backgroundColor:bc()}">{{item.category | showFirst}}</div>
<div class="name">{{item.category}}</div>
</div>
</div>
</template>
<script>
export default {
name: "HomeMenu",
filters:{
showFirst(val){
return val.substr(0,1)
}
},
methods: {
gotoList(id){
this.$router.push('/category/'+id)
},
bc(){
let arr = [6,7,8,9,'a','b','c','d','e','f']
let color = '#'
for(let i=0;i<3;i++){
color += arr[Math.floor(Math.random()*10)]
}
return color
}
},
};
</script>
<style scoped >
.menu{
display: flex;
flex-wrap:wrap ;
}
.menu>div{
width: 25%;
margin: 10px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.bg{
width: 44px;
height: 44px;
border-radius: 50%;
text-align: center;
line-height: 44px;
/* background:pink ; */
}
</style>
Router=>index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let router = new VueRouter({
routes: [
{
path:'/',
component:()=>import('../components/Home/Home.vue')
},
{
path:'/category/:id',
props:true,
component:()=>import('../components/Blogs/BlogList.vue')
},{
path:'/category/:id/:bid',
props:true,
component:()=>import('../components/Blogs/BlogContent.vue')
}
]
})
export default router
Store=>index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
category: [
{
id: 0, category: "HTML", url: "/category/0", blogs: [
{
id: 0,
title: "HTML5新增标签",
content: "HTML5新增标签——内容"
},
{
id: 1,
title: "HTML基础语法",
content: "HTML基础语法——内容"
}
]
},
{
id: 1, category: "CSS", url: "/category/1", blogs: [
{
id: 0,
title: "CSS3新特性一览",
content: "CSS3新特性一览——内容"
},
{
id: 1,
title: "CSS3动画使用",
content: "CSS3动画使用——内容"
}
]
},
{
id: 2, category: "JavaScript", url: "/category/2", blogs: [
{
id: 0,
title: "JavaScript内置对象一览表",
content: "JavaScript内置对象一览表——内容"
},
{
id: 1,
title: "闭包的使用",
content: "闭包的使用——内容"
}
]
},
{
id: 3, category: "HTTP", url: "/category/3", blogs: [
{
id: 0,
title: "HTTP协议详细介绍",
content: "HTTP协议详细介绍——内容"
},
{
id: 1,
title: "HTTP状态码一览",
content: "HTTP状态码一览——内容"
}
]
},
{
id: 4, category: "React", url: "/category/4", blogs: [
{
id: 0,
title: "React之状态管理",
content: "React之状态管理——内容"
},
{
id: 1,
title: "React之脚手架使用",
content: "React之脚手架使用——内容"
}
]
},
{
id: 5, category: "Vue", url: "/category/5", blogs: [
{
id: 0,
title: "Vue常用指令",
content: "Vue常用指令——内容"
},
{
id: 1,
title: "Vue生命周期",
content: "Vue生命周期——内容"
}
]
},
{
id: 6, category: "Angular", url: "/category/6", blogs: [
{
id: 0,
title: "Angular指令",
content: "Angular指令——内容"
},
{
id: 1,
title: "Angular深入原理",
content: "Angular深入原理——内容"
}
]
},
{
id: 7, category: "ES6", url: "/category/7", blogs: [
{
id: 0,
title: "ECMAScript 的背景",
content: "ECMAScript 的背景——内容"
},
{
id: 1,
title: "Promise 对象使用方法",
content: "Promise 对象使用方法——内容"
}
]
}
]
,
hotblogs: {
id: 6, category: "Angular", url: "/category/6", blogs: [
{
id: 0,
title: "Angular指令",
content: "Angular指令——内容"
},
{
id: 1,
title: "Angular深入原理",
content: "Angular深入原理——内容"
}
]
}
},
mutations: {
}
})
App.vue
<template>
<div id="app">
<div class="title">
<router-link to="/">KGC 技术博客</router-link>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
outline: none;
}
.title{
width: 100%;
height: 50px;
line-height: 50px;
background-color: #f8f8f8;
color: #555;
}
.flex{
display: flex;
}
.j-s{
justify-content: space-between;
}
.j-c{
justify-content: center;
}
.a-c{
align-items: center;
}
#app {
}
</style>
Main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)
new Vue({
render: h => h(App),
router,
store
}).$mount('#app')
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
