项目实训（一）前端框架的搭建
一、搭建前端框架
首先选定使用的前端框架为Vue。
在配置文件main.js中导入element-ui框架、axios插件等
设置原型Vue.prototype.$http为axios，这样可以在每个Vue组件中直接调用axios，再将baseURL设置为服务器的url。
二、导入js和css样式框架，控制样式
其中包括bootstrap、wow.js、progressBar等框架。
三、初始化网页结构
（一）router设置
在router包下的index.js中设置vue组件页面跳转的路径。
先设置好一级路由，为Index，每个页面都有这个组件中的属性，再在children中设置二级路由的路径。redirect重定向设置首页的路径/indexOne，默认展示首页。
（二）index.vue
在一级路由index.vue中，设置网页结构，模板为elementUI，el-main中的router-view表示页面主要部分显示的是二级路由中的内容，切换可更换。
在el-header和el-footer中设置导航菜单和页尾，切换路径时始终显示。
（三）导航栏
左上角显示网址名，中间为导航栏，右侧为登录按钮。
其中main-menu的css样式如下
最终导航菜单效果如下：
（四）回到顶部按钮
在index.vue中设置一个回到顶部的按钮，每个页面都显示
其中css样式如下：
js代码如下：
最终效果如下：
至此，网页的一级路由设置完毕。
