# vue_sell

**Repository Path**: http_git.oschina.net/vue_sell

## Basic Information

- **Project Name**: vue_sell
- **Description**: 仿饿了么，使用vue2.x + axios + vue-router 进行操作
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-02
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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 在浏览器中打开即可