├── static ├── .gitkeep ├── style │ ├── bg-color.css │ ├── reset.css │ ├── main.css │ └── style1.css ├── img │ └── test.jpg ├── font │ └── fonts │ │ ├── icon.eot │ │ ├── icon.ttf │ │ ├── icon.woff │ │ ├── font.css │ │ └── icon.svg └── resource │ └── cart.json ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── .gitignore ├── src ├── assets │ └── logo.png ├── main.js ├── store │ └── index.js ├── App.vue └── components │ └── Hello.vue ├── .babelrc ├── .editorconfig ├── README.md ├── index.html └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | .idea/ 6 | -------------------------------------------------------------------------------- /static/style/bg-color.css: -------------------------------------------------------------------------------- 1 | .danger { 2 | background-color: #d1273b !important; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zoeminghong/shopping-cart-vue-project/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /static/img/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zoeminghong/shopping-cart-vue-project/HEAD/static/img/test.jpg -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /static/font/fonts/icon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zoeminghong/shopping-cart-vue-project/HEAD/static/font/fonts/icon.eot -------------------------------------------------------------------------------- /static/font/fonts/icon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zoeminghong/shopping-cart-vue-project/HEAD/static/font/fonts/icon.ttf -------------------------------------------------------------------------------- /static/font/fonts/icon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zoeminghong/shopping-cart-vue-project/HEAD/static/font/fonts/icon.woff -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # shopping-cart-vue-project 2 | 3 | > 通过vue的组件化构建一个简易购物车Demo 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | 19 | -------------------------------------------------------------------------------- /static/resource/cart.json: -------------------------------------------------------------------------------- 1 | { 2 | "status": 0, 3 | "message": "success", 4 | "result": [ 5 | { 6 | "name": "喵星人", 7 | "gifts": "萌萌", 8 | "price": 19, 9 | "count": 2, 10 | "amount": 38, 11 | "imgPic": "static/img/test.jpg" 12 | }, 13 | { 14 | "name": "大白", 15 | "gifts": "蒂尼", 16 | "price": 20, 17 | "count": 1, 18 | "amount": 20, 19 | "imgPic": "static/img/test.jpg" 20 | } 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | shoppingCar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /static/style/reset.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | body, 6 | dl, 7 | dd { 8 | margin: 0; 9 | } 10 | th, 11 | td { 12 | padding: 0; 13 | } 14 | span, 15 | i { 16 | display: inline-block; 17 | } 18 | input[type='submit'] { 19 | border: none; 20 | background-color: #6190ef; 21 | margin: 10px; 22 | padding: 10px 15px; 23 | } 24 | #container { 25 | font-family: Arial; 26 | min-width: 720px; 27 | max-width: 1280px; 28 | overflow: hidden; 29 | margin: 0 auto; 30 | } 31 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import VueResource from 'vue-resource' 5 | import App from './App' 6 | // 引入store 7 | import store from './store' 8 | 9 | Vue.use(VueResource); 10 | var vm = new Vue({ 11 | //为实例提供挂载元素。值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数 12 | el: '#app', 13 | store, 14 | template:'', 15 | components: { App } 16 | 17 | }); 18 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by gjason on 2017/3/27. 3 | */ 4 | import Vue from 'vue' 5 | import Vuex from 'vuex' 6 | 7 | Vue.use(Vuex) 8 | 9 | export default new Vuex.Store({ 10 | state: { 11 | counts: 0 12 | }, 13 | mutations: { 14 | increment: function (state) { 15 | state.counts++; 16 | }, 17 | decrement: function (state) { 18 | state.counts--; 19 | } 20 | }, 21 | // 触发mutation中的方法 22 | actions: { 23 | increment (context) { 24 | context.commit('increment') 25 | }, 26 | decrement (context) { 27 | context.commit('decrement') 28 | } 29 | } 30 | }) 31 | -------------------------------------------------------------------------------- /static/style/main.css: -------------------------------------------------------------------------------- 1 | .align-left { 2 | text-align: left; 3 | } 4 | .align-right { 5 | text-align: right; 6 | } 7 | .left { 8 | float: left; 9 | } 10 | .right { 11 | float: right; 12 | } 13 | .checkbox { 14 | position: relative; 15 | top: 50%; 16 | transform: translateY(-50%); 17 | height: 20px; 18 | width: 20px; 19 | border-radius: 50%; 20 | border: 1px solid #9d9d9d; 21 | } 22 | .checkbox.checked:after { 23 | position: relative; 24 | top: 50%; 25 | display: inline-block; 26 | content: ''; 27 | height: 10px; 28 | width: 5.600000000000001px; 29 | border: 2px solid #ff302e; 30 | border-left: none; 31 | border-top: none; 32 | transform: translateY(-50%) rotateZ(45deg) translate(-15%, -5%); 33 | } 34 | -------------------------------------------------------------------------------- /static/font/fonts/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icon'; 3 | src: url("icon.eot?m49cyj"); 4 | src: url("icon.eot?m49cyj#iefix") format('embedded-opentype'), url("icon.ttf?m49cyj") format('truetype'), url("icon.woff?m49cyj") format('woff'), url("icon.svg?m49cyj#icon") format('svg'); 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | .icon { 9 | font-family: 'icon' !important; 10 | speak: none; 11 | font-style: normal; 12 | font-weight: normal; 13 | font-variant: normal; 14 | text-transform: none; 15 | line-height: 1.5; 16 | /* Better Font Rendering =========== */ 17 | -webkit-font-smoothing: antialiased; 18 | -moz-osx-font-smoothing: grayscale; 19 | } 20 | .icon-delete:before { 21 | content: "\e903"; 22 | } 23 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 33 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'] 18 | }, 19 | dev: { 20 | env: require('./dev.env'), 21 | port: 8080, 22 | assetsSubDirectory: 'static', 23 | assetsPublicPath: '/', 24 | proxyTable: {}, 25 | // CSS Sourcemaps off by default because relative paths are "buggy" 26 | // with this option, according to the CSS-Loader README 27 | // (https://github.com/webpack/css-loader#sourcemaps) 28 | // In our experience, they generally work as expected, 29 | // just be aware of this issue when enabling this option. 30 | cssSourceMap: false 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /static/font/fonts/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shopping-cart-vue-project", 3 | "version": "1.0.0", 4 | "description": "A simple vue project", 5 | "author": "迹_Jason", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/zoeminghong/shopping-cart-vue-project.git" 14 | }, 15 | "license": "MIT", 16 | "dependencies": { 17 | "vue": "^2.1.0" 18 | }, 19 | "devDependencies": { 20 | "autoprefixer": "^6.4.0", 21 | "babel-core": "^6.0.0", 22 | "babel-loader": "^6.0.0", 23 | "babel-plugin-transform-runtime": "^6.0.0", 24 | "babel-preset-es2015": "^6.0.0", 25 | "babel-preset-stage-2": "^6.0.0", 26 | "babel-register": "^6.0.0", 27 | "chalk": "^1.1.3", 28 | "connect-history-api-fallback": "^1.1.0", 29 | "css-loader": "^0.25.0", 30 | "eventsource-polyfill": "^0.9.6", 31 | "express": "^4.13.3", 32 | "extract-text-webpack-plugin": "^1.0.1", 33 | "file-loader": "^0.9.0", 34 | "function-bind": "^1.0.2", 35 | "html-webpack-plugin": "^2.8.1", 36 | "http-proxy-middleware": "^0.17.2", 37 | "json-loader": "^0.5.4", 38 | "opn": "^4.0.2", 39 | "ora": "^0.3.0", 40 | "semver": "^5.3.0", 41 | "shelljs": "^0.7.4", 42 | "url-loader": "^0.5.7", 43 | "vue-loader": "^10.0.0", 44 | "vue-resource": "^1.2.0", 45 | "vue-style-loader": "^1.0.0", 46 | "vue-template-compiler": "^2.1.0", 47 | "vuex": "^2.2.1", 48 | "webpack": "^1.13.2", 49 | "webpack-dev-middleware": "^1.8.3", 50 | "webpack-hot-middleware": "^2.12.2", 51 | "webpack-merge": "^0.14.1" 52 | }, 53 | "engines": { 54 | "node": ">= 4.0.0", 55 | "npm": ">= 3.0.0" 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 115 | -------------------------------------------------------------------------------- /static/style/style1.css: -------------------------------------------------------------------------------- 1 | #shoppingCar .title-wrap { 2 | margin-top: 50px; 3 | font: 20px/1.5 a; 4 | font-weight: 400; 5 | text-align: center; 6 | } 7 | #shoppingCar .title-wrap .title { 8 | width: 15.000000000000002%; 9 | text-align: center; 10 | } 11 | #shoppingCar .title-wrap .line-v { 12 | width: 41.66666666666667%; 13 | height: 1px; 14 | background-color: #ccc; 15 | margin-top: -4px; 16 | vertical-align: middle; 17 | } 18 | #shoppingCar .detial-wrap { 19 | margin-top: 30px; 20 | text-align: center; 21 | width: 100%; 22 | border-collapse: collapse; 23 | border-bottom: 1px solid #ccc; 24 | line-height: 50px; 25 | } 26 | #shoppingCar .detial-wrap tr th { 27 | color: #f9f9f9; 28 | background: #585858; 29 | } 30 | #shoppingCar .detial-wrap tr th:first-child { 31 | border-radius: 8px 0 0 8px; 32 | } 33 | #shoppingCar .detial-wrap tr th:last-child { 34 | border-radius: 0 8px 8px 0; 35 | } 36 | #shoppingCar .detial-wrap tr td { 37 | height: 150px; 38 | width: 10%; 39 | } 40 | #shoppingCar .detial-wrap tr td.goods-detial-wrap { 41 | width: 60.00000000000001%; 42 | vertical-align: top; 43 | } 44 | #shoppingCar .detial-wrap tr td.goods-detial-wrap .goods-detial { 45 | position: relative; 46 | top: 50%; 47 | transform: translateY(-50%); 48 | width: 87.5%; 49 | height: 60%; 50 | } 51 | #shoppingCar .detial-wrap tr td.goods-detial-wrap .goods-detial .good-img { 52 | margin: 0 5px; 53 | height: 90px; 54 | width: 125.99999999999999px; 55 | } 56 | #shoppingCar .detial-wrap tr td.goods-detial-wrap .goods-detial .good-img img { 57 | height: 100%; 58 | width: 100%; 59 | } 60 | #shoppingCar .detial-wrap tr td.goods-detial-wrap .goods-detial .good-text { 61 | line-height: 2.2; 62 | text-align: left; 63 | height: 100%; 64 | margin-left: 25px; 65 | font-weight: bold; 66 | width: 58.333333333333336%; 67 | } 68 | #shoppingCar .detial-wrap tr td.goods-detial-wrap .goods-detial .good-text .gifts { 69 | width: 100%; 70 | } 71 | #shoppingCar .detial-wrap tr td.goods-detial-wrap .goods-detial .good-text .gifts dt { 72 | display: inline-block; 73 | margin-right: 10px; 74 | } 75 | #shoppingCar .detial-wrap tr td.goods-detial-wrap .goods-detial .good-text .gifts dd { 76 | display: inline-block; 77 | color: #ababab; 78 | margin-right: 15px; 79 | } 80 | #shoppingCar .detial-wrap tr td.buy-num .choosenum-handler i { 81 | display: inline-block; 82 | height: 8px; 83 | width: 8px; 84 | position: relative; 85 | } 86 | #shoppingCar .detial-wrap tr td.buy-num .choosenum-handler i.icon-minus:before { 87 | content: ''; 88 | display: inline-block; 89 | position: absolute; 90 | top: 50%; 91 | transform: translateY(-50%); 92 | width: 8px; 93 | height: 2px; 94 | background-color: #2f3130; 95 | } 96 | #shoppingCar .detial-wrap tr td.buy-num .choosenum-handler i.icon-plus:before, 97 | #shoppingCar .detial-wrap tr td.buy-num .choosenum-handler i.icon-plus:after { 98 | content: ''; 99 | display: inline-block; 100 | position: absolute; 101 | background-color: #2f3130; 102 | } 103 | #shoppingCar .detial-wrap tr td.buy-num .choosenum-handler i.icon-plus:before { 104 | width: 8px; 105 | height: 2px; 106 | top: 50%; 107 | left: 0; 108 | transform: translateY(-50%); 109 | } 110 | #shoppingCar .detial-wrap tr td.buy-num .choosenum-handler i.icon-plus:after { 111 | top: 0; 112 | left: 50%; 113 | transform: translateX(-50%); 114 | width: 2px; 115 | height: 8px; 116 | } 117 | #shoppingCar .detial-wrap tr td.buy-num .choosenum-handler .countbox { 118 | vertical-align: middle; 119 | height: 20px; 120 | line-height: 20px; 121 | width: 30px; 122 | margin: 0 10px 0 13px; 123 | border: 1px solid #6190ef; 124 | border-radius: 2px; 125 | } 126 | #shoppingCar .detial-wrap tr td.icon { 127 | color: #1e1c1c; 128 | } 129 | #shoppingCar .checkbox-wrap { 130 | height: 100%; 131 | width: 12.5%; 132 | } 133 | #shoppingCar .checkout-wrap { 134 | height: 80px; 135 | line-height: 80px; 136 | } 137 | #shoppingCar .checkout-wrap .total-check-wrap { 138 | text-align: center; 139 | width: 60.00000000000001%; 140 | } 141 | #shoppingCar .checkout-wrap .total-check-wrap .check-text { 142 | padding-top: 1px; 143 | text-align: left; 144 | font-weight: 600; 145 | } 146 | #shoppingCar .checkout-wrap .total-check-wrap .check-text .checked-all { 147 | padding-left: 0.5em; 148 | color: #ff302e; 149 | } 150 | #shoppingCar .checkout-wrap .total-check-wrap .check-text .unchecked-all { 151 | padding-left: 1.5em; 152 | } 153 | #shoppingCar .checkout-wrap .checkout .total-money { 154 | display: inline-block; 155 | font-size: 20px; 156 | margin-right: 1.5em; 157 | } 158 | #shoppingCar .checkout-wrap .checkout .total-money span { 159 | margin-right: 0.8em; 160 | } 161 | #shoppingCar .checkout-wrap .checkout .total-money span.amount { 162 | color: #ff302e; 163 | } 164 | #shoppingCar .checkout-wrap .checkout input { 165 | color: #fff; 166 | font-size: 20px; 167 | width: 7em; 168 | line-height: 1.5; 169 | border-radius: 5px; 170 | } 171 | --------------------------------------------------------------------------------