13: vue项目结构搭建与开发
vue其他篇
目录：
1.1 初始化项目 返回顶部
１、初始化项目
vue init webpack itany
cd itany
cnpm install
cnpm install less less-loader -D
cnpm install vuex axios -S
cnpm install animate.css -S // 项目中切换页面实现动画效果，所以安装 animate.css 模块
npm run dev
2、首先清除项目中的部分内容
1. 删除 src/assets 文件夹（默认存放资源的文件夹）
2. 删除默认组件 components/HelloWorld.vue
3. 删除 App.vue 对默认图片的引用： <img src="./assets/logo.png">
4. 删除 src/router/index.js 文件中 对HelloWorld.vue 组件使用的内容
import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' Vue.use(Router); export default new Router({ routes: [ // { // path: '/', // name: 'HelloWorld', // component: HelloWorld // } ] })
3、创建如下目录结构
1. 在项目根目录（src同级目录）下创建 data.json 模拟后台数据
2. 在项目根目录（src同级目录）下默认已创建了 static文件，在此文件夹下创建 css 文件夹，在css文件夹下引入 reset.css 文件（static/css/reset.css）
{ "seller": { "name": "小厨娘淮扬菜（七里街店）", "description": "蜂鸟专送", "deliveryTime": 38, "score": 4.6, "serviceScore": 4.1, "foodScore": 4.3, "rankRate": 69.2, "minPrice": 20, "deliveryPrice": 4, "ratingCount": 24, "sellCount": 90, "bulletin": "小厨娘品牌创立于1997年，是一家专业、专注餐饮及管理的餐饮企业。截至2013年小厨娘旗下正餐店11家，商超店12家，团队员工2000多名。作为江苏省服务业名牌企业，小厨娘近年来一直保持快速发展势头，并不断向国内一流餐饮同行学习和交流。", "supports": [ { "type": 0, "description": "在线支付满28减5" }, { "type": 1, "description": "VC无限橙果汁全场8折" }, { "type": 2, "description": "单人精彩套餐" }, { "type": 3, "description": "该商家支持发票,请下单写好发票抬头" }, { "type": 4, "description": "已加入“外卖保”计划,食品安全保障" } ], "avatar": "https://fuss10.elemecdn.com/0/51/66f76d37f15c96a41379a695b0acejpeg.jpeg", "pics": [ "http://fuss10.elemecdn.com/8/71/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180", "http://fuss10.elemecdn.com/b/6c/75bd250e5ba69868f3b1178afbda3jpeg.jpeg?imageView2/1/w/180/h/180", "http://fuss10.elemecdn.com/f/96/3d608c5811bc2d902fc9ab9a5baa7jpeg.jpeg?imageView2/1/w/180/h/180", "http://fuss10.elemecdn.com/6/ad/779f8620ff49f701cd4c58f6448b6jpeg.jpeg?imageView2/1/w/180/h/180" ], "infos": [ "该商家支持发票,请下单写好发票抬头", "品类:其他菜系,淮扬菜", "江苏省南京市秦淮区龙蟠中路451号2-3楼", "营业时间:10:00-23:30" ] }, "goods": [ { "name": "热销榜", "type": -1, "foods": [ { "name": "皮蛋瘦肉粥", "price": 10, "oldPrice": "", "description": "咸粥", "sellCount": 229, "rating": 100, "info": "一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "很喜欢的粥", "avatar": "http://bbs.itany.com/uc_server/data/avatar/000/00/00/36_avatar_small.jpg" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 1, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "扁豆焖面", "price": 14, "oldPrice": "", "description": "", "sellCount": 188, "rating": 96, "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 1, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "info": "", "icon": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "葱花饼", "price": 10, "oldPrice": "", "description": "", "sellCount": 124, "rating": 85, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 1, "text": "没啥味道", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 1, "text": "很一般啊", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "牛肉馅饼", "price": 14, "oldPrice": "", "description": "", "sellCount": 114, "rating": 91, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 1, "text": "难吃不推荐", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "招牌猪肉白菜锅贴/10个", "price": 17, "oldPrice": "", "description": "", "sellCount": 101, "rating": 78, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 1, "text": "不脆,不好吃", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "南瓜粥", "price": 9, "oldPrice": "", "description": "甜粥", "sellCount": 91, "rating": 100, "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "红豆薏米美肤粥", "price": 12, "oldPrice": "", "description": "甜粥", "sellCount": 86, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "八宝酱菜", "price": 4, "oldPrice": "", "description": "", "sellCount": 84, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "红枣山药糙米粥", "price": 10, "oldPrice": "", "description": "", "sellCount": 81, "rating": 91, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "糊塌子", "price": 10, "oldPrice": "", "description": "", "sellCount": 80, "rating": 93, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "厨娘推荐", "type": 2, "foods": [ { "name": "红枣山药粥套餐", "price": 29, "oldPrice": 36, "description": "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注", "sellCount": 17, "rating": 100, "info": "", "ratings": [ { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "冰爽饮品限时特惠", "type": 1, "foods": [ { "name": "VC无限橙果汁", "price": 8, "oldPrice": 10, "description": "", "sellCount": 15, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "还可以", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "精选热菜", "type": -1, "foods": [ { "name": "娃娃菜炖豆腐", "price": 17, "oldPrice": "", "description": "", "sellCount": 43, "rating": 92, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "菜量还可以,味道还可以", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "手撕包菜", "price": 16, "oldPrice": "", "description": "", "sellCount": 29, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "香酥黄金鱼/3条", "price": 11, "oldPrice": "", "description": "", "sellCount": 15, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "爽口凉菜", "type": -1, "foods": [ { "name": "八宝酱菜", "price": 4, "oldPrice": "", "description": "", "sellCount": 84, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "拍黄瓜", "price": 9, "oldPrice": "", "description": "", "sellCount": 28, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "精选套餐", "type": -1, "foods": [ { "name": "红豆薏米粥套餐", "price": 37, "oldPrice": "", "description": "红豆薏米粥,三鲜干蒸烧卖,拍黄瓜", "sellCount": 3, "rating": 100, "info": "", "ratings": [ { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "皮蛋瘦肉粥套餐", "price": 31, "oldPrice": "", "description": "", "sellCount": 12, "rating": 100, "info": "", "ratings": [ { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "果拼果汁", "type": -1, "foods": [ { "name": "蜜瓜圣女萝莉杯", "price": 6, "oldPrice": "", "description": "", "sellCount": 1, "rating": "", "info": "", "ratings": [], "icon": "http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "加多宝", "price": 6, "oldPrice": "", "description": "", "sellCount": 7, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "VC无限橙果汁", "price": 8, "oldPrice": 10, "description": "", "sellCount": 15, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "还可以", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "小吃主食", "type": -1, "foods": [ { "name": "扁豆焖面", "price": 14, "oldPrice": "", "description": "", "sellCount": 188, "rating": 96, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 1, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "葱花饼", "price": 10, "oldPrice": "", "description": "", "sellCount": 124, "rating": 85, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 1, "text": "没啥味道", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 1, "text": "很一般啊", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "牛肉馅饼", "price": 14, "oldPrice": "", "description": "", "sellCount": 114, "rating": 91, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 1, "text": "难吃不推荐", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "招牌猪肉白菜锅贴/10个", "price": 17, "oldPrice": "", "description": "", "sellCount": 101, "rating": 78, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 1, "text": "不脆,不好吃", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "糊塌子", "price": 10, "oldPrice": "", "description": "", "sellCount": 80, "rating": 93, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "特色粥品", "type": -1, "foods": [ { "name": "皮蛋瘦肉粥", "price": 10, "oldPrice": "", "description": "咸粥", "sellCount": 229, "rating": 100, "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "很喜欢的粥", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 1, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "南瓜粥", "price": 9, "oldPrice": "", "description": "甜粥", "sellCount": 91, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "红豆薏米美肤粥", "price": 12, "oldPrice": "", "description": "甜粥", "sellCount": 86, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "红枣山药糙米粥", "price": 10, "oldPrice": "", "description": "", "sellCount": 81, "rating": 91, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "鲜蔬菌菇粥", "price": 11, "oldPrice": "", "description": "咸粥", "sellCount": 56, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "田园蔬菜粥", "price": 10, "oldPrice": "", "description": "咸粥", "sellCount": 33, "rating": 100, "info": "", "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/750/h/750" } ] } ], "ratings": [ { "username": "3******c", "rateTime": 1469281964000, "deliveryTime": 30, "score": 5, "rateType": 0, "text": "不错,粥很好喝,我经常吃这一家,非常赞,以后也会常来吃,强烈推荐.", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [ "南瓜粥", "皮蛋瘦肉粥", "扁豆焖面", "娃娃菜炖豆腐", "牛肉馅饼" ] }, { "username": "2******3", "rateTime": 1469271264000, "deliveryTime": "", "score": 4, "rateType": 0, "deliveryTime": "", "text": "服务态度不错", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [ "扁豆焖面" ] }, { "username": "3******b", "rateTime": 1469261964000, "score": 3, "rateType": 1, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "1******c", "rateTime": 1469261864000, "deliveryTime": 20, "score": 5, "rateType": 0, "text": "良心店铺", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "2******d", "rateTime": 1469251264000, "deliveryTime": 10, "score": 4, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "9******0", "rateTime": 1469241964000, "deliveryTime": 70, "score": 1, "rateType": 1, "text": "送货速度蜗牛一样", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "d******c", "rateTime": 1469231964000, "deliveryTime": 30, "score": 5, "rateType": 0, "text": "很喜欢的粥店", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "2******3", "rateTime": 1469221264000, "deliveryTime": "", "score": 4, "rateType": 0, "text": "量给的还可以", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "3******8", "rateTime": 1469211964000, "deliveryTime": "", "score": 3, "rateType": 1, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "a******a", "rateTime": 1469201964000, "deliveryTime": "", "score": 4, "rateType": 0, "text": "孩子喜欢吃这家", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [ "南瓜粥" ] }, { "username": "3******3", "rateTime": 1469191264000, "deliveryTime": "", "score": 4, "rateType": 0, "text": "粥挺好吃的", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "t******b", "rateTime": 1469181964000, "deliveryTime": "", "score": 3, "rateType": 1, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "f******c", "rateTime": 1469171964000, "deliveryTime": 15, "score": 5, "rateType": 0, "text": "送货速度很快", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "k******3", "rateTime": 1469161264000, "deliveryTime": "", "score": 4, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "u******b", "rateTime": 1469151964000, "deliveryTime": "", "score": 4, "rateType": 0, "text": "下雨天给快递小哥点个赞", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "s******c", "rateTime": 1469141964000, "deliveryTime": "", "score": 4, "rateType": 0, "text": "好", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "z******3", "rateTime": 1469131264000, "deliveryTime": "", "score": 5, "rateType": 0, "text": "吃了还想再吃", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "n******b", "rateTime": 1469121964000, "deliveryTime": "", "score": 3, "rateType": 1, "text": "发票开的不对", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "m******c", "rateTime": 1469111964000, "deliveryTime": 30, "score": 5, "rateType": 0, "text": "好吃", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "l******3", "rateTime": 1469101264000, "deliveryTime": 40, "score": 5, "rateType": 0, "text": "还不错吧", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "3******o", "rateTime": 1469091964000, "deliveryTime": "", "score": 2, "rateType": 1, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "3******p", "rateTime": 1469081964000, "deliveryTime": "", "score": 4, "rateType": 0, "text": "很喜欢的粥", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "o******k", "rateTime": 1469071264000, "deliveryTime": "", "score": 5, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] }, { "username": "k******b", "rateTime": 1469061964000, "deliveryTime": "", "score": 4, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small", "recommend": [] } ] }
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video, input { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block; } body { line-height: 1; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } table { border-collapse: collapse; border-spacing: 0; } /* custom */ a { color: #7e8c8d; text-decoration: none; -webkit-backface-visibility: hidden; } li { list-style: none; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track-piece { background-color: rgba(0, 0, 0, 0.2); -webkit-border-radius: 6px; } ::-webkit-scrollbar-thumb:vertical { height: 5px; background-color: rgba(125, 125, 125, 0.7); -webkit-border-radius: 6px; } ::-webkit-scrollbar-thumb:horizontal { width: 5px; background-color: rgba(125, 125, 125, 0.7); -webkit-border-radius: 6px; } html, body { width: 100%; line-height: 1; font-weight: 200; font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif; } body { -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
1.2 配置API接口，模拟后台数据 返回顶部
1、说明
1. 在使用vue开发过程中，难免需要去本地数据地址进行请求，而原版配置在dev-server.js中
2. 新版vue-webpack-template已经删除dev-server.js，改用webpack.dev.conf.js代替，所以配置本地访问在webpack.dev.conf.js里配置即可。
2、修改 build\webpack.dev.conf.js 文件
1. 在 const portfinder = require('portfinder') 后添加
// ################### 第一步：使用express框架启动一个服务器 ######################## // https://blog.csdn.net/qq_34645412/article/details/78833860 const express = require('express'); const app = express(); //请求server var appData = require('../data.json'); //加载本地数据文件 var seller = appData.seller; //获取对应的本地数据 var goods = appData.goods; var ratings = appData.ratings; var apiRoutes = express.Router(); app.use('/api', apiRoutes); //通过路由请求数据 // #######################################################
2. 找到devServer,在里面加上before（）方法
// ################# 第二步：找到devServer,在里面添加 ############### before(app) { app.get('/api/seller', (req, res) => { res.json({ errno: 0, data: seller })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用 }), app.get('/api/goods', (req, res) => { res.json({ errno: 0, data: goods }) }), app.get('/api/ratings', (req, res) => { res.json({ errno: 0, data: ratings }) }) }, // #####################################################
3、测试接口
注：测试接口前记得重启服务：npm run dev
http://127.0.0.1:8080/api/seller
http://127.0.0.1:8080/api/goods
http://127.0.0.1:8080/api/ratings
1.3 项目整体结构化开发 返回顶部
1、 itaniy/index.html （项目根目录的）
1. itaniy/index.html 定义项目整体的css样式等
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>itany</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="static/css/reset.css"> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
2、src/main.js 和 src/App.vue
1. main.js 是我们的入口文件，主要作用是初始化vue实例并使用需要的插件。
2. App.vue 是我们的主组件，所有页面都是在App.vue下进行切换的。
其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import store from './store/index.js' Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ el: '#app', router, store, template: '<App/>', components: { App } });
<template> <div id="app"> <v-header></v-header> <div class="tab"> <div class="tab-item"> <router-link to="/goods">商品</router-link> </div> <div class="tab-item"> <router-link to="/ratings">评论</router-link> </div> <div class="tab-item"> <router-link to="/seller">商家</router-link> </div> </div> <router-view></router-view> </div> </template> <script> import Header from './components/header/Header.vue' export default { components:{ 'v-header':Header } } </script> <style lang="less" scoped> #app .tab{ display: flex; width: 100%; height: 40px; line-height: 40px; border-bottom: 1px solid rgba(7,17,27,0.1); } .tab-item{ flex:1; text-align: center; } .active{ color: red; } </style>
3、src\router\index.js
1. src\router\index.js 定义路由信息
import Vue from 'vue' import Router from 'vue-router' import Goods from '../components/goods/Goods.vue' Vue.use(Router); export default new Router({ routes: [ { path:'/goods', component:Goods } ], linkActiveClass:'active' })
4、src\components（定义组件）
<template> <div class="header"> {{seller.name}} <img :src="seller.avatar" alt="" @click="showDetail"> <br> {{msg}} <!-- 弹出层 --> <Detail></Detail> </div> </template> <script> import {mapGetters} from 'vuex' import Detail from '../detail/Detail.vue' export default { // 在这里获取 seller.js 中 getSeller方法，获取seller数据 created(){ this.$store.dispatch('getSeller'); }, // 通过计算属性获取 seller.js中的 seller 方法获取的数据 computed:{ ...mapGetters([ // ES6中，三个点是对象展开运算符 'seller' ]), msg(){ // 自定义计算属性 return 'welcome to itany king'; } }, // 注册Detail组件 components:{ Detail }, methods:{ showDetail(){ this.$store.dispatch('showDetail'); } } } </script> <style lang="less" scoped> .header{ height: 134px; background-color: rgba(7,17,27,0.1); font-size: 14px; } img{ width: 64px; height:64px; border-radius: 2px; } </style>
<template> <!-- 使用transition 实现动画效果： 从右边入，从右边出--> <transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight"> <div class="detail" v-show="detailShow"> 详情页 <br> <br> <h2>{{seller.name}}</h2> <br> <h2>{{seller.bulletin}}</h2> <br> <ul> <li v-for="item in seller.supports"> {{item.description}} </li> </ul> <button @click="hideDetail" class="close">关闭</button> </div> </transition> </template> <script> import {mapGetters} from 'vuex' import 'animate.css/animate.css' export default { computed:{ ...mapGetters([ 'detailShow', 'seller' ]) }, methods:{ hideDetail(){ this.$store.dispatch('hideDetail'); } } } </script> <style lang="less" scoped> .detail{ position: fixed; top: 0; left: 0; z-index: 666; width: 100%; height: 100%; overflow: auto; background-color: rgba(7,17,27,0.8); color:#fff; } .detail .close{ position: absolute; bottom: 50px; left:40%; } </style>
<template> <div class="goods"> <div class="menu-wrapper"> <ul> <li v-for="item in goods"> {{item.name}} </li> </ul> </div> <div class="foods-wrapper"> <ul> <li v-for="item in goods"> <h1>{{item.name}}</h1> <ul> <li v-for="food in item.foods"> <img :src="food.icon" alt=""> {{food.name}} </li> </ul> <hr> </li> </ul> </div> </div> </template> <script> import {mapGetters} from 'vuex' export default { created(){ this.$store.dispatch('getGoods'); }, computed:mapGetters([ 'goods' ]) } </script> <style lang="less" scoped> .goods{ display: flex; position: absolute; top:174px; bottom: 46px; overflow: auto; } .menu-wrapper{ flex:0 0 80px; width: 80px; background-color: #f3f5f7; } .foods-wrapper{ flex:1; } </style>
5、src\store (使用vuex实现模块化)
1. 新建下面目录结构
|-store |-index.js // 我们组装模块并导出 store 的地方 |-getters.js // 公共的 getters (用来获取公共属性) |-actions.js // 根级别的 action (提交公共改变) |-mutations.js // 根级别的 mutation (处理状态，数据的改变) |-types.js // 定义类型常量(commit中提交的常量) |-modules //分为多个模块，每个模块都可以拥有自己的state、getters、actions、mutations |-seller.js // 商家信息 |-goods.js // 商品详情 |-ratings.js // 用户评论
2. 具体内容
import Vue from 'vue' import Vuex from 'vuex' import getters from './getters' import actions from './actions' import seller from './modules/seller' import goods from './modules/goods' import ratings from './modules/ratings' Vue.use(Vuex); export default new Vuex.Store({ getters, actions, modules:{ seller, goods, ratings } });
const GET_SELLER="GET_SELLER"; const SHOW_DETAIL="SHOW_DETAIL"; // 显示上家详情 const HIDE_DETAIL="HIDE_DETAIL"; // 隐藏上家详情 const GET_GOODS='GET_GOODS'; export default { GET_SELLER, SHOW_DETAIL, HIDE_DETAIL, GET_GOODS }
const actions={ }; export default actions;
const getters={ }; export default getters;
import types from '../types.js' import axios from 'axios' // 由于seller.js不是组件，不可以全局引入后每个组件都可以用 axios const state={ seller:{}, // 定义一个变量接收请求获取的数据 detailShow:false }; const getters={ seller(state){ // 在Header.vue组件中调用的seller方法就是这个方法，来获取数据 return state.seller; }, detailShow(state){ return state.detailShow; } }; const actions={ getSeller({commit,state}){ axios.get('/api/seller').then(resp => { // console.log(resp); if(resp.data.errno==0){ commit(types.GET_SELLER,resp.data.data); // 将types.GET_SELLER()【事件类型名称】，resp.data.data()【获取的数据】传给 mutations } }); }, showDetail({commit}){ // 利用vuex实现组件间通信 commit(types.SHOW_DETAIL); }, hideDetail({commit}){ commit(types.HIDE_DETAIL); } }; const mutations={ [types.GET_SELLER](state,data){ // 参数state是state对象，data是commit获取并传入的数据 state.seller=data; // 将commit获取的数据重新赋值给state中定义的空字典seller }, [types.SHOW_DETAIL](state){ // 将商家详情显示改成 true state.detailShow=true; }, [types.HIDE_DETAIL](state){ state.detailShow=false; } }; export default { state, getters, actions, mutations }
import types from '../types.js' import axios from 'axios' const state={ goods:[] }; const getters={ goods(state){ return state.goods; } }; const actions={ getGoods({commit,state}){ axios.get('/api/goods').then(resp => { if(resp.data.errno==0){ commit(types.GET_GOODS,resp.data.data); } }); } }; const mutations={ [types.GET_GOODS](state,data){ state.goods=data; } } export default { state, getters, actions, mutations }
import types from '../types.js' const state={ }; const getters={ }; const actions={ }; const mutations={ }; export default { state, getters, actions, mutations }
6、效果
1. 点击图片显示 Detail.vue组件中的内容(显示上家详情)
2. 点击商品显示商品列表
1.4 项目简化版 返回顶部
１、初始化项目
vue init webpack itany
cd itany
cnpm install
cnpm install less less-loader -D
cnpm install vuex axios -S
cnpm install animate.css -S // 项目中切换页面实现动画效果，所以安装 animate.css 模块
npm run dev
2、文件结构
|-data.json |-build |-webpack.dev.conf.js |-src |-main.js // 项目入口文件 |-App.vue |-store |-index.js // 我们组装模块并导出 store 的地方 |-modules // 分为多个模块，每个模块都可以拥有自己的state、getters、actions、mutations |-goods.js // 商品模块（这里仅以goods模块作为事例）
|-router |-index.js // 路由模块 |-components |-header |-Header.vue // 页面头部 |-goods |-Goods.vue // 商品页
3、文件
{ "goods": [{ "name": "热销榜", "type": -1, "foods": [{ "name": "皮蛋瘦肉粥", "price": 10, "oldPrice": "", "description": "咸粥", "sellCount": 229, "rating": 100, "info": "一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足", "ratings": [{ "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "很喜欢的粥", "avatar": "http://bbs.itany.com/uc_server/data/avatar/000/00/00/36_avatar_small.jpg" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 1, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750" }, { "name": "扁豆焖面", "price": 14, "oldPrice": "", "description": "", "sellCount": 188, "rating": 96, "ratings": [{ "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "3******b", "rateTime": 1469261964000, "rateType": 1, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "info": "", "icon": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750" } ] }, { "name": "冰爽饮品限时特惠", "type": 1, "foods": [{ "name": "VC无限橙果汁", "price": 8, "oldPrice": 10, "description": "", "sellCount": 15, "rating": 100, "info": "", "ratings": [{ "username": "3******c", "rateTime": 1469281964000, "rateType": 0, "text": "还可以", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" }, { "username": "2******3", "rateTime": 1469271264000, "rateType": 0, "text": "", "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small" } ], "icon": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114", "image": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750" }] } ] }
'use strict' const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path = require('path') const baseWebpackConfig = require('./webpack.base.conf') const CopyWebpackPlugin = require('copy-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') const portfinder = require('portfinder') // ################### 第一步：使用express框架启动一个服务器 ######################## // https://blog.csdn.net/qq_34645412/article/details/78833860 const express = require('express'); const app = express(); //请求server var appData = require('../data.json'); //加载本地数据文件 var seller = appData.seller; //获取对应的本地数据 var goods = appData.goods; var ratings = appData.ratings; var apiRoutes = express.Router(); app.use('/api', apiRoutes); //通过路由请求数据 // ####################################################### const HOST = process.env.HOST const PORT = process.env.PORT && Number(process.env.PORT) const devWebpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) }, // cheap-module-eval-source-map is faster for development devtool: config.dev.devtool, // these devServer options should be customized in /config/index.js devServer: { // ################# 第二步：找到devServer,在里面添加 ############### before(app) { app.get('/api/goods', (req, res) => { res.json({ errno: 0, data: goods }) }) }, // ##################################################### clientLogLevel: 'warning', historyApiFallback: { rewrites: [ { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, ], }, hot: true, contentBase: false, // since we use CopyWebpackPlugin. compress: true, host: HOST || config.dev.host, port: PORT || config.dev.port, open: config.dev.autoOpenBrowser, overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false, publicPath: config.dev.assetsPublicPath, proxy: config.dev.proxyTable, quiet: true, // necessary for FriendlyErrorsPlugin watchOptions: { poll: config.dev.poll, } }, plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env') }), new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), // copy custom static assets new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.dev.assetsSubDirectory, ignore: ['.*'] } ]) ] }) module.exports = new Promise((resolve, reject) => { portfinder.basePort = process.env.PORT || config.dev.port portfinder.getPort((err, port) => { if (err) { reject(err) } else { // publish the new Port, necessary for e2e tests process.env.PORT = port // add port to devServer config devWebpackConfig.devServer.port = port // Add FriendlyErrorsPlugin devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ compilationSuccessInfo: { messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], }, onErrors: config.dev.notifyOnErrors ? utils.createNotifierCallback() : undefined })) resolve(devWebpackConfig) } }) })
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import store from './store/index' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })
<template>
<div id="app">
<v-header></v-header>
<router-view/>
</div>
</template>
<script>
import Header from './components/header/Header'
export default {
components:{
'v-header':Header
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
import Vue from 'vue' import Vuex from 'vuex' import goods from './modules/goods' Vue.use(Vuex) export default new Vuex.Store({ modules:{ goods } })
import axios from 'axios' //1、定义属性(数据) const state = { goods:[] }; //2、定义gettters获取属性：在组件中使用 辅助函数 访问 vuex 组件中数据调用此函数 const getters = { goods(state){ return state.goods; } }; //3、定义actions提交变化：其他组件中调用的方法() const actions = { getGoods({commit,state}){ axios.get('/api/goods').then(resp=> { if(resp.data.errno == 0){ commit('getGoods',resp.data.data) } }) } }; //4、定义mutations定义变化,处理状态（数据的改变） const mutations = { getGoods(state, data){ state.goods=data; } }; //5、导出store对象 export default { state, getters, actions, mutations, }
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Goods from '../components/goods/Goods' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path:'/goods', name:'Goods', component:Goods } ] })
<template> <div class="header"> <h1>I Am Header</h1> </div> </template> <script> export default { name: "" } </script> <style scoped> .header{ height: 90px; background-color: #f3f5f7; width: 100%; } </style>
<template> <div class="goods"> <div class="menu-wrapper"> <ul> <li v-for="item in goods"> {{item.name}} </li> </ul> </div> <div class="foods-wrapper"> <ul> <li v-for="item in goods"> <h1>{{item.name}}</h1> <ul> <li v-for="food in item.foods"> <img :src="food.icon" alt=""> {{food.name}} </li> </ul> <hr> </li> </ul> </div> </div> </template> <script> import {mapGetters} from 'vuex' export default { created(){ this.$store.dispatch('getGoods'); }, computed:mapGetters([ 'goods' ]) } </script> <style lang="less" scoped> </style>
4、测试
http://localhost:8080/api/goods # 测试接口
http://localhost:8080/#/goods # 打开goods页面
作者：学无止境
出处：https://www.cnblogs.com/xiaonq
生活不只是眼前的苟且，还有诗和远方。
