# vue-webpack

**Repository Path**: loboSpring/vue-webpack

## Basic Information

- **Project Name**: vue-webpack
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-06-26
- **Last Updated**: 2020-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#这是一个 Vue框架 结合 webpack 的移动端项目

#开源协议之间的区别：https://www.zhihu.com/question/19568896

#first day的工作：

   一.完成整体的布局：

			01.实现顶部的header 使用Mint-UI库的组件

			02.实现底部的tabbar 使用MUI框架 还要引入扩展到字体图标样式文件

			03.建立底部的tabbar和页面组件的切换   使用路由的<router-link> ==>> <router-view>

   二.实现首页组件：

   			01.实现轮播图 使用Mint-UI库的swipe组件  （一定要定义高度）

   				    图片资源 来自于vue-resource实现的 ajax

   		    02.实现6宫格部分 使用MUI框架 grid-default组件 

   三.实现页面组件的切换动画：

   			01.对页面组件的显示标签<router-view>使用 <transition>标签

   			02.终于顿悟了 <transition>标签 4个类名的含义 ==>> 它代表动画过程的4个点

   				.v-enter     代表 A点  可以写个状态
   				.v-enter-to  代表 B点  可以写个状态
   				.v-leave     代表 C点  可以写个状态
   				.v-leave-to  代表 D点  可以写个状态

   				*可以写4个状态的  一般只写1个状态 AD点共用一个状态  BC点不写使用默认位置状态


   				.v-enter-active  代表 A点到B点的过程 可以写个过渡
   				.v-leave-active  代表 C点到D点的过程 可以写个过渡

   				*其实<transition>标签动画的整个流程是 A=>B=>C=>D

#second day的工作：

   一.实现首页中美食店铺的路由：===>指向 美食店铺列表组件------------------------------首页中美食店铺实现的开始！！

            01.美食店铺列表的.vue文件的编写，使用ajax获取店铺数据 渲染到<template>

            02.在路由文件中 配置美食店铺列表的路由 

   二.实现美食店铺列表组件中的路由：===>指向 具体的店铺
   
            01.店铺信息的组件.vue文件编写  使用ajax获取具体的店铺信息（依靠路由传递的店铺ID） 

            02.在路由文件中 配置具体店铺的路由

            03.店铺的评论使用的是 component标签 写在.vue文件中  

            04.component标签引入的是.vue文件  使用属性绑定传递参数

      *要点：
            01.动态属性真的很好用 尤其用来更新页面的时候 自动更新

            02.数组的map方法 真的不靠谱 不匹配的元素填入的是undefined使用的时候会带来问题

            03.在.vue文件的<template>标签中 可以用 组件标签的引入其他的.vue文件 ！！！


