vue.js javascript 前端 elementui web vue+element详细完整实现个人博客、个人网站

一.前言

博客成品在线预览：点击访问 接上一篇《vue+elementui实现非常好看的博客、网站首页，网站模板》。 上一篇实现了整个框架的搭建和首页的编码，在此基础上，这一期进行了最终的功能页面完善，增加了功能：

生活日志日志详情所有文章心情说说我的相册相册详情关于我标签合集

同时对样式进行了更深层的改造和优化。

二.页面效果图预览

文章详情： 心情说说+我的相册+相册详情 所有文章+标签合集

三.路由配置

import Vue from 'vue'

import Router from 'vue-router'

import Layout from '@/page/index/index'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/home',

component: Layout,

redirect: '/home/index',

children: [{

path: 'index',

name: '主页',

component: () =>

import( /* webpackChunkName: "views" */ '@/views/home/index')

}]

},

{

path: '/',

name: '主页',

redirect: '/home'

},

{

path: '/article-list',

component: Layout,

children: [{

path: '',

name: '生活日记',

component: () =>

import( /* webpackChunkName: "views" */ '@/views/article/article_list'),

}]

},

{

path: '/article-detail',

component: Layout,

children: [{

path: '',

name: '日记详情',

component: () =>

import( /* webpackChunkName: "views" */ '@/views/article/detail'),

}]

},

{

path: '/all-article',

component: Layout,

children: [{

path: '',

name: '所有文章',

component: () =>

import( /* webpackChunkName: "views" */ '@/views/article/all_article'),

}]

},

{

path: '/shuo-shuo',

component: Layout,

children: [{

path: '',

name: '心情说说',

component: () =>

import( /* webpackChunkName: "views" */ '@/views/shuo_shuo/index'),

}]

},

{

path: '/photos',

component: Layout,

children: [{

path: '',

name: '我的相册',

component: () =>

import( /* webpackChunkName: "views" */ '@/views/photos/index'),

}]

},

{

path: '/photos-detail',

component: Layout,

children: [{

path: '',

name: '相册详情',

component: () =>

import( /* webpackChunkName: "views" */ '@/views/photos/photos_detail'),

}]

},

{

path: '/about-me',

component: Layout,

children: [{

path: '',

name: '关于我',

component: () =>

import( /* webpackChunkName: "views" */ '@/views/about_me/index')

}]

},

{

path: '/all-label',

component: Layout,

children: [{

path: '',

name: '标签集合',

component: () =>

import( /* webpackChunkName: "views" */ '@/views/label/all_label'),

}]

},

]

})

四.数据处理

主要数据就是文章+相册，分别声明为json数据格式，存储于页面缓存，因为app.vue是一定会加载的，所以作者把这些初始化数据和存储操作都放在了app.vue，利于其他页面获取缓存加载数据。 app.vue源码：

其中 setStore({name: ‘articles’, content: this.articles}); setStore({name: ‘photos’, content: this.photos}); 是把json格式内容转化为字符串存储到浏览器缓存，是封装好的方法，其实也就是利用window.localStorage原生方法，既然有set就有get，获取方法就是getStore({name: ‘articles’})

五.总结

博客为了暂时兼容手机样式不错乱问题，使用了依赖： “lib-flexible”: “^0.3.2”, “px2rem-loader”: “^0.1.9” 同时对某些方法进行个性改造，未来有时间再进行更好的优化。

感谢您的阅读，如有任何问题可留言、私聊或通过博客后面的名片联系作者！

好文链接

 您阅读本篇文章共花了：