Vue.js 项目实战

Vue.js 项目实战

Vue.js 项目实战

手写每一行代码，带你从 0 开始做一个移动端“旅游网站”。

等 14 人订阅共25篇文章创建于2023-03-17

（25）性能优化和项目上线 | Vue.js 项目实战：移动端“旅游网站”开发

1 性能优化项目进行到这里，我们整个项目的代码编写好像完成了。但其实，后续随着项目变得越来越庞大时，还会有一个可优化的“点”。 ❌我们启动服务器，访问项目页面，打开控制台的 Network...

4月前
120
点赞
评论

（25）性能优化和项目上线 | Vue.js 项目实战：移动端“旅游网站”开发

（24）详情页开发——⑥ 基础动画组件 | Vue.js 项目实战：移动端“旅游网站”开发

1 需求当点击详情页的 Banner 后，在 Gallery 出现/隐藏时，有基础的过渡动画效果... 2 基础动画组件......

4月前
50
点赞
评论

（24）详情页开发——⑥ 基础动画组件 | Vue.js 项目实战：移动端“旅游网站”开发

（23）详情页开发——⑤ AJAX 动态获取详情页数据 | Vue.js 项目实战：移动端“旅游网站”开发

1 需求使用 AJAX 动态获取详情页数据，点击不同景点时，获取不同 id 的数据：... 2 AJAX 动态获取数据 🔗前置知识：《详情页开发——① 动态路由和 Banner 组件布局》 ...

5月前
32
点赞
评论

（23）详情页开发——⑤ AJAX 动态获取详情页数据 | Vue.js 项目实战：移动端“旅游网站”开发

（22）详情页开发——④ 详情页“列表”和“用户评论”组件 | Vue.js 项目实战：移动端“旅游网站”开发

1 需求就“详情页”剩余部分的布局和逻辑而言，我不会倾注太多精力。大伙儿可以根据自己的需求，结合前面编写“组件”的经验和 “Vue 基础语法”在项目基础上进行拓展。

5月前
160
点赞
评论

（22）详情页开发——④ 详情页“列表”和“用户评论”组件 | Vue.js 项目实战：移动端“旅游网站”开发

（21）详情页开发——③ Header 组件（实现 Header 渐隐渐现） | Vue.js 项目实战：移动端“旅游网站”开发

1 需求详情页的头部组件，有两个部分组成： * 当进入详情页时，左上角有一个“返回”按钮； * 当向下滚动查看内容时，逐渐出现一个顶部的导航栏，导航栏左边也有一个“返回”按钮。

5月前
67
点赞
评论

（21）详情页开发——③ Header 组件（实现 Header 渐隐渐现） | Vue.js 项目实战：移动端“旅游网站”开发

（20）详情页开发——② 公用图片画廊组件 | Vue.js 项目实战：移动端“旅游网站”开发

1 需求当点击详情页的海报图时，可查看景点介绍的图片： * 左右滑动可查看每张图片； * 图片下方有分页指示器； * 再次点击可见区域时，退出查看图片状态，返回到详情页。

5月前
150
点赞
评论

（20）详情页开发——② 公用图片画廊组件 | Vue.js 项目实战：移动端“旅游网站”开发

（19）详情页开发——① 动态路由和 Banner 组件布局 | Vue.js 项目实战：移动端“旅游网站”开发

1 需求 ❓需求 1：在首页点击“景点”（如故宫），可跳转至“景点详情页”。不同景点，跳转至不同景点的详情页（即，不同路由）......

9月前
228
点赞
评论

（19）详情页开发——① 动态路由和 Banner 组件布局 | Vue.js 项目实战：移动端“旅游网站”开发

（18）城市选择页开发——⑧ 使用 keep-alive 优化网页性能 | Vue.js 项目实战：移动端“旅游网站”开发

1 问题分析我们的项目开发到这里，“首页”和“城市选择页”好像都已经完成了，整个开发过程中也进行过多次代码的优化、性能的优化，看起来并没有什么问题......

9月前
149
点赞
评论

（18）城市选择页开发——⑧ 使用 keep-alive 优化网页性能 | Vue.js 项目实战：移动端“旅游网站”开发

（17）城市选择页开发——⑦ localStorage 的使用及 Vuex 的高级使用 | Vue.js 项目实战：移动端“旅游网站”开发

1 需求在切换了城市后，当刷新页面时，首页的城市保持为最后一次选择的城市... 2 localStorage 的使用 🔗前置知识......

9月前
222
1
评论

（17）城市选择页开发——⑦ localStorage 的使用及 Vuex 的高级使用 | Vue.js 项目实战：移动端“旅游网站”开发

（16）城市选择页开发——⑥ Vuex 实现组件数据共享 | Vue.js 项目实战：移动端“旅游网站”开发

1 需求在城市选择页点击任意城市名后，首页头部的城市名跟着发生改变；当选择了城市后，跳转回首页......

