Vue2.5 旅游项目实例19 详情页 动态路由及banner布局
摘要:创建分支:detail-banner 拉取到本地并切换分支: git pull git checkout detail-banner 打开home下的Recommend.vue文件: <router-link tag="li" class="item border-bottom" :to="'/de
阅读全文
posted @
2020-03-23 10:36
JoeYoung
阅读(501)
推荐(0) 编辑
Vue2.5 旅游项目实例18 城市选择页-使用keep-alive优化网页性能
摘要:创建分支:city-keepalive 拉取并切换分支: git pull git checkout city-keepalive 启动服务,点击右上角的城市进入城市列表页,点击城市再返回到首页,这一系列操作下来,我们在Network里会发现不停的请求 indes.json 和 city.json
阅读全文
posted @
2020-03-20 17:10
JoeYoung
阅读(267)
推荐(0) 编辑
Vue2.5 旅游项目实例17 城市选择页-使用Vuex实现数据共享
摘要:创建分支:city-vuex 拉取到本地并切换分支: git pull git checkout city-vuex 我们要做的功能是在城市列表页,选择某一个城市后,首页右上角的城市也跟着变化。 安装Vuex: npm install vuex --save 在src目录下,创建store文件夹,新
阅读全文
posted @
2020-03-20 11:22
JoeYoung
阅读(332)
推荐(0) 编辑
Vue2.5 旅游项目实例16 城市选择页-搜索逻辑实现
摘要:创建恩智:city-search-logic 拉取到本地并切换分支: git pull git checkout city-search-logic 打开search.vue文件,先增加一个显示结果区域,并给input增加双向绑定: <template> <div> <div class="sear
阅读全文
posted @
2020-03-19 18:12
JoeYoung
阅读(281)
推荐(0) 编辑
Vue2.5 旅游项目实例15 城市选择页-兄弟组件数据传递
摘要:在城市列表页,我们想实现点击右侧的字母表,左侧城市列表会自动的滚动到对应的字母显示区域之中。 创建分支:city-components 拉取到本地并切换分支: git pull git checkout city-components 打开Alphabet.vue文件,给li添加一个点击事件: <l
阅读全文
posted @
2020-03-19 16:54
JoeYoung
阅读(338)
推荐(0) 编辑
Vue2.5 旅游项目实例14 城市选择页-动态数据渲染
摘要:创建分支:city-ajax 拉取到本地并切换分支: git pull git checkout city-ajax 然后在City.vue文件中发起axios请求: import axios from 'axios' export default { data () { return { hotC
阅读全文
posted @
2020-03-19 10:12
JoeYoung
阅读(431)
推荐(0) 编辑
Vue2.5 旅游项目实例13 城市选择页-Better-scroll插件及字母表布局
摘要:安装Better-scroll插件: npm install better-scroll --save 查看github发现使用better-scroll,需要元素符合以下这种结构: <div class="wrapper"> <ul class="content"> <li>...</li> <l
阅读全文
posted @
2020-03-18 17:31
JoeYoung
阅读(359)
推荐(0) 编辑
Vue2.5 旅游项目实例12 城市选择页-列表布局
摘要:创建分支:city-list 拉取到本地并切换分支: git pull git checkout city-list 新建List.vue文件: <template> <div class="list"> list </div> </template> <script> export default
阅读全文
posted @
2020-03-18 14:28
JoeYoung
阅读(374)
推荐(0) 编辑
Vue2.5 旅游项目实例11 城市选择页-搜索框布局
摘要:创建分支:city-search 拉取到本地并切换分支: git pull git checkout city-search 新建Search.vue文件: <template> <div class="search"> <input class="search-input" type="text"
阅读全文
posted @
2020-03-17 17:09
JoeYoung
阅读(324)
推荐(0) 编辑
Vue2.5 旅游项目实例10 城市选择页-路由配置
摘要:创建分支:city-router 拉取到本地并切换分支: git pull git checkout city-router 然后配置路由index.js: import Vue from 'vue' import Router from 'vue-router' import Home from
阅读全文
posted @
2020-03-17 11:40
JoeYoung
阅读(273)
推荐(0) 编辑
Vue2.5 旅游项目实例9 首页-首页父子组件间的传值
摘要:头部城市部分,在Home.vue页面添加代码: <home-header :city="city"></home-header> <script> export default { data () { return { city: '', swiperList: [], iconList: [],
阅读全文
posted @
2020-03-17 09:36
JoeYoung
阅读(241)
推荐(0) 编辑
Vue2.5 旅游项目实例8 首页-使用axios获取首页数据
摘要:创建分支:index-axios 拉取到本地并切换分支: git pull git checkout index-axios 安装axios: npm install axios --save 在Home.vue文件中添加代码: <script> import HomeHeader from './
阅读全文
posted @
2020-03-16 14:40
JoeYoung
阅读(324)
推荐(0) 编辑
Vue2.5 旅游项目实例7 首页-周末游区域代码
摘要:新建Weekend.vue文件,并添加到Home.vue里 <template> <div> <home-header></home-header> <home-swiper></home-swiper> <home-icons></home-icons> <home-recommend></hom
阅读全文
posted @
2020-03-13 18:45
JoeYoung
阅读(498)
推荐(0) 编辑
Vue2.5 旅游项目实例6 首页-推荐区域组件
摘要:还是在远程创建分支 :index-recommend 拉到本地并切换分支: git pull git checkout index-recommend 在home\components目录下新建Icons.vue文件, 然后在Home.vue文件中引用: <template> <div> <home
阅读全文
posted @
2020-03-13 14:52
JoeYoung
阅读(387)
推荐(0) 编辑
Vue2.5 旅游项目实例5 首页-图标区域的布局代码
摘要:还是在远程创建分支 :index-icons 拉到本地并切换分支: git pull git checkout index-icons 在home\components目录下新建Icons.vue文件, 然后在Home.vue文件中引用: <template> <div> <home-header>
阅读全文
posted @
2020-03-13 10:23
JoeYoung
阅读(377)
推荐(0) 编辑
Vue2.5 旅游项目实例4 首页-轮播图区域
摘要:先在远程创建分支 :index-swiper 然后把新创建的分支拉到本地,并切换分支: git pull git checkout index-swiper 轮播需要用一个第三方插件:vue-awesome-swiper 为了稳定性,我们安装使用v2.6.7的版本: npm install vue-
阅读全文
posted @
2020-03-12 17:27
JoeYoung
阅读(441)
推荐(0) 编辑
Vue2.5 旅游项目实例3 首页-iconfont和代码优化
摘要:到iconfont官网上新建项目文件Travel,然后选择你需要的图标加入购物车,并下载到本地,解压缩后把 iconfont.css 文件拷贝到项目的Travel\src\assets\styles文件夹下,再新建iconfont文件夹,里面包含了(iconfont.eot、iconfont.svg
阅读全文
posted @
2020-03-12 17:25
JoeYoung
阅读(608)
推荐(0) 编辑
Vue2.5 旅游项目实例2 首页-header区域开发
摘要:安装stylus依赖包: npm install stylus --save 安装stylus-loader依赖: npm install stylus-loader --save 都按照完成后,在home文件夹下新建components文件夹,里面新建Header.vue文件 <template>
阅读全文
posted @
2020-03-12 14:03
JoeYoung
阅读(448)
推荐(0) 编辑
Vue2.5 旅游项目实例1 代码初始化
摘要:1、打开index.html文件 修改meta:移动端禁止放大缩小 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalabl
阅读全文
posted @
2020-03-12 11:05
JoeYoung
阅读(272)
推荐(0) 编辑
vue-cli2.x创建项目
摘要:1.安装cli2.x脚手架 npm install --global vue-cli 2.创建项目 vue init webpack 项目名 按照填写就行了 ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint y
阅读全文
posted @
2020-03-09 15:10
JoeYoung
阅读(517)
推荐(0) 编辑