(src/components/home/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 {
components:{
HomeBanner,
HomeMenu,
HomeBlog
}
};
</script>
<style scoped></style>
(src/components/home/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",
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
loop:true
},
};
},
};
</script>
<style scoped>
.banner img{
width: 100vw;
height: 170px;
}
</style>
(src/components/home/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 {};
</script>
<style scoped>
.blog{
padding: 10px;
}
h4{
margin-left: 10px;
margin-bottom: 20px;
}
.bg{
width: 100%;
height: 100px;
background: #ccc;
text-align: center;
line-height: 100px;
margin-bottom: 10px;
border-radius: 5px;
/* 相对定位 */
position: relative;
}
.name{
/* 绝对定位 */
position: absolute;
background: #666;
color: white;
width: 80px;
height: 30px;
line-height: 30px;
right: 10px;
bottom: 10px;
border-radius: 3px;
}
</style>
(src/components/home/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 {
// 定义一个过滤器
filters:{
showFirst(val){
return val.substr(0,1)
}
},
methods: {
//随机生成背景颜色
bc(){
console.log(11);
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
},
gotoList(id){
this.$router.push('/category/'+id)
}
},
};
</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;
/* background: rgb(247, 167, 167); */
border-radius: 50%;
text-align: center;
line-height: 44px;
}
</style>
(src/components/blogs/blogcontent.vue)
<template>
<div class="content">
<div class="fhlb" @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对象
blog:{}
}
},
mounted() {
this.blog = this.$store.state.category.find(r=>r.id==this.id).blogs.find(r=>r.id==this.bid)
},
}
</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>
(src/components/blogs/blogcontent.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 {
// 接收路由参数
props: ["id"],
data() {
return {
// 定义一个分类对象
category: {},
};
},
methods: {
// 跳转到详情页
gotoContent(bid){
this.$router.push(`/category/${this.id}/${bid}`)
}
},
// 页面挂载完成后
mounted() {
this.category = this.$store.state.category.find((r) => r.id == this.id);
console.log(this.category);
},
};
</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>
(router/index.js)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const 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")
}
]
const router = new VueRouter({
routes
})
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: {},
actions: {},
modules: {},
});
(main.js)
import Vue from 'vue'
import App from './App.vue'
// 导入了路由
import router from './router'
// 导入了vuex
import store from './store'
// 导入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
