54 | ├── build // 构建服务和webpack配置 55 | ├── config // 项目不同环境的配置 56 | ├── dist // 项目build目录 57 | ├── index.html // 项目入口文件 58 | ├── package.json // 项目配置文件 59 | ├── src // 生产目录 60 | │ ├── assets // 图片资源 61 | │ ├── common // 公共的css js 资源 62 | │ ├── components // 各种组件 63 | │ ├── App.vue // 主页面 64 | │ └── main.js // Webpack 预编译入口 65 |66 | 67 | ###实现的功能 68 | *** 69 | * 商品滚动 ，商品滚轮滚动 70 | * 商品联动 71 | * 加入购物车，移除购物车 72 | * 显示评论 评论筛选 73 | * 图片左右滑动 74 | * 商品详情 父子组件的通信 75 | * 等 76 | 77 | 78 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eleme", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "yangyi <639293382@qq.com>", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js", 10 | "lint": "eslint --ext .js,.vue src" 11 | }, 12 | "dependencies": { 13 | "better-scroll": "^0.1.8", 14 | "stylus": "^0.54.5", 15 | "vue": "^2.1.0", 16 | "vue-resource": "^1.0.3", 17 | "vue-router": "^2.1.1" 18 | }, 19 | "devDependencies": { 20 | "stylus-loader": "^2.4.0", 21 | "autoprefixer": "^6.4.0", 22 | "babel-core": "^6.0.0", 23 | "babel-eslint": "^7.0.0", 24 | "babel-loader": "^6.0.0", 25 | "babel-plugin-transform-runtime": "^6.0.0", 26 | "babel-preset-es2015": "^6.0.0", 27 | "babel-preset-stage-2": "^6.0.0", 28 | "babel-register": "^6.0.0", 29 | "chalk": "^1.1.3", 30 | "connect-history-api-fallback": "^1.1.0", 31 | "css-loader": "^0.25.0", 32 | "eslint": "^3.7.1", 33 | "eslint-friendly-formatter": "^2.0.5", 34 | "eslint-loader": "^1.5.0", 35 | "eslint-plugin-html": "^1.3.0", 36 | "eslint-config-standard": "^6.1.0", 37 | "eslint-plugin-promise": "^2.0.1", 38 | "eslint-plugin-standard": "^2.0.1", 39 | "eventsource-polyfill": "^0.9.6", 40 | "express": "^4.13.3", 41 | "extract-text-webpack-plugin": "^1.0.1", 42 | "file-loader": "^0.9.0", 43 | "function-bind": "^1.0.2", 44 | "html-webpack-plugin": "^2.8.1", 45 | "http-proxy-middleware": "^0.17.2", 46 | "json-loader": "^0.5.4", 47 | "semver": "^5.3.0", 48 | "opn": "^4.0.2", 49 | "ora": "^0.3.0", 50 | "shelljs": "^0.7.4", 51 | "url-loader": "^0.5.7", 52 | "vue-loader": "^10.0.0", 53 | "vue-style-loader": "^1.0.0", 54 | "vue-template-compiler": "^2.1.0", 55 | "webpack": "^1.13.2", 56 | "webpack-dev-middleware": "^1.8.3", 57 | "webpack-hot-middleware": "^2.12.2", 58 | "webpack-merge": "^0.14.1" 59 | }, 60 | "engines": { 61 | "node": ">= 4.0.0", 62 | "npm": ">= 3.0.0" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /static/css/reset.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) 3 | * http://cssreset.com 4 | */ 5 | html, body, div, span, applet, object, iframe, 6 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 7 | a, abbr, acronym, address, big, cite, code, 8 | del, dfn, em, img, ins, kbd, q, s, samp, 9 | small, strike, strong, sub, sup, tt, var, 10 | b, u, i, center, 11 | dl, dt, dd, ol, ul, li, 12 | fieldset, form, label, legend, 13 | table, caption, tbody, tfoot, thead, tr, th, td, 14 | article, aside, canvas, details, embed, 15 | figure, figcaption, footer, header, 16 | menu, nav, output, ruby, section, summary, 17 | time, mark, audio, video, input { 18 | margin: 0; 19 | padding: 0; 20 | border: 0; 21 | font-size: 100%; 22 | font-weight: normal; 23 | vertical-align: baseline; 24 | } 25 | 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, menu, nav, section { 29 | display: block; 30 | } 31 | 32 | body { 33 | line-height: 1; 34 | } 35 | 36 | blockquote, q { 37 | quotes: none; 38 | } 39 | 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: none; 43 | } 44 | 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | /* custom */ 51 | a { 52 | color: #7e8c8d; 53 | text-decoration: none; 54 | -webkit-backface-visibility: hidden; 55 | } 56 | 57 | li { 58 | list-style: none; 59 | } 60 | 61 | ::-webkit-scrollbar { 62 | width: 5px; 63 | height: 5px; 64 | } 65 | 66 | ::-webkit-scrollbar-track-piece { 67 | background-color: rgba(0, 0, 0, 0.2); 68 | -webkit-border-radius: 6px; 69 | } 70 | 71 | ::-webkit-scrollbar-thumb:vertical { 72 | height: 5px; 73 | background-color: rgba(125, 125, 125, 0.7); 74 | -webkit-border-radius: 6px; 75 | } 76 | 77 | ::-webkit-scrollbar-thumb:horizontal { 78 | width: 5px; 79 | background-color: rgba(125, 125, 125, 0.7); 80 | -webkit-border-radius: 6px; 81 | } 82 | 83 | html, body { 84 | width: 100%; 85 | } 86 | 87 | body { 88 | -webkit-text-size-adjust: none; 89 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 90 | background-color: #ffffff; 91 | } 92 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 2 |
{{seller.bulletin}}
58 |{{seller.bulletin}}
41 |{{rating.text}}
46 |{{food.info}}
34 |50 | 52 | {{rating.text}} 53 |
54 |{{food.description}}
25 |