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

发布时间：2020-12-17 02:33:44 所属栏目：百科来源：网络整理

导读：vue.js学习踩坑第一步 1.首先安装vue-cli脚手架不多赘述，主要参考 2.项目呈现效果项目呈现网址：项目中主要用了Flex布局，以及viewport相关知识，已达到适应各终端屏幕的目的 3.项目主要目录 4主要代码如下（1）App.vue （2）main.js ',render: h => h

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！