基于vue2.5.2的APP商家页面项目总结

作者: Shaw_Chen | 来源:发表于2018-02-26 14:35 被阅读0次

最近学了一点vue.js，并且根据教程做了一个类似饿了么的APP商家页面。vue.js作为现在很火的一个前端框架，确实有它的很多优点，废话不多说，来总结总结。

一、用到的技术栈：

vue2.5.2+ vue-router2+ vue-cli2+ vue-resource + stylus + flex布局 + es6+ eslint + webpack2

二、实现的功能

Goods、Ratings、Seller组件视图均可上下滚动

商品页点击左侧menu，右侧list对应跳转到相应位置

点击list查看商品详情页，父子组件的通信

评论内容够可以筛选查看

购物车组件，包括添加删除商品及动效，购物控件与购物车组件之间非父子组件通信，点击购物车图标，展示选择的商品列表

商家实景图片可以左右滑动

loaclStorage缓存商家信息（id、name）

三、项目结构

common/---- 文件夹存放的是通用的css和fonts

components/----文件夹用来存放我们的 Vue 组件

router/----文件夹存放的是vue-router相关配置（linkActiveClass,routes注册组件路由）

build/----文件是 webpack 的打包编译配置文件

config/----文件夹存放的是一些配置项，比如我们服务器访问的端口配置等

dist/----该文件夹一开始是不存在，在我们的项目经过 build 之后才会产出

prod.server.js----该文件是测试是模拟的服务器配置，用来运行dist里面的文件，在config/index.js中,build对象中添加一条端口设置port：9000，

App.vue----根组件，所有的子组件都将在这里被引用，eventHub空实例是用来组件间通信的中央数据总线作用，主要连接购买控件和购物车组件之间的数据通信

index.html----整个项目的入口文件，将会引用我们的根组件 App.vue

main.js----入口文件的 js 逻辑，在 webpack 打包之后将被注入到 index.html 中

四、开发中遇到的问题：

1.Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

（1）全局安装 vue-cli：npm install --global vue-cli

（2）创建一个基于 webpack 模板的新项目：vue init webpack my-project

（3）安装依赖，走你

$ cd my-project

$ npm install

$ npm run dev

注意：如果npm安装失败，直接用命令清理就行，控制台输入：

npm cache clean --force，然后重新安装。

2.如果出现

Error: Cannot find module 'stylus'

说明找不到对应的模块，需要单独安装该模块，cmd命令为

运行 npm install （模块名） --save-dev即可解决

3.vue-loader中的postcss插件能够帮助我们处理css浏览器兼容问题，我们自己不需要自己去手写

Postcss是根据can i use 官网的标准编写的代码

4.如果出现

http://eslint.org/docs/rules/no-unused-vars 'app' is assigned a value but never used

说明diff 这个变量声明且赋值然而在后面没有使用

解决方法：在这段代码上面写 /* eslint-disable no-unused-vars */

5.如果出现

安装vue-resource是用来处理一些前后端交互数据的一个插件。

npm install vue-resource --save

访问https://github.com/pagekit/vue-resource查看其api文档

6.在vue里面不能直接使用src引用图像地址，应该使用:src，

直接使用src在编译的时候会被解析报错

7.在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。一种兼容性比较好的解决方案：

外部有两层：内容包装器wrapper(里面有一层是真正用来扩展内容)+容器底部close

具体的结构

8.

<li class="support-item" v-for="item in seller.support"></li>

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

9.利用vue进行css过渡效果

结构

10.当vue编译运行正常而页面不能正常显示时，这时要多关注一下浏览器的输出console，有可能是js问题，如变量没有定义

11.vue2.0索引不能用$index

循环 v-for="(item, index) in items"

使用 :class="{'current':currentIndex === index}"

v-el 和 v-ref 都弃用，改为使用ref属性为元素或组件添加标记，通过$refs获取

