Vue2.x 仿饿了么 App

基于 vue-cli 脚手架 + vue 仿饿了么的webapp，路由 vue-router 实现，服务端数据请求选用 axios 实现，页面滚动 better-scroll 实现。

主要技术栈

• Vue.js
• vue-cli 脚手架搭建项目
• vue-router 实现路由切换
• axios 进行数据请求
• webpack 打包项目文件
• ES6 + ESlint
• flex 弹性布局
• SCSS 编写样式
• Vue 过渡动画
• 联动滚动借助了 better-scroll 插件
• localStorage 本地数据存取

实现功能

• Goods、Ratings、Seller 组件视图均可上下滚动
• 商品页 点击左侧menu，右侧list对应跳转到相应位置
• 点击list查看商品详情页，父子组件的通信
• 评论内容可以筛选查看
• 购物车组件，包括添加删除商品及动效，购物控件与购物车组件之间为兄弟组件通信，点击购物车图标，展示已选择的商品列表
• 商家实景图片可以左右滑动
• loaclStorage 缓存商家信息（id、name）

项目结构

api/---- 数据接口 assets/---- 文件夹存放的是通用的css和fonts components/---- 文件夹用来存放 Vue 组件 router/---- 文件夹存放的是vue-router相关配置（linkActiveClass,routes注册组件路由） build/---- 文件是 webpack 的打包编译配置文件 config/---- 文件夹存放的是一些配置项，比如我们服务器访问的端口配置等 dist/---- 该文件夹一开始是不存在，在项目经过 build 之后才会生成 build/prod.server.js---- 该文件是测试是模拟的服务器配置，用来运行dist里面的文件，在config/index.js中,build对象中添加一条端口设置port：9000， App.vue---- 根组件，所有的子组件都将在这里被引用 index.html---- 整个项目的入口文件，将会引用我们的根组件 App.vue main.js---- 入口文件的 js 逻辑，在 webpack 打包之后将被注入到 index.html 中

项目运行

安装依赖 npm install 本地开发，开启服务器，浏览器访问http://localhost:8080 npm run dev 构建生产 npm run build 运行打包文件 node prod.server.js 会看到 Listening at http://localhost:9000 在浏览器中打开即可