在vue-cli中使用vue-router搭建底部导航栏（详细教程）

vue.js学习 踩坑第一步

1.首先安装vue-cli脚手架

不多赘述，主要参考 Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目

2.项目呈现效果

项目呈现网址：www.zhoupeng520.cn/index.html

项目中主要用了Flex布局，以及viewport相关知识，已达到适应各终端屏幕的目的

3.项目主要目录

4主要代码如下

（1）App.vue

（2）main.js

（3）index.js //这个就是路由的配置

这个可以直接写进main.js 也可像我一样在main.js中引入，各有各的好处

也可以直接写一个routers.js放在src目录下

(4)router.js

(5)content.vue

langren.vue / sanguo.vue / yingxiong.vue 代码和这个一样只是颜色和p中字段改了下。

主要代码就这些了。

5.另外写一下主要遇到的报错以及解决方法

（1）由于是用来es6的语法，所以要遵循它 的一些语法规则，所以有的代码最后要多一行空行，有的要加分号，有的要加空格，根据报错来进行更改

（2）semi//indent//no-tabs报错，在.eslintrc.js更改代码如下，主要添加了最后几行。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Servlet3.0与纯javascript通过Ajax交互的实例详解

jQuery替换节点元素的操作方法

使用Angular CLI生成 Angular 5项目教程详解

以上就是在vue-cli中使用vue-router搭建底部导航栏（详细教程）的详细内容，更多请关注Gxl网其它相关文章！