Vue项目实战
Milly_Liu
Victory won't come to me unless I go to it.
展开
-
eslint检测时报错
配置是这样的:安装的依赖:"devDependencies": { "@babel/core": "^7.9.0", "@babel/preset-env": "^7.9.0", "autoprefixer": "^9.7.5", "babel-core": "^6.26.3", "babel-eslint": "^10.1.0", "babel...原创 2020-04-04 22:02:32 · 4871 阅读 · 0 评论 -
去哪儿-22-async-components
目标:学习Vue中异步组件的使用首先看,webpack打包生成的dist目录中包含的内容:有一个index.html文件,这个就是前端代码的入口的html文件;有一个static目录。里面会有一个css文件夹,css.map文件目的是帮助我们调试被压缩过的css代码,方便在开发的时候调试的使用,真正在线上有用的文件是这个css文件,里面是我们所有页面要用到的css,还有个js目录,有用的有3个文...原创 2020-03-13 08:26:40 · 91 阅读 · 0 评论 -
去哪儿-21-debuggiing-testing
目标: Vue项目的接口联调,真机测试与webpack打包上线1. Vue项目的接口联调之前我们在写代码的时候,使用的ajax数据都不是从后端返回的真实数据,而是我们自己通过接口mock模拟的假数据。当前端的代码已经编写完毕,后端的接口已经写好的时候,就需要把前端模拟的数据去掉,去尝试使用后端提供的数据,进行前后端的一个调试,这个过程就是前后端的联调。将mock当中的数据切换成后端提供的真实...原创 2020-03-13 08:25:29 · 119 阅读 · 0 评论 -
去哪儿-20-detail-animation
目标: 在项目中添加一个基础动画效果当点击详情页的图片轮播组件时,希望它能够显示出渐隐渐现的效果。创建一个公共的渐隐渐现的组件src/common/fade/FadeAnimation.vue,并搭建基础框架。单个组件的动画写法:<transition> <slot></slot></transition>其中slot是外部...原创 2020-03-13 08:24:55 · 105 阅读 · 0 评论 -
去哪儿-19-detail-ajax
目标: 使用ajax获取详情页面的数据数据形式:{ "ret": true, "data": { "sightName": "迪士尼小镇", "bannerImg": "http://img1.qunarzz.com/sight/p0/1707/82/821428e3bbf93bbaa3.water.jpg_600x330_2385695d.jpg", "gal...原创 2020-03-12 14:07:14 · 226 阅读 · 0 评论 -
去哪儿-18-detail-list
目标:使用递归组件实现详情页列表的开发准备阶段: 创建分支detail-list,创建组件List.vue,组件引入。第一层列表的实现:基本布局是:<div class="item"> <div class="item-title border-bottom"> <span class="item-title-icon">&l...原创 2020-03-12 14:06:38 · 612 阅读 · 0 评论 -
去哪儿-17-detail-header
目标: 实现详情页中header渐隐渐现效果当进入详情页的时候,详情页的左上角有一个返回的按钮,向下拉详情页的时候,返回箭头会慢慢消失,取而代之的是一个蓝色的header。创建Header.vue组件,完成基本的框架构建与引入操作返回箭头的基本布局与样式美化:<div> <div class="header-abs"> <div c...原创 2020-03-12 14:02:48 · 249 阅读 · 0 评论 -
去哪儿-16-detail-banner
目标: 完成详情页的开发当点击首页的热销推荐中的某一项,可以进入它对应的详情页。按照原来的思路,我们可以直接在li标签外面包裹一层<router-link to="/detail"></router-link>。 还是同样的问题,它会默认转换成一个a标签,里面的文字颜色就会被更改。在这里,我们换一种方式:直接将li变成router-link,然后再添加一个指示为li的...原创 2020-03-12 09:16:29 · 191 阅读 · 0 评论 -
去哪儿-15-keep-alive
目标: 使用Vue内置标签keep-alive实现对首页和城市选择页的性能优化在浏览器中Network下的XHR可以发现,在每一次发生页面切换的时候都会有一次ajax请求,原因是:比如在Home.vue中,每一次页面更新的时候页面都会被重新渲染,所以它的mounted生命周期钩子就会就会重新执行,ajax数据就会被重新获取。每一次都要发出ajax请求,性能是很低的,能不能在请求一次后将内容存储...原创 2020-03-12 09:13:35 · 160 阅读 · 0 评论 -
去哪儿-14-vuex_localstorage
目标: Vuex的高级使用与localStorage本地存储bug:我们在src/store/index.js中设置的city的默认值是“上海”,当我们在城市列表中选择某一个城市的时候,首页上确实会变成相应的城市,但是当我们再刷新首页的时候会发现又变成了“上海”。正常情况下我们去访问一个网页,当再次打开的时候,它显示的应该是用户上次请求的内容。在H5中有一个新增API: localStor...原创 2020-03-12 09:13:04 · 140 阅读 · 0 评论 -
去哪儿-13-city-vuex
目标:使用Vuex实现首页和城市选择页面的数据共享功能: 当我点击城市选择页面上的某个城市的时候,首页的右上角呈现的就是这个城市。相当于,我需要将城市选择页面的数据传递给首页,实现两个页面的数据共享。我们会发现,City.vue与Home.vue两个组件之间并没有一个共同的父组件可以作为桥梁去实现两个组件之间的数据传递。我们可以使用总线的方式,但是依然比较麻烦,Vue官方提供了一个数据框架vu...原创 2020-03-12 09:12:29 · 134 阅读 · 0 评论 -
去哪儿-12-city-search-logic
目标: 城市列表页搜索区域的功能实现功能:在搜索城市名字或者拼音的时候,能够把搜索的结果显示出来。搜索列表的布局与逻辑实现<template> <div> <div class="search"> <input class="search-input" type="text" placeholder="...原创 2020-03-12 09:11:22 · 153 阅读 · 0 评论 -
去哪儿-11-city-components
目标: 实现兄弟组件之间的联动(一) 点击城市页面的Alphabet.vue中的字母能够跳转到对应的List.vue的位置给Alphabet.vue中的每一个循环的li绑定一个点击事件<li class="item" v-for="(item,key) of cities" :key="key" @click="handleLetterClick">{{key}}</li...原创 2020-03-12 09:10:49 · 119 阅读 · 0 评论 -
去哪儿-10-city-ajax
目标: 城市页面的动态数据渲染1. 准备阶段:创建分支,构建组件模板,引入组件。与首页一样,将我们的city.json数据放在静态资源文件夹内,并让City.vue组件来获取ajax数据。2. 获取ajax数据引入 axios借助生命周期函数的mounted, 让页面挂载好之后去执行getCityInfo这个函数(函数定义在methods中)export default { ...原创 2020-03-12 09:10:09 · 142 阅读 · 1 评论 -
去哪儿-09-city-list
目标: 实现城市选择页面的列表布局1. 准备阶段: List组件的创建与引入2. 城市表格的布局2.1 首先会发现,整张列表当中可以分成“您的位置”,“热门城市”和“字母城市列表”三个部分,呈现三个区域:<div class="list"> // <div class="area"> <div class="title bor...原创 2020-03-12 09:09:37 · 102 阅读 · 0 评论 -
去哪儿-08-city-search
目标: 页面搜索框1. 准备工作:创建分支city-search,在该分支进行搜索框的开发2. Search.vue组件的创建与导入注意: 直接City.vue中使用<city-search></city-search>组件的时候,会报错,表示在template中必须要有一个外层的div将这些子组件包裹:<template> <div>...原创 2020-03-12 09:09:10 · 156 阅读 · 1 评论 -
去哪儿-07-city-router
目标: 城市选择页面的路由配置1. 准备工作: 创建一个city-router分支,准备城市页面路由的配置2. 城市页面的创建:首先,在src/pages下创建一个city目录,在city目录中创建City.vue作为城市页面的主页。然后,在src/router/index.js文件中开创一个名为City的新页面:routes: [ // 当用户访问根路径的时候, 给用户展示的是Hell...原创 2020-03-12 09:08:11 · 123 阅读 · 0 评论 -
去哪儿-06-home-ajax
目标: 使用Ajax动态获取首页的数据准备阶段:1. 创建分支index-ajax2. vue中发送ajax有很多工具, 比如 浏览器自带的fetch, vue-resource, axios, 我们选用axios3. 安装axios: npm install axios --save4. 如果发现,昨天写的代码并没有合并到主分支上,会发现今天访问的时候,昨天的内容都不见了, 是...原创 2020-03-11 21:19:54 · 148 阅读 · 0 评论 -
去哪儿-05-recommendDev
目标: 实现热销推荐与周末游组件的开发与之前一样:在码云上创建分支,拉到本地,切换到该分支进行相应组件的开发。热门推荐组件的开发准备工作:Recommend.vue组件的创建,基本框架搭建与引入操作。热门推荐字样的布局与样式设置:布局 <div class="title">热销推荐</div>样式 css样式 .title ...原创 2020-03-11 21:19:22 · 96 阅读 · 0 评论 -
去哪儿-04-iconsDev
目标: 首页图标区域的布局与逻辑实现创建index-icons分支码云上创建一个名为index-icons的分支,然后在项目目录下git pull将在线的分支拉到本地,git checkout index-icons 转到当前分支进行开发。准备阶段在components目录下创建Icons.vue组件基本框架: template、script、style设置导出的接口对象expor...原创 2020-03-11 21:18:51 · 99 阅读 · 0 评论 -
去哪儿-03-index-swiper
目标: 开发首页轮播图创建一个分支码云上创建一个名为index-swiper的分支,然后在项目目录下git pull将在线的分支拉到本地,git checkout index-swpier 转到当前分支,首页轮播图的开发将在这个分支进行。轮播插件应用:安装:GitHub —>搜 vue-awesome-swiper —> 采用一个稍微老一点的稳定版本v2.6.7版本 —&...原创 2020-03-11 21:18:19 · 181 阅读 · 0 评论 -
去哪儿-02-HeaderDev
页面组件化在home目录下创建components目录。应用页面组件化的思想,将一个复杂的页面拆分成一部分一部分的内容,对于Home.vue来说,它对应的是整个页面最外层的一个容器组件,它会被拆分成很多很多小的组件,由这些小的组件帮助我们整合成最终的复杂页面。 把拆出来的一个个小的组件都放在components目录下,比如当前要进行的是header区域的开发, 就在components目录下创...原创 2020-03-11 21:17:46 · 103 阅读 · 0 评论 -
去哪儿-01-EnvironmentalPre
项目环境准备Node.jsgit线上管理仓库:码云 — 使用SSH公钥(码云上有教程, 用GitBash执行)Vue命令行工具的安装:npm install --global vue-clivue init webpack 项目名称 — 注意: 根据向导在写项目名称的时候不能含有大写字母cd 项目名称npm install —因为此时只有package.json文件,没有...原创 2020-03-11 21:16:35 · 160 阅读 · 0 评论