旅游页面移动版笔记
关注
分享
扫一扫
哒玲
这个作者很懒，什么都没留下…
展开
-
图标区域页面布局
1. 创建新分支码云上创建功能分支：index-icons，把该分支拉到本地，然后切换到该分支： 在components下创建Icons.vue，取名HomeIcons，在Home组件中引入并注册Icons组件：设置元素icon的样式，高度自适应为父元素宽度的一半：2. 显示八个小图标– 先观察其中的一个小图标icon的位置和样式：– 首先我们要了解在CSS中，margin...原创 2019-02-27 16:00:08 · 1066 阅读 · 0 评论 -
实现Header渐隐渐现的效果
创建分支detail -header并拉到线下，在Detail组件中引用。想要页面能够滚动，得有足够的长度：打开Header.vue进行具体的编码，加入返回图标iconfont：效果：实现功能：点击返回图标的时候，会返回到首页：固定导航栏：逻辑区块：定义一个变量来控制显示还是隐藏：现在页面上导航栏被隐藏起来了：因为我们用了keepalive，所以页面一旦被展示...原创 2019-03-01 16:27:22 · 782 阅读 · 0 评论 -
使用递归组件实现详情页列表
1. 创建项目分支detail-list并拉到线下。2. 在components创建一个新的组件List.vue，并在Detail组件中引用，这样List组件就展示出来了3. 我们要定义一些数据，首先把一级数据写一下在Detail组件中，并把list传递给detail-list这个组件：那么detail-list组件就要去接收这个list属性，必须是一个Array。然后对list做一个循...原创 2019-03-01 17:05:53 · 616 阅读 · 1 评论 -
Vue项目的接口联调
之前我们在项目中获取的ajax数据其实不是从后端获取的数据，而是我们通过一个接口mock模拟的假数据，当我们前端的代码已经编写完毕，后端的接口也已经写好的时候，就需要把我们前端编写的数据清掉，去尝试使用后端提供的数据。即需要前后端实现一个接口联调。首先把static目录下的mock数据都删掉，联调的时候我希望我的组件访问服务器PHP提供的数据：打开config目录，找到index.js，...原创 2019-03-01 17:10:05 · 2629 阅读 · 0 评论 -
Vue项目的真机测试
在命令行运行ifconfig（Linux系统）或是ipconfig（Windows系统），我们要获取到当前机器的一个IP地址，可以看到，当前这台机器的内网的一个IP地址为192.168.43.50：在浏览器里，我们输入192.168.43.50，也是指的这台机器，他的8080端口和我们的localhost的8080端口是一样的，但是却访问失败，原因是我们前端的项目是通过webpack-dev...原创 2019-03-01 17:33:42 · 1225 阅读 · 0 评论 -
单文件组件与Vue中的路由
1. 单文件组件打开src目录下的main.js文件，整个项目的入口文件。main.js中的挂载点“#app”就是指的index.html中的ID等于app的div元素。其中的指的是在项目里用了一个局部组件App(后一个)，在外层的Vue实例中给这个组件也取名为App。ES6写法中如果键和值是一样的可以直接写成：在模板里把App这个组件渲染出来，显示在页面上。引入局部组件。以vu...原创 2019-02-25 20:06:21 · 661 阅读 · 0 评论 -
项目代码的初始化
让移动端1:1显示网页做移动端的页面时要考虑在PC端正常显示的网页，在移动端（IOS或者Android）显示时出现放大好几倍的现象。这个问题可以通过强制网页按照1:1进行显示，在项目默认的首页模板文件index.html中加入这样一段代码：<!DOCTYPE html><html> <head> &a原创 2019-02-25 20:43:17 · 711 阅读 · 3 评论 -
首页header区域的开发
Stylus是一个CSS预处理器。现在最为普遍CSS预处理器主要有三种：Sass、Less CSS、Stylus。详细的内容见https://www.oschina.net/question/12_44255?sort=default&p=4原创 2019-02-25 20:55:19 · 489 阅读 · 0 评论 -
项目结构介绍
– 项目说明文件；– 有很多依赖包，表示在开发项目的时候要有一些第三方模块的依赖；– 可以确定安装的第三方依赖包的版本；– 开源协议的说明；– 项目默认的首页模板文件；– 默认；– 有些特殊的文件不想传到线上去，可以在这里配置；– 对代码做一个检测，看书写是否标准，其中配置了一些代码的规范；– 根目录下有些文件是不受上面所说的代码检测的；– ...原创 2019-02-25 09:07:27 · 1714 阅读 · 0 评论 -
详情页动态路由及banner布局
1. 创建分支detail-banner并拉到线下。2. 我们的要求是希望点击景点的时候导入到详情页：打开首页中的Recommend组件，我们给li标签外层包裹一层router-link标签：刷新，发现router-link标签会改变文字的颜色：我们可以以换一种写法，直接把li标签换成router-link，加上tag之后就会渲染成li标签而不是一个a标签了，我们做一个动态的绑定：...原创 2019-03-01 15:39:38 · 621 阅读 · 0 评论 -
使用keep-alive优化网页性能
1. 创建项目分支city-keepalive并拉到线下：Bug:每次我们点击切换首页和城市列表页面即路由被切换的时候，都会触发一次ajax请求，原因是每次路由切换到首页这个组件的时候，页面都会被重新的渲染，然后渲染完成之后就会执行mounted这个钩子，这个ajax的数据就会被重新获取。事实上我们希望获取一次就可以了，不然性能上很低。解决：打开main.js，城市的入口组件是app....原创 2019-03-01 14:52:24 · 637 阅读 · 0 评论 -
推荐区域开发
1. 创建新分支– 创建新分支Index-recommend并拉到线下。– 在components文件夹中创建组件Recommend.vue：– 在Home.vue中引入组件并注册使用– 设计样式：加了margin-top之后，icons部分上方应该离轮播图有一点距离，使得上下对称（要注意元素层级的关系）：2. 推荐图文结构3. css部分<style sco...原创 2019-02-27 16:25:50 · 200 阅读 · 0 评论 -
Ajax获取首页数据
1. 创建分支index-ajax，然后拉到线下。在vue中发送ajax有很多工具：– 浏览器自带的fetch函数；– Vue-resource第三方模块；– 自vue2.0之后，就不再对vue-resource更新，官方推荐使用axios。基于Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用，比如在浏览器端axios可以帮助我们发送xhr请求，在node...原创 2019-02-27 20:28:40 · 868 阅读 · 2 评论 -
城市选择页面路由配置
1. 创建分支city-router并拉到线下，重启项目。2. 配置路由进入到src目录下的router文件夹下的index.js，创建新路由路径为根目录下的city，名字为City，引入组件：然后到pages下创建文件夹city，在city文件夹中创建City.vue组件，以及components文件夹：3. 我们希望点击“北京”时，进入到City页面：– 回到home文件夹下，找...原创 2019-02-27 20:44:08 · 316 阅读 · 0 评论 -
搜索框布局
创建一个新的分支city-search：然后回到终端，运行git pull指令，切换到city-search分支：然后重新启动服务器。在components下创建Search.vue：在City根组件中引用注册并使用：样式：但是我们发现输入字数过多的时候内容超出input框显得不美观：优化：加padding：0 .1rem但是：这时要加上box-sizing: bor...原创 2019-02-27 20:53:03 · 595 阅读 · 0 评论 -
环境配置及前期准备
安装node.js。LTS长期维护版本，安装好后，通过node -v和nmp -v指令来输出版本号看是否安装成功。注册码云。– 点击个人主页，点击项目选择private，点击“+”，创建一个私有的仓库，来存储我们的代码。项目名称“travel”、“JavaScript”、“添加gitignore”、“MITLicense”、“私有”、“使用Readme文件初始化这个项目”，最后点击创建。...原创 2019-02-24 21:23:58 · 284 阅读 · 0 评论 -
城市列表布局
创建分支city-list把线上的分支拉到本地：git pull，然后切换到这个分支上：git checkout city-list，最后重启服务器：cnpm run dev。创建List组件并在City组件中引用注册使用。分析布局，建三个区域，并加一像素边框：css一像素边框的颜色不是太清楚，改动一下颜色：三个部分当前城市样式：发生了塌陷，我们在布局的时候经常会...原创 2019-02-28 22:09:05 · 871 阅读 · 0 评论 -
城市列表页面的数据渲染
1. 创建新的分支city-ajax：下载city.json文件，然后保存到mock下。同理，Ajax请求我们一般会放在最外层的City组件上来做：首先引入axios；利用mounted函数，执行一个getCityInfo方法：在methods里定义这个方法发起ajax请求，然后触发一个handleGetCityInfoSucc方法，接收到的是模拟数据的结果res：接下来就...原创 2019-03-01 10:18:59 · 1496 阅读 · 0 评论 -
使用Vuex实现（首页和城市选择页面的）数据共享
1. 创建新分支city-vuex并拉到线下，切换到新分支上：然后重启服务器。2. 我们要实现的功能是点击城市选择页面的城市时，首页右上角的城市会随之切换到相同的城市：这就意味着首页和城市选择页面要共享一些数据，或者说城市选择页面要传送一些数据给首页，即City.vue和Home.vue要共用一些数据，但是这两个组件没有一个共用的父子组件，就不能用之前的方法：3. VuexVuex...原创 2019-03-01 14:34:37 · 909 阅读 · 0 评论 -
首页轮播图
1. 创建分支打开码云官网，创建一个git分支，在分支上进行git功能的开发，然后合并到主分支mask上。点击“一个分支”：新建分支，在这个分支中写首页轮播图的功能：这样我们在线上就新建好了一个轮播图的分支，接下来通过指令git pull将线上的分支拉到本地来：切换到该分支，指令git checkout index-swiper：查看状态，指令git status：最后C...原创 2019-02-26 21:59:35 · 1493 阅读 · 0 评论