前端使用Vue2.9.6框架开发，开发IDE为WebStorm。其中，前端开发使用Axios作为前后端异步通信工具，结合Vuetify+ElementUI快速搭建前端页面，并使用Vuex作为数据存储媒介，VueRouter控制前端跳转路由。除此之外，还引入了很多第三方的插件，比如animated动画渲染、InfiniteLoading无限加载、highlight.js代码高亮、mavonEditor 编辑插件等。下面将简单展示前端项目的界面布局。
注意：下面的展示仅表示界面架构设计和布局效果，不代表最终项目上线的样式效果，轻以最终上线展示效果为准。
import Vue from 'vue'
import App from './App'
import router from './router'
//引入vuex
import store from "./store"
//引入element-ui组件和样式
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//引入vuetify组件和样式
import vuetify from './plugins/vuetify';
//引入animate.css动画渲染
import animated from "animate.css";
//引入字体和主题样式
import "./assets/css/index.css";
import "./assets/css/iconfont.css";
//无限滚动加载插件
import InfiniteLoading from "vue-infinite-loading";
//markdown插件样式
import "./assets/css/markdown.css";
//highlight代码高亮插件样式
import "highlight.js/styles/atom-one-dark.css";
//引入mavon-editor编辑插件+css样式
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
//设置为 false ，可以阻止生产环境下 vue 在启动时生成生产提示
Vue.config.productionTip = false
Vue.use(ElementUI);//注册elementUI组件
Vue.use(animated);//注册animated组件
Vue.use(InfiniteLoading);//注册infinite组件
Vue.use(mavonEditor);//注册使用mavonEditor组件
//路由后置守卫钩子函数：导航成功后进入页面前调用
router.afterEach(() => {
//控制页面滑动到顶部开始
window.scrollTo({
top: 0,//滑动坐标
behavior: "instant"//瞬间滑动
});
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
vuetify,
store,
components: { App },
template: '<App/>'
})
一.主页
二.登陆/注册模块
三.分类页面
四. 博客详情与评论
五.资源列表与详情
六.友链页面
七.关于我页面
八.博文搜索
九.他人空间主页
十.个人主页（我的信息，我的博客、我的资源、分类管理）
十一.博客编辑
十一.资源编辑
