项目实训（一）前端框架的搭建

目录

一、搭建前端框架

二、导入js和css样式框架，控制样式

三、初始化网页结构

（一）router设置

（二）index.vue

 （三）导航栏

 （四）回到顶部按钮

一、搭建前端框架

首先选定使用的前端框架为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代码如下：

 最终效果如下：

 至此，网页的一级路由设置完毕。