9月前
180
2
评论

（16）城市选择页开发——⑥ Vuex 实现组件数据共享 | Vue.js 项目实战：移动端“旅游网站”开发

（15）城市选择页开发——⑤ “搜索框”逻辑实现 | Vue.js 项目实战：移动端“旅游网站”开发

1 需求在城市选择页的搜索框中，无论输入的是“拼音”还是“文字”，搜索框下方都会显示筛选出的包含对应“关键字”的城市。当没有对应城市时，则显示“没有找到匹配数据”......

9月前
227
1
评论

（15）城市选择页开发——⑤ “搜索框”逻辑实现 | Vue.js 项目实战：移动端“旅游网站”开发

（14）城市选择页开发——④ “列表”与“字母表”联动 | Vue.js 项目实战：移动端“旅游网站”开发

1 需求实现“列表”与“字母表”之间的联动：点击“字母表”的任意字母，“列表”会自动显示对应字母区域的内容；在“字母表”区域滑动时，“列表”自动显示停止滑动时所对应字母区域的......

9月前
236
1
评论

（14）城市选择页开发——④ “列表”与“字母表”联动 | Vue.js 项目实战：移动端“旅游网站”开发

（13）城市选择页开发——③ AJAX 获取城市选择页数据 | Vue.js 项目实战：移动端“旅游网站”开发

1 需求使用 Axios 发送 AJAX 请求，完成页面数据的动态渲染... 2 mock 数据 ⚠️城市列表选择页所需的本地模拟数据文件 `city.json` ，由于内容过多，这边......

1年前
71
2
评论

（13）城市选择页开发——③ AJAX 获取城市选择页数据 | Vue.js 项目实战：移动端“旅游网站”开发

（12）城市选择页开发——② “搜索框”、“列表”和“字母表”布局 | Vue.js 项目实战：移动端“旅游网站”开发

1 需求本篇，我们要完成城市选择页剩余部分页面的布局，包括搜索输入框、城市选择（包含“当前城市”、“热门城市”和根据城市名称拼音首字母而进行排列的城市名）和右侧的字母表三部分......

1年前
245
3
评论

（12）城市选择页开发——② “搜索框”、“列表”和“字母表”布局 | Vue.js 项目实战：移动端“旅游网站”开发

（11）城市选择页开发——① Header 组件 | Vue.js 项目实战：移动端“旅游网站”开发

1 需求点击首页的城市区域“北京”，跳转至“城市选择页”。点击城市选择页的“返回”图标，可回到首页......

1年前
209
1
评论

（11）城市选择页开发——① Header 组件 | Vue.js 项目实战：移动端“旅游网站”开发

（10）首页开发——⑤ AJAX 获取首页数据 | Vue.js 项目实战：移动端“旅游网站”开发

1 mock 数据 🔗前置知识：《JavaScript 基础——JS 提供的对象：⑤ JSON》《Vue 实战准备——② 项目框架源码解析》......

1年前
62
1
评论

（10）首页开发——⑤ AJAX 获取首页数据 | Vue.js 项目实战：移动端“旅游网站”开发

（09）首页开发——④ “热销推荐”和“周末去哪儿”组件 | Vue.js 项目实战：移动端“旅游网站”开发

1 需求首页剩余两个简单的小组件：“热销推荐”组件和“周末去哪儿”组件，完成组件的布局和样式，然后渲染数据即可......

1年前
103
1
评论

（09）首页开发——④ “热销推荐”和“周末去哪儿”组件 | Vue.js 项目实战：移动端“旅游网站”开发

（08）首页开发——③ 图标区域组件 | Vue.js 项目实战：移动端“旅游网站”开发

1 需求首页的“图标分类区域”一页展示 8 个图标，超过 8 个切换至第二页展示。 2 图标区域布局 1️⃣在 home 下的 components 文件夹中，新建“图标区域组件......

1年前
155
2
评论

（08）首页开发——③ 图标区域组件 | Vue.js 项目实战：移动端“旅游网站”开发

（07）首页开发——② 轮播组件 | Vue.js 项目实战：移动端“旅游网站”开发

1 需求轮播显示海报，有分页指示器（白色圆点），可自动切换，可手动切换，可无限循环。 2 vue-awesome-swiper 构建轮播在实际业务中，为了更高效的完成开发，通常会直接利......

1年前
176
2
评论

（07）首页开发——② 轮播组件 | Vue.js 项目实战：移动端“旅游网站”开发

（06）首页开发——① Header 组件 | Vue.js 项目实战：移动端“旅游网站”开发

1 首页 Header 组件的“结构”与“样式” 🔗前置知识：《CSS——CSS 值和单位》在我们的项目中，将利用 Stylus......

1年前
2.6k
12
1

（06）首页开发——① Header 组件 | Vue.js 项目实战：移动端“旅游网站”开发