VUE 学习笔记 从零开始一步一步构建 VUE 单页应用(三)
来源:互联网 发布:成都纵横无人机 知乎 编辑:程序博客网 时间:2024/06/05 06:41
从零开始一步一步构建 VUE 单页应用(一)
从零开始一步一步构建 VUE 单页应用(二)
前二篇介绍了如何创建一个基础的单页应用模版,以及简单分析了下整个模版项目,通过分析之后知道后面的工作应该从哪入手开始。
在上一篇中,我们简单的生成了一个 Home 页面,在实际项目中当然不会这么简单,实际项目中,一个首页会有很多内容,比如说比较常见的顶部一个 banner,然后是一个九宫格导航,然后可能还有一个列表,底部还有一个导航。
比如说上图中那样的,那我们怎么用 Vue 去做呢?我们慢慢来,先做一个简单的。
分析
做之前先要做下需求分析:
1. 底部导航栏应该是整个应用公用的,所以需要单独写成一个组件。然后要放在主容器里面,让整个应用共用。
2. 顶部 banner 也应该是一个组件,因为有很多页面都可能会要用到 banner,因为不是每个页面都会有,所以应该是在需要 banner 的路由里面才写。
3. 九宫格导航,这块一般也就首页会有,可以单独写成一个组件,在首页路由里面调用,也可以直接写在首页里面。推荐写成组件,毕竟单页应用的核心思想就是组件化,模块化。
实现
分析完了就可以开工了,按照上面的分析一步步来。
底部导航
首先在 components 文件夹下新建一个 vue 文件,BottomNav.vue
<template> <div id="bottomNav"> <div class="tab">首页</div> <div class="tab">我的</div> </div></template><script></script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped> #bottomNav { display: flex; width: 100%; height: 3rem; line-height: 3rem; padding: 0.5rem 0; text-align: center; border-top: 1px solid #999999; position: fixed; left: 0; bottom: 0; } .tab { flex: 1; text-align: center; border-right: 1px solid #999999; }</style>
写好之后,按照上面的分析,这个组件是全应用共享的,所以要放在主容器里面,也就是 App.vue 文件里面。改造之后的 App.vue 如下:
<template> <div id="app"> <img src="./assets/logo.png"> <router-view></router-view> <!--3,将组件写入页面--> <BottomNav></BottomNav> </div></template><script> //1,导入组件 import BottomNav from './components/BottomNav.vue'export default { name: 'app', //2,注册组件 components:{ BottomNav }}</script><style>#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>
里面要做的就三件事,都写了注释,熟练的话不用按顺序来,但是这三件事情都是必须要做的。
特别注意
这里有一点需要注意,在第一步导入组件的时候
import BottomNav from './components/BottomNav.vue'
这句代码,后面的字符串是我们要导入的组件在项目中的路径,这个路径如果写错的话会报错,vue 表示找不到这个组件。
出现这个错误的话就仔细检查下,引入组件的路径是否正确。(这个问题可是坑了我很久。照着别人的教程做,老是报错,又找不到原因,后来才发现是路径问题,这里面的路径和传统 Html 中的引入资源路径是有点区别的,具体的我也说不清,,,)
写好了后就在命令行中进入 app 文件夹,npm run dev 回车运行看效果,如图:
上面算是比较详细的记载了如何自己写一个组件并将其显示到页面上,以及我在实践中遇到的一个坑(这个坑在其他人的各种教程里面可都没有说到,,,)。有了这个开端,后面的就可以照葫芦画瓢的去实现自己的静态页面了。
- VUE 学习笔记 从零开始一步一步构建 VUE 单页应用(三)
- VUE 学习笔记 从零开始一步一步构建 VUE 单页应用(一)
- VUE 学习笔记 从零开始一步一步构建 VUE 单页应用(二)
- VUE 学习笔记 从零开始一步一步构建 VUE 单页应用(四)
- vue新建项目(三)构建单页应用(SPA)
- 从零开始学习Vue(三)
- 从零开始学习Vue(三)
- 从零开始学习Vue(三)
- 从零开始学习Vue(三)
- 从零开始学习Vue(三)
- 从零开始学习Vue(三)
- 从零开始学习Vue(三)
- 从零开始学习Vue(三)
- vue+webpack构建单页面应用笔记(不断更新中。。。)
- Vue.js使用vue-router构建单页应用
- Vue.js使用vue-router构建单页应用
- Vue构建单页应用最佳实战
- Vue构建单页应用最佳实战
- 【dp+桶】Sorting Railway Cars CodeForces
- XML编程,CURD,异常处理
- 新手篇——学习网页开发需要多长时间就能找到工作
- AngularJS用户添加,密码修改
- web.xml 配置中classpath: 与classpath*:的区别
- VUE 学习笔记 从零开始一步一步构建 VUE 单页应用(三)
- 关于消息队列的使用
- 深入分析类与对象--综合实战:简单java类
- C#回顾学习笔记十四:C#中自定义方法与调用方法
- python/java 网站记载
- 安卓面试总结
- C# 自定义窗体移动窗体的方法
- Python之生成器/迭代器
- android4.4 锁屏灭屏时间的设置