# Travel **Repository Path**: never_enough/Travel ## Basic Information - **Project Name**: Travel - **Description**: vue-travel - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2019-10-12 - **Last Updated**: 2021-11-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: Vue ## README # travel > A Vue.js project ## Build Setup ``` bash # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report ``` For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). ### package.json: 第三方依赖 ### package-lock.json :锁文件 帮我们确定 我们引入的第三方依赖 具体的版本 ### index.html : 默认的项目首页 模板文件 ### .postcssrc.js: ### .gitignore: 有一些文件不想把它上传至 仓库里面 在这里配置 ### editorconfig: 编辑器快捷键配置 ### static :静态资源 ### main.js ：整个项目的入口文件 ### App.vue: 项目最原始 根组件 ### assets: 项目 用到的图片类的资源 ## 修改了配置项 需要重启 ### 7-1 执行命令：npm install stylus --save ### npm install stylus-loader --save ### 7-2 iconfont 配置 ### 7-2 文件路径 配置别名 ### 7-3 VueAwesomeSwiper 轮播图组件的引入 参考网址:https://github.com/surmon-china/vue-awesome-swiper/tree/v2.6.7 ### 7-8 axios 发送ajax请求 npm install axios --save ### 配置.gitignore文件 配置哪些文件不被上传git仓库中 ### axios.get('/static/mock/index.json/') config目录下 index.js 有个proxyTabel: 配置项 配置转发 axios.get('/api/index.json/') ### 8-1 variables.styl 抽出公用样式 统一使用 点击返回 的使用 ### 8-4 github上搜索 better-scroll import Bscroll from 'better-scroll' 参考地址：https://gitee.com/x_Gerly/better-scroll ### this.scroll = new Bscroll(this.$refs.名称) 通过this.$refs 帮助我们获取dom元素 ##注意
此div里面必须包裹住一个完整的div，不能是多个div并列 ### 8-5 页面的动态数据渲染 动态获取右侧 字母列表 ### 8-6 兄弟组件间联动 点击某个字母 城市列表滚动至当前区域 兄弟组件传值(发布订阅模式)：Alphabet组件 点击字母 传给它的兄弟组件List.vue List.vue做出列表的相应滚动、改变 Alphabet组件 传给 City.vue 然后 City.vue再发送给 List.vue 滑动字母 城市列表跟着滑动 ###8-7 滑动字母表 时 左侧对应城市列表 滑动太快 使用截流 限制滑动速度 ### 8-8 搜索框 实现 搜索内容过多时 同样有滑动列表 ### 8-9 城市选择页 选择一个城市 首页切换城市名称 vuex: 把公用的数据放到公共的存储空间去存储 然后一个组件改变了公用的数据，其他组件就能感知到 这样就实现了复杂数据传递 ## main.js 文件里面 创建根Vue实例时 把store传进去了 紧接着 vuex创建的store就会被派发至各个子组件里面 所以 在每个子组件里面都可以使用 this.$store 来获取store的公用数据state ### 优化： 组件不必调用action 然后做一个转发 组件可以直接调用mutation ### 8-9 点击城市列表里面的城市 也做一个城市的切换 ## 编程式导航 页面跳转 通过 this.$router.push('/') 想跳哪里 地址就写成哪里 ### 8-10 localStorage state中city的默认值优先从localStorage中去取 取不到再用自定义的默认值 （使用localStorage 最好使用try catch） ### 8-10 store目录下 Index.js文件内容增多 拆分到其他文件 ### 8-10 mapState的使用 ### 8-10 mapState 在methods应用mapMutations ### 8-10 mapGetters的使用 在vuex中 getters的作用有点类似于 组件中的computed计算属性的作用 当我们需要根据state里面的数据算出一些新的数据时，就可以借助getters这个工具来提供新的数据 从而避免数据的冗余 ### 8-11 使用keep-alive优化网页性能 问题：每一次路由发生切换的时候 组件被重新加载(mounted函数被执行) 因此ajax 请求都会被重新发送 这样每一次数据都会被获取 性能很低 解决：使用keep-alive ### 使用activated生命周期函数：选择另外不同的城市 回到首页 去展示不同的内容 ###9-1 详情页面动态路由 及 banner 布局 ->动态路由 的引入 ### 9-2 公用图片画廊组件拆分 ### 9-2 build目录下 webpack.base.conf.js 里面加一个别名 ### 9-2 Gallary.vue 引入swiper 滑动图片 参考网址：https://www.swiper.com.cn/api/pagination/362.html ### 9-2 swiper observer参考网址： https://www.swiper.com.cn/api/observer/218.html observeParents: true, observer: true 解决滑动图片时出现的bug swiper只要监听到我这个元素或是父级元素发生了dom结构的变化 就会自我刷新一次 从而很容易的解决swiper宽度计算的问题 ### 9-3 detail-header header渐隐渐现效果 ### 9-4 对全局事件的解绑 ### 9-5 使用递归组件实现详情页列表 ### 9-6 Detail.vue发ajax请求 当访问http://localhost:8080/#/detail/0003时, 需要获取的是0003这个id对应的数据,因此每次请求都需要把id带给后端 id是动态路由的一个参数 获取到这个值即可 routerL里面定义了动态路由，它会把id存到/detail/:id 后面那个id变量里面 ### 9-6 总结 组件的name属性 用途： 1.用递归组件时会用到 2.当在页面上想对某个页面取消缓存时会用到 3.浏览器Vue开发者工具 组件名称显示 ### 9-6 滚动行为scrollBehavior解决 向下滑动首页 进入详情 详情页从首页拖动的位置开始显示 ### 9-7 简单动画的引入 插槽的使用 ### 10-1 前后端 联调 及发布上线 config/index.js修改请求地址 ### 10-2 Vue项目的真机测试 解决8080端口无法被外界访问:修改package.json scripts 加上 --host 0.0.0.0 ### @touchstart.prevent:阻止touchstart的默认行为 ###10-2 npm install babel-polyfill --save 安装一些es6的新特性 以支持所有浏览器 解决手机上展示空白的问题 然后在main.js中引入 import 'babel-polyfill' ### 10-3 vue项目打包上线 执行 npm run build vue脚手架工具会自动的对src目录下的代码进行打包编译 生成一个能被浏览器请求的代码(压缩后的代码) 然后将此dist目录里面的内容放到后端服务器上（放到后端项目根目录里） 另外一点：如果希望打包生成的文件在想要放到后端项目的一个project目录里,下面修改config目录下index.js文件 找到build打包配置项 把assetsPublicPath: 那一块儿改为assetsPublicPath： '/project'即可 然后打包 修改dist为project 直接将project放进去即可