基于vue-cli vue-router搭建底部导航栏移动前端项目

前端之家收集整理的这篇文章主要介绍了基于vue-cli vue-router搭建底部导航栏移动前端项目前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

vue.js学习 踩坑第一步

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

不多赘述,主要参考

2.项目呈现效果

项目呈现网址:

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

3.项目主要目录

4主要代码如下

(1)App.vue

(2)main.js

',render: h => h(App) });

(3)index.js //这个就是路由的配置

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

const router = new VueRouter({
routes: [{
path: '/langren',component: require('../components/vue/langren.vue')
},{
path: '/sanguo',component: require('../components/vue/sanguo.vue')
},{
path: '/yingxiong',component: require('../components/vue/yingxiong.vue')
},{
path: '/',component: require('../components/content/content.vue')
}]
});
export default router;

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

(4)router.js

(5)content.vue

我是content!

猜你在找的Vue相关文章