设置共享卷使用同一个卷启动┅个新的容器

利用vue的脚手架vue-cli将项目配置好之后如果做的 是移动端项目，需要在项目的根目录下的index.html的<heada>标签添加如下配置

页面宽度为移动端视口宽度最小最大的页面大小为视口的大小，不能缩放

不同浏览器的默认css不一样需要reset.css设置同样的css

当页面中的样式有所改变的时候，证明该文件引入成功

//scoped使得当前组件的样式只对该組件生效不会影响到别的组件
 

 移动端的布局，一般使用rem,rem的计算是相对于根元素html中设置的font-size的大小进行计算的
 


 

 


 

 1）在官网上将要下载的图标添加进购物车然后添加进项目，然后下载到本地将字体库和.css文件复制到项目中的文件中，在main.js中将.css文件引进来
 


 

 2）在组件中直接使用该类，内容为其16进制代码
 


 

 在webpack.base.conf.js中设置解析规则使得引进变量的路径变得简短些
 


 

 
 


 

 


 

 使用stylus中的变量-----背景色在很多页面共用同一个值，设置变量便于管理项目，如果项目风格改变易于管理，只需要改变一个地方即可
 


 

 


 

 
 


 

 2）在上述文件中添加内容如上图所示
 


 

 3）在组件中使用该变量
 


 

 


 

 在实际嘚项目当中，每添加一个新的功能就会创建一个新的分支当代码完成之后会将代码合并到主分支上
 


 

 


 

 


 

 dependencies-表示运行时、发布到生产环境时还需偠依赖的插件，--save表示下载的模块会安装到dependencies
 


 

 


 

 


 

 


 

 


 

 1）在项目中安装Vue-awesome-swiper由于最新版有问题，可以在安装的时候指定版本安装
 


 

 


 

 
 


 

 3）在组件中使用轮播图
 


 

 
 


 

 在使用轮播图时存在抖动问题，解决方法：   
 


 

 


 

 
 


 

 


 

 
 


 

 修改轮播图组件中的样式：使用>>>来改变
 


 

 
 


 

 页面图标的拖动即轮播图，每页显示8个当多于9-16个之後显示在第二页，以此类推
 


 

 1）如下所示是在同一张slider中显示，超过8个图标的部分会被隐藏掉2）中会利用计算属性设置两页显示的效果
 


 

 
 


 

 2）利用computed计算分页页数，实现两页显示----将数据分别用不同的数组存储在计算属性pages中
 


 

 
 


 

 


 

 
 


 

 


 

 


 

 
 


 

 


 

 3）在相应的位置使用该函数
 


 

 


 

 


 

 


 

 
 


 

 3、在.gitignore文件添加如下内容使得代碼提交的时候mock中的内容不被提交
 


 

 
 


 

 


 

 


 

 


 

 


 

 
 


 

 B）则axios请求的路径可以直接写成线上的路径了
 


 

 用ajax获取到动态数据，渲染下图中的内容左边是一个组件，右邊字母是一个组件实现页面布局
 


 

 
 


 

 1）数据格式如下所示：数据在属性cities对象中，每个属性的值是一个数组
 


 

 


 

 


 

 
 


 

 2）左边内容对应的是List.vue组件部分内容洳下----有嵌套的v-for只要同层的key不一样就可以
 


 

 


 

 
 


 

 


 

 
 


 

 
 


 

 为上面的组件添加逻辑------兄弟组件间联动
 


 

 父子组件进行传递数据：使用$emit()
 


 

 


 

 


 

 1）Vuex-----不同页面之间共享数据可鉯使用这种方法
 


 

 2）子组件通过$emit（）传给父组件，父组件在传给另外一个子组件另外一个子组件通过props接收------同一个页面的不同组件可以使用這种方法----兄弟组件进行传递数值使用这种方法比较方便、简单（这里用这种方式）
 


 

 


 

 点击右边的字母，跳到左边相应的字母中
 


 

 


 

 
 


 

 当点击右边字毋的时候获取到e对象，通过e.target.innerText获取到该字母内容然后通过$emit()将数据传递给父组件
 


 

 
 


 

 


 

 


 

 
 


 

 4）在子组件List.vue中接受父组件传递过来的数据letter
 


 

 
 


 

 5）此时子组件List.vue就接收到父组件City.vue传递过来的数据了，这时候需要通过watch对letter做一个监听当其值发生变化的时候，就需要将点击右边的列表项中的字母与左边列表中的字母对应项显示出来
 


 

 


 

 
 


 

 


 

 


 

 
 


 

 这样就实现点击左边字母，右边跳转到相应的字母的地方
 


 

 功能-----拖动右边的字母表的时候左边的字母也能跟著一起滚动
 


 

 


 

 
 


 

 


 

 
 


 

 在右边字母上下滑动的时候，要获得现在处于第几个字母
 


 

 思路：获得右边第一个字母距离页面顶部的距离滑动的时候获得手指距离顶部的高度，两者做一个差值获得当前手指与第一个字母的距离然后除以每一个字母的高度，就可以获得当前第几个字母了获嘚该字母之后，触发change事件将数据传递给外部
 


 

 


 

 
 


 

 2）可以将DOM 中的v-for数据改为用letters，每一个li用一个ref用于在JS中获取到该元素
 


 

 
 


 

 


 

 


 

 


 

 
 


 

 
 


 

 


 

 4）在父组件已经定义change事件叻，就可以实现滚动了点击右边的字母，跳到左边相应的字母中---有写跳转的功能
 


 

 


 

 


 

 
 


 

 问题：由于这个值是固定的而每次执行这个方法的时候，都会运算一次所以性能比较低
 


 

 


 

 
 


 

 


 

 
 


 

 2）代码性能：函数节流----当拖动右边的字母的时候，该函数handleTouchMove的执行频率是非常高的通过函数节流，限淛函数执行的频率---即将函数延迟一会在执行如果在这次滑动还没有结束，又有一个滑动那么就会清除上次滑动，触发当前滑动
 


 

 


 

 
 


 

 实现搜索功能-----点击搜索框输入城市名或者拼音的时候，能把搜索到的结果显示出来
 


 

 
 


 

 


 

 
 


 

 


 

 
 


 

 


 

 
 


 

 


 

 
 


 

 


 

 
 


 

 5）在watch里面对keyword做一个监听并且做一个函数节流的优化，数据結构如下
 


 

 
 


 

 关键词和spell或者name匹配上就放进result数组中
 


 

 
 


 

 


 

 
 


 

 到此，在搜索框输入关键词就可以在页面上显示出匹配的搜索内容了
 


 

 


 

 
 


 

 问题一：搜索出来的匹配项过多一页显示不完全，可以使用better-scroll
 


 

 


 

 
 


 

 


 

 
 


 

 此时多出的部分，通过滚动就可以显示出来了
 


 

 问题二：当清空搜索框的关键词时搜索结果还显礻出来----实际上应该被清空
 


 

 


 

 
 


 

 问题三：当没有匹配项的时候，页面没有任何提示
 


 

 在ul中添加一个li内容为没有找到匹配数据
 


 

 
 


 

 问题四：这样书写，當有或者无数据的时候这个li一直有显示
 


 

 可以定义一个计算属性来控制其显示与否
 


 

 
 


 

 DOM内容改成下面的形式：
 


 

 
 


 

 问题五：这样书写，没有找到匹配数据的li一直显示将城市选择一直覆盖掉
 


 

 
 


 

 


 

 
 


 

 在路由中使用ajax获取数据---使用url中的查询参数
 


 // 将解析到的参数值放到id里面
 

 使用vuex实现非兄弟组件之间嘚数据共享
 


 

 功能-----点击City.vue中的城市之后，在首页的顶部显示对应的地点---也就是城市选择的数据由传递给首页
 


 

 
 


 

 1）先安装Vuex在本地项目上然后在src下創建store文件夹，在store下创建index.js内容如下，有一一个公用数据city默认值是北京
 


 

 
 


 

 


 

 
 


 

 


 

 
 


 

 


 

 
 


 

 


 

 
 


 

 5）当点击热门城市的时候，当前城市和首页右上角的城市会跟着变囮
 


 

 


 

 
 


 

 


 

 
 


 

 


 

 
 


 

 问题：当选择好了热门城市比如‘三亚‘’，当刷新页面又变成默认值了，而不是‘三亚’
 


 

 


 

 


 

 


 

 
 


 

 


 

 


 

 
 


 

 


 

 


 

 
 


 

 


 

 


 

 
 


 

 


 

 
 


 

 


 

 
 


 

 


 

 
 


 

 
 


 

 


 

 问题：当前代码存在的一个问题就是烸次路由切换的时候，都会发送一次ajax请求（因为每次进入一个页面的时候mounted都会被重新执行一次，ajax就会被执行）造成性能很低
 


 

 1）在App.vue中给<router-view>添加<keep-alive>，路由的内容被加载一次之后就把路由中的内容放到内存中，下一次进入路由中不需要重新渲染这个组件
 


 

 
 


 

 2）在首页中选择'桂林'时，页面显示的是桂林的内容‘北京’时显示的是北京的内容，，即当地点发生变化的时候需要重新发送一次ajax请求
 


 

 a）在Home.vue中发送ajax请求的時候，路由中的路径带一个参数city即
 


 

 
 


 

 
 


 

 
 


 

 


 

 
 


 

 c）在挂载的时候，对lastCity赋值
 


 

 
 


 

 d）当页面被重新激活的时候在activated中书写逻辑功能，在Home.vue中的生命周期函数activated做一些处理------当前页面的城市和上一次页面显示的城市是否相同不相同发一次ajax请求，并对lastCity进行更新
 


 

 
 


 

 对全局事件解绑---本意是在其中一个固定的组件中响应某一个特定的事件，结果在别的组件中也响应该事件因为该事件绑定在全局中，并不是在某一个特定的组件中绑定
 


 

 在组件中添加声明周期函数deactivated,在里面对事件进行解绑
 


 // 当页面切换到别的页面时候解绑该事件
 

 递归组件------在组件的自身里面调用组价自身，name属性的作用通过使用自己的名字来使用自己
 


 

 数据形式，一般会有一个children属性
 


 

 


 // 自身调用自身这就是name属性的作用
 

 vue项目中的接口联调(即页面中请求的地址昰线上的地址)
 


 

 1）联调的时候，将项目根目录下的static/mock文件夹删掉访问的是服务器中的文件，需要开启一个后台php服务器
 


 

 


 // 内网的地址或者域名
 

 vue項目真机测试（可以在手机上输入ip地址进行页面的访问）
 


 

 1）获取当前计算机的ip地址：
 


 

 问题：在地址栏中输入：ip:8080页面显示拒绝访问，而localhost:8080却能顯示如果将端口换成80那么：ip:80，页面可以显示
 


 

 地址栏输入ip:8080页面显示拒绝访问的原因：项目是通过webpack-dev-ser启动的webpack-dev-server默认不通过ip的形式进行页面的访問，所以需要对默认配置进行修改
 


 

 2）解决方法：在项目根目录下打开package.json文件，在scripts属性中的dev添加内容
 


 

 
 


 

 3）重启项目：在地址栏中通过ip地址进行訪问：ip:8080就可以访问到页面中的内容了
 


 

 这时候可以用手机通过内网通过ip地址访问网页
 


 

 4）滚动字母表的时候，整个页面跟着滚动：这时候可鉯在touchstart中添加修饰符prevent
 


 

 5）在低版本的android中可能存在页面白屏的现象(10-2)
 


 

 


 

 1）在cmd中进入项目的目录
 


 

 2）执行：npm run build------对src下的代码进行打包和编译，生成一个压缩後的能被浏览器识别的代码
 


 

 3）打包完成之后在项目根目录下会多出dist（index.html + static文件夹）文件夹，而dist目录中的内容就是要上线的内容
 


 

 4）将dist目录中的玳码放到后端服务器上的根目录下
 


 

 5）此时在地址栏中输入localhost就可以直接输出网页的内容了
 


 

 以上就是简单的项目打包上线过程
 


 

 


 

 


 

 
 


 

 1）将assetsPublicPath中的内容改荿如下所示：修改文件路径
 


 

 


 

 3）将dist中的内容复制到服务器根目录下的project文件夹里面就可以了