12.在显示配送费和起送费时，第一步：需要在app.vue中引进seller中的数据，第二步：然后在goods.vue组件中引入这两个属性第三步：在shopcart中使用props接收，最后进行引用

13.购物车组件状态随着selectFoods的属性而改变，selectFoods是通过父组件传过来的，所有的状态都通过selectFoods计算而来，所以绑定了totalPrice()、totalCount()、payDesc()、payClass()等计算属性。也就是说我们通过改变selectFoods就可以改变状态。

这正是vue的好处之一，如果是非MVVM框架如jQuery等去写的话，我们要通过大量的if判断语句操作DOM。

14.padding-top:100% 保证上下padding保持一致

15.formatDate.js是一个自定义的js组件,不是vue组件,目录位于:src/common/js,这种写法是为了练习js的模块化编程

将单独的一个函数写成一个模块

通过export导出函数

通过import导入函数

16.BScroll结构一定是外层有一个容器，内层是一个wrapper，有一个固定的适口高度，当内层容器的高度超过适口高度的话就可以滚动

结构

17.切记：当传入一个props一定要通过 : ,这是一个规整化指令的缩写

18.这里解释一下border-1px

border-1px

19.左侧宽度固定，右侧宽度自适应

20.背景模糊效果

filter：blur(10px),注意，所有在内的子元素也会模糊，包括文字，所以采用定位布局，背景单独占用一个层，ios有一个设置backdrop-filter:blur(10px)，只会模糊背景,但不支持android

21.seller组件：

（1）seller页面中商品商家实景图片横向滚动

解决方案：每个li要display：inline-block，因为width不会自动撑开父级ul，所以需要计算ul的width，（每一张图片的width+margin）*图片数量-一个margin，因为最后一张图片没有margin

同时new BScroll里面要设置scrollX: true,eventPassthrough: 'vertical',// 滚动方向横向

（2）打开seller页面，无法滚动

问题分析：出现这种现象是因为better-scroll插件是严格基于DOM的，数据是采用异步传输的，页面刚打开，DOM并没有被渲染，所以，要确保DOM渲染了，才能使用better-scroll，

解决方案：用到mounted钩子函数，同时搭配this.$nextTick()

（3）在seller页面，刷新后，无法滚动

问题分析：出现这种情况是因为mounted函数在整个生命周期中只会只行一次

解决方案：使用watch方法监控数据变化，并执行滚动函数 this._initScroll();this._initPicScroll();

22.eslint 是一个js代码风格检查器，配合vue-cli脚手架中的热更新，可以很方便的定位和提示错误。在公司多人协作开发时可以确保代码风格保持一致，可以很方便的阅读他人的代码。

刚使用时，会不太习惯，但是坚持下来，自己写的代码越来越整齐规范，越来越漂亮，自己会有很大的满足感。对自己，对他人都是一件非常有益的事！

23.最后，进行项目打包

（1）运行npm run build进行打包,生成dist文件

（2）在项目根目录新建一个prod.server.js文件，新建一个httpServer

（3）在config->index.js文件bulid添加一个监听端口：port:9000

将productionSourceMap修改为false

（4）最后运行node prod.server.js

注意：每次修改config->index.js文件bulid都要重新运行npm run build

24.手机测试机巧

将localhost换成自己的ip，Windows在命令行执行ipconfig查看，mac执行ifconfig查看。

然后复制地址栏地址，进入草料二维码，然后生成二维码，然后用手机扫一扫就可以查看了，前提是，你手机和电脑必须在同一个局域网。

25.参考资料：

Vue.js官网

Vue.cli(https://github.com/vuejs/vue-cli)

Vue-resource(https://github.com/vuejs/vue-resource)

Vue-router(https://github.com/vuejs/vue-router)

better-scroll(https://github.com/ustbhuangyi/better-scroll)

Webpack官网(http://webpack.github.io/)

Stylus中文文档(http://www.zhangxinxu.com/jq/stylus/)

cs6入门学习(http://es6.ruanyifeng.com/)