#third day的工作： 

   一.发表评论的实现：
            01.把文本框做成双向数据绑定

            02.为发表按钮绑定一个事件

            03.校验评论内容是否为空，如果为空，则Toast提示用户 

            04.通过vue-resource ajax的post将新评论 添加到数据库 ---没有服务器端代码支持 故不做

            05.使用unshift将新评论添加到 页面渲染的数组前端

   二.实现主页图片分享的路由：==>>指向  图片列表组件-----------------------------------首页中图片分享实现的开始！！

            01.图片列表组件中 添加导航条组件  （来自于MUI框架中的 tab-top-webview-main 例子）

            02.导航条组件的修改完善：

                  1--*要去掉根标签的 mui-fullscreen类  

                  2--*同时去掉.mui-scroll-wrapper类后面的  >> data-scroll="1" << 属性 不然滚不动！！！

                  3--*实现导航条的组件的滚动 需要引入MUI库的js 同时在script中启动它：

                        启动代码：
                        mui('.mui-scroll-wrapper').scroll({
                            //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
                            deceleration: 0.0005
                        });

                  *使用mui.js文件时出现了冲突 并且报错：
                     Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode
                  *出错原因是：我们的项目是严格模式 导致mui.js不能访问某些依赖 出现了错误！！

                  *解决办法：移除项目的严格模式！！

                     使用babel-plugin-transform-remove-strict-mode插件

                        下载：cnpm i babel-plugin-transform-remove-strict-mode -D

                        配置：.babelrc文件中{"plugins":["transform-remove-strict-mode"]}

                  4--* MUI的   导航条组件 与 tabbar组件 类名冲突的问题：

                     * 解决办法 ： 更换tabber组件冲突的类名  复制相同的样式

            03.图片列表组件中 添加lazy load组件（Mint-UI库 中的组件） 

                     
   三.实现图片列表组件中的路由：==>跳到 图片详情组件

            01.图片详情组件 和 新闻详情组件一模一样 （因为他们数据布局都一样）

            02.图片详情组件中的 评论子组件标签 使用已有的 component.vue


   四.实现首页商品购买的路由 ==>跳到 商品列表组件-------------------------------------首页中商品购买实现的开始！！

            01.商品列表组件： 使用flex布局 轻松实现  （对文字换行样式：word-wrap：normal/break-word 有更深的领悟）


   *五.尝试在手机上进行 项目预览和测试

            01.手机和电脑要处于同一个 WIFI环境中

            02.在项目的package.json文件中 修改scripts属性中的 dev的值 增加一个 --host 电脑当前的无线ip地址

                        简而言之 就是将项目的服务器域名 修改为 电脑的无线ip地址

            03.npm run dev 启动项目   手机使用项目地址访问项目

   六.<router-link>标签玩腻了 使用vue-router提供的js  去修改路由连接地址

            01.router.push("/home/goodsinfo/"+id)
            // this.$router.push({path:"/home/goodsinfo/"+id});
            // this.$router.push({name:"goodsinfo",params:{id}});
            // this.$router.push({path:"/home/goodsinfo/",query:{id:id}});

            02.这个方法封装了 ==>> BOM中的location对象去操作url

   七.实现商品列表组件路由 ==>跳到 商品信息组件

            01.使用MUI的card组件 实现商品信息组件的布局  overflow触发BFC 使内部盒子的margin影响消失

            02.使用商品信息组件的components属性  添加了多个子组件 comment.vue swiper.vue  goodsinfo_numbox.vue


   八.实现商品信息组件路由 ==>跳到 图文介绍组件
   
            01.对商品/店铺的 进一步介绍  获取shop渲染之 


   *九.小球动画 实现购物车：

            01.以前小球动画的缺陷： 终点坐标 相对于 起点坐标 ==>> 是固定的

            02.对于动态的页面 需要动态计算元素的相对位置：

                  核心方法是：dcomObject.getBoundingClientRect() 

                     返回一个对象： 包含left top right bottom  四个属性

                         四个属性分别表示： DOM元素左边距离页面左边的距离   left
                                            DOM元素上边距离页面上边的距离   top
                                            DOM元素右边距离页面右边的距离   right
                                            DOM元素下边距离页面下边的距离   bottom

   十.购物车数据增加的实现：

            01.只卖1件商品的情况： 直接使用默认商品数 将购物车货物+1

            02.购买其他数量商品的情况： 子组件的显示数量的标签一定被修改了  监听它的change事件 

                                            利用change事件 去更新父组件的默认商品数  


   十.使用vuex中的store实例 存放购物数据：

            01.购物车数据增加时 会将购物数据添加到 store实例中 让所有组件共享

            02.store实例中数据的更新 会同步到localStorage中去

            03.store实例中的 2类属性中的方法：

                  *mutations属性中的方法：有2个参数 没有返回值  （第一参是state  第二参是自定义）

                  *getters属性中的方法：有2个参数 有返回值     （第一参是state 第二参是getters属性中的其它方法）


   十一.如何实现页面返回：

            01.在固定的顶部栏中 添加一个返回组件（Mint-UI提供）

            02.实现该组件的点击返回功能：  this.$router.go(-1)

            03.实现该组件的首页不显示：   watch：{ "$router.paht": function(newValue){}}  监听路由实现控制

            04.实现刷新页面03仍然有效： 在created(){}函数中 添加03的代码处理


   十二.如何使用网络地址访问这个项目：

            01.开启本地的apache服务器，将项目放到根目录，这样就可以本地访问了 127.0.0.1本地回环地址

            02.要网络访问 借助ngrok软件 将你的电脑 映射为外网的服务器 SO，使用它给你的网址就可以网络访问了

            **首先建立项目的本地服务器访问 ， 然后将你的电脑作为外网服务器