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;
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!