vue制作part1

index.html
引入移动端自适应
下载 vue-router mockjs axios

新建public/css/inex.css public与src同级
index.html中引入index.css
搭建主页框架app.vue
声明组件header & footer
新建components/routerpage/footer.vue(header.vue)
在src下
在app.vue上挂载

footer基本设置 之后进行style样式设置
footer data 在div中循环遍历 img静态 activeimg激活状态
useractive 判断是否点击

对footer样式进行设置 要footer的元素水平垂直居中

进入iconfond下载图标 png下载
把图片存在src/assets/img下
再给footer.vue中的data添加图片路径

图片加载不出来 对img的src进行修改

改为动态路径
把img文件放在public文件中

给img写class名设置样式
给footer写方法
userclick


点击的颜色切换


最后对true&false进行了调整 true是点击

写header.vue

当前样式仅限于局部作用

对header的内容进行区域划分


rem相对于父容器的大小
相对父容器居中 给父容器设置

header 选项卡

给span添加点击变化 true被选择 false没有选
通过data数据的循环绑定


添加点击事件



居中样式

进入app.vue
首页加载首页的路由首页的模板
components下新建children文件夹 把footer和header挪到children
把app.vue上的import 路径修改为children
把header从app.vue中删除 import 和标签还有components 把它放在index.vue中调用

在routerpage上新建index.vue创建首页模板
src下新建router
在main.js中引入路由


配置路由router.js


index.vue放入header.vue