个人博客项目开发总结（二） 项目前端开发

        前端使用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: ''
})

一.主页 

二.登陆/注册模块

三.分类页面

四. 博客详情与评论

五.资源列表与详情

六.友链页面

七.关于我页面

 八.博文搜索

九.他人空间主页

十.个人主页（我的信息，我的博客、我的资源、分类管理）

十一.博客编辑

十一.资源编辑