vue+koa2移动电商实战是由前端前辈技术胖进行录制,后期收费单元可在纯金付费观看。此系列是我在上课时所作笔记,大多是教程中的摘录。
附: 移动电商原教程 http://jspang.com/post/vue-koa.html
全局安装vue-cli :
npm install vue-cli -g
前期关于node.js的安装,vue-cli脚手架的安装不作赘述。
第一节:引入vant组件库
(1)安装vant组件库
npm i vant -S // -S表示用于生产环境
不建议使用cnpm,因为会出现一些未知的问题。如CPU占满
或者可以直接安装淘宝的源
npm install vant --save --registry=https://registry.npm.taobao.org
(2)引入Vant
第一种:全局(不建议)
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)
第二种:按需引入 babel-plugin
英文文档: https://babeljs.io/docs/en/plugins/
中文文档:https://www.babeljs.cn/docs/plugins/
(1)安装babel-plugin
npm i babel-plugin-import -D //-D为“ --save-dev”的缩写
(2)在babel.lrc中添加内容
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import",{"libraryName":"vant","style": true}]
]
(3)在main.js中按需使用
import { Button } from 'vant'
Vue.use(Button)
第二节: 移动端适配方法
- 固定高度,宽度百分比
- Media Query(媒体查询)
- flex布局(+rem)
rem:(font size of the root element)是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。
其中iphone5屏宽320px,默认font-size: 16px.
<script>
let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth ;
var htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize =htmlwidth/20+'px';
console.log(htmlwidth);
</script>
高清屏会要进行一个缩放,但是坑遇到的概率小。
第四节: 首页布局
- 首页路由的设置
- 快速建立首页(Vue VSCode snippets)
- Vant布局的方法介绍
(1)搜索并安装Vue VSCode snippets插件,提高代码的书写速度。(插件安装完毕后需重新加载,否则无法生效。)
如使用vbase就能创建一个基础模板,vdata创建data模块
(2)登录easy-mock https://www.easy-mock.com/,创建模拟接口,数据附于文末。
easy-mock可用于前端自己模拟数据。模拟接口创建完毕,可以复制接口地址,用于请求。
(3)安装axios(axios 与后端交互数据)
npm install axios --save
(4)axios请求
axios({
url:'https://www.easy-mock.com/mock/5bf3c69151173f3d71de3a27/store/index',
method: 'get',
})
.then(response=>{
console.log(response);
})
.catch(error=>{
console.log(error);
})
附: mock模拟数据
{
"data": {
"advertesPicture": {
"PICTURE_ADDRESS": "http://images.baixingliangfan.cn/advertesPicture/20180404/20180404085441_850.gif"
},
"floor3": [{
"goodsId": "ae4e71807a91460792670b657fa3ed3a",
"image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407181423_15.jpg"
}, {
"goodsId": "2a398a5048074fc3b36bc8026bf9dc65",
"image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407181216_8263.jpg"
}, {
"goodsId": "b37577ce45ee4cc6ba162959933dbac8",
"image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407181247_7554.jpg"
}, {
"goodsId": "43912e1f7b7842cab40fcdee9dbe8758",
"image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407181316_6196.jpg"
}, {
"goodsId": "98922617593e44c9a5880329a4cf0fd0",
"image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407181348_4054.jpg"
}],
"floor2": [{
"goodsId": "d0fabe0c966043cb8313fa55de9c555b",
"image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180547_3253.jpg"
}, {
"goodsId": "36360da2ec084316a100c2df1c714e37",
"image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180631_4071.jpg"
}, {
"goodsId": "eb47b495b65d42b8a1fc5823dcd5589c",
"image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180705_7181.jpg"
}, {
"goodsId": "7f6e857e83b240508836717c8764a0b0",
"image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180736_2822.jpg"
}, {
"goodsId": "c7cb656294ea48d3b224ddee5fdd9647",
"image": "http://images.baixingliangfan.cn/homeFloor/20180408/20180408081756_7181.jpg"
}],
"floorName": {
"floor3": "营养奶品",
"floor2": "新鲜水果",
"floor1": "休闲食品"
},
"floor1": [{
"goodsId": "e53c046465204d4fb8f22431cc2807e7",
"image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180109_6316.jpg"
}, {
"goodsId": "f36f6dd8f62247d5846eaa9b3f269cbc",
"image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180151_6180.jpg"
}, {
"goodsId": "72a3ec63956347a2a9f113589fe79c03",
"image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180217_3970.jpg"
}, {
"goodsId": "a632bfb3818541da8e6843d6d0dbd917",
"image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180257_2378.jpg"
}, {
"goodsId": "6694401a30a940f6ae437d541b7fd26d",
"image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180427_8557.jpg"
}],
"category": [{
"mallCategoryId": "1",
"mallCategoryName": "新鲜水果",
"bxMallSubDto": [{
"mallSubId": "2c9f6c946016ea9b016016f79c8e0000",
"mallCategoryId": "1",
"mallSubName": "热带水果",
"comments": null
}, {
"mallSubId": "2c9f6c94608ff843016095163b8c0177",
"mallCategoryId": "1",
"mallSubName": "时令水果",
"comments": null
}, {
"mallSubId": "402880e86016d1b5016016db9b290001",
"mallCategoryId": "1",
"mallSubName": "苹果/梨",
"comments": null
}, {
"mallSubId": "402880e86016d1b5016016dbff2f0002",
"mallCategoryId": "1",
"mallSubName": "柑橘橙柚",
"comments": null
}],
"comments": null,
"image": "http://images.baixingliangfan.cn/firstCategoryPicture/20180408/20180408111959_2837.png"
}, {
"mallCategoryId": "2",
"mallCategoryName": "中外名酒",
"bxMallSubDto": [{
"mallSubId": "2c9f6c9460337d540160337fefd60000",
"mallCategoryId": "2",
"mallSubName": "白酒",
"comments": ""
}, {
"mallSubId": "402880e86016d1b5016016e083f10010",
"mallCategoryId": "2",
"mallSubName": "啤酒",
"comments": ""
}, {
"mallSubId": "402880e86016d1b5016016df1f92000c",
"mallCategoryId": "2",
"mallSubName": "葡萄酒",
"comments": ""
}, {
"mallSubId": "2c9f6c94621970a801626a40feac0178",
"mallCategoryId": "2",
"mallSubName": "洋酒",
"comments": null
}, {
"mallSubId": "2c9f6c94621970a801626a412c240179",
"mallCategoryId": "2",
"mallSubName": "海外直采",
"comments": null
}],
"comments": null,
"image": "http://images.baixingliangfan.cn/firstCategoryPicture/20180408/20180408112010_4489.png"
}, {
"mallCategoryId": "3",
"mallCategoryName": "营养奶品",
"bxMallSubDto": [{
"mallSubId": "402880e86016d1b5016016e135440011",
"mallCategoryId": "3",
"mallSubName": "鲜奶",
"comments": ""
}, {
"mallSubId": "402880e86016d1b5016016e171cc0012",
"mallCategoryId": "3",
"mallSubName": "酸奶",
"comments": ""
}, {
"mallSubId": "402880e86016d1b5016016e240e60013",
"mallCategoryId": "3",
"mallSubName": "乳酸菌",
"comments": ""
}, {
"mallSubId": "2c9f6c9460a03c0c0160a041ab1d0000",
"mallCategoryId": "3",
"mallSubName": "奶油奶酪",
"comments": null
}],
"comments": null,
"image": "http://images.baixingliangfan.cn/firstCategoryPicture/20180408/20180408113102_1595.png"
}, {
"mallCategoryId": "5",
"mallCategoryName": "食品饮料",
"bxMallSubDto": [{
"mallSubId": "2c9f6c94609a62be0160a02d1dc20021",
"mallCategoryId": "5",
"mallSubName": "饼干糕点",
"comments": ""
}, {
"mallSubId": "402880e86016d1b5016016e4dca2001e",
"mallCategoryId": "5",
"mallSubName": "休闲小食",
"comments": ""
}, {
"mallSubId": "402880e86016d1b5016016e51380001f",
"mallCategoryId": "5",
"mallSubName": "糖果巧克力",
"comments": ""
}, {
"mallSubId": "2c9f6c94609a62be0160a02de70e0022",
"mallCategoryId": "5",
"mallSubName": "冲调饮品",
"comments": ""
}, {
"mallSubId": "2c9f6c94626a435f01626a4a7f590000",
"mallCategoryId": "5",
"mallSubName": "进口食品",
"comments": ""
}, {
"mallSubId": "402880e86016d1b5016016e4ac16001d",
"mallCategoryId": "5",
"mallSubName": "坚果炒货",
"comments": null
}, {
"mallSubId": "402880e86016d1b5016016e549710020",
"mallCategoryId": "5",
"mallSubName": "饮用水",
"comments": ""
}, {
"mallSubId": "402880e86016d1b5016016e656c50022",
"mallCategoryId": "5",
"mallSubName": "果蔬汁",
"comments": null
}, {
"mallSubId": "2c9f6c946016f86f01601709335d0000",
"mallCategoryId": "5",
"mallSubName": "乳制饮料",
"comments": null
}, {
"mallSubId": "2c9f6c946077476a0160781eb392000d",
"mallCategoryId": "5",
"mallSubName": "咖啡茶饮",
"comments": null
}, {
"mallSubId": "402880e86016d1b5016016e62bbd0021",
"mallCategoryId": "5",
"mallSubName": "碳酸饮料",
"comments": null
}, {
"mallSubId": "2c9f6c946077476a0160781f6d8c000e",
"mallCategoryId": "5",
"mallSubName": "功能饮料",
"comments": null
}],
"comments": null,
"image": "http://images.baixingliangfan.cn/firstCategoryPicture/20180408/20180408113048_1276.png"
}, {
"mallCategoryId": "4",
"mallCategoryName": "个人护理",
"bxMallSubDto": [{
"mallSubId": "2c9f6c94621970a801626a35cb4d0175",
"mallCategoryId": "4",
"mallSubName": "进口护理",
"comments": null
}, {
"mallSubId": "2c9f6c94621970a801626a363e5a0176",
"mallCategoryId": "4",
"mallSubName": "口腔护理",
"comments": null
}, {
"mallSubId": "2c9f6c94621970a801626a3770620177",
"mallCategoryId": "4",
"mallSubName": "特殊用纸",
"comments": null
}],
"comments": null,
"image": "http://images.baixingliangfan.cn/firstCategoryPicture/20180408/20180408112053_8191.png"
}],
"slides": [{
"image": "http://images.baixingliangfan.cn/advertesPicture/20180407/20180407175040_1780.jpg",
"goodsId": "b1195296679f482aa7d54d95ac2b4a94"
}, {
"image": "http://images.baixingliangfan.cn/advertesPicture/20180407/20180407175111_9509.jpg",
"goodsId": "da34d6f381464a219b37a9ac0ad579e8"
}, {
"image": "http://images.baixingliangfan.cn/advertesPicture/20180407/20180407175142_6947.jpg",
"goodsId": "ad176e397858448a854dc50371334faf"
}],
"buyTime": "08:00:00-20:30:00",
"hotGoods": [{
"mallPrice": 3.90,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415120500_6504.jpg",
"goodsId": "fb0f913950944b66a97ae262ad14609a",
"price": 3.90,
"name": "美汁源果粒奶优水果饮料蜜桃450ml/瓶"
}, {
"mallPrice": 4.50,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415115202_8432.jpg",
"goodsId": "775e575ce28a4f89b1dfe2c99eb08ae7",
"price": 4.50,
"name": "阿华田麦芽乳饮品牛奶味250mL/盒"
}, {
"mallPrice": 3.70,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415121351_6470.jpg",
"goodsId": "e68d5293c0a04e99a3480aaaad101362",
"price": 3.70,
"name": "养元香浓六个核桃240ml/瓶"
}, {
"mallPrice": 6.50,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415120956_8491.jpg",
"goodsId": "7c377350cc9342edba600f3f6a548bd0",
"price": 6.50,
"name": "名屋木瓜牛乳340ml/瓶"
}, {
"mallPrice": 3.90,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415120411_5740.jpg",
"goodsId": "f8c3f62810aa4ce781d14a885333a2b8",
"price": 3.90,
"name": "美汁源果粒奶优草莓味450ml/瓶"
}, {
"mallPrice": 7.50,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415120720_7233.jpg",
"goodsId": "85d4fece907a4170b4b27a22c035321d",
"price": 7.50,
"name": "名屋醇豆浆饮料485ml/瓶"
}, {
"mallPrice": 5.00,
"image": "http://images.baixingliangfan.cn/compressedPic/20180103161335_9324.jpg",
"goodsId": "9abd33f0d2e4496f9c023a1dcfbfe2ad",
"price": 6.30,
"name": "李子园甜牛奶乳饮料450ml/瓶"
}, {
"mallPrice": 5.00,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415120239_7917.jpg",
"goodsId": "1258c2fd52844f679fad1ebf24764082",
"price": 5.00,
"name": "李子园草莓风味乳饮料450ml/瓶"
}, {
"mallPrice": 6.30,
"image": "http://images.baixingliangfan.cn/compressedPic/20171224082006_6602.jpg",
"goodsId": "bd25fd5d128e41fd9a737e99f75f92f8",
"price": 8.50,
"name": "娃哈哈AD钙奶220ml*4/条"
}, {
"mallPrice": 6.00,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415121537_4372.jpg",
"goodsId": "cfbe6ec3101a414f9563a8c6624aec08",
"price": 6.00,
"name": "一榨鲜绿豆汁300ml/瓶"
}, {
"mallPrice": 5.00,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415120109_275.jpg",
"goodsId": "e9808eb0d3574c11971e38f75076f1a4",
"price": 5.00,
"name": "李子园朱古力风味乳饮料450ml/瓶"
}, {
"mallPrice": 7.50,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415120857_4885.jpg",
"goodsId": "a5d1130de39f434facc6d35514cea053",
"price": 7.50,
"name": "名屋黑豆浆饮料485ml/瓶"
}, {
"mallPrice": 4.50,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415114959_7217.jpg",
"goodsId": "06130c91497b4806bf2b3e538814bb66",
"price": 4.50,
"name": "阿华田麦芽乳饮品高钙味250mL/盒"
}, {
"mallPrice": 6.50,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415121108_2001.jpg",
"goodsId": "b75e437adc0540c6b30516537d759122",
"price": 6.50,
"name": "名屋香蕉牛乳340ml/瓶"
}, {
"mallPrice": 3.90,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415120608_2319.jpg",
"goodsId": "0d51d2863bdc485688c2fee2a165bb51",
"price": 3.90,
"name": "美汁源果粒奶优原味450ml/瓶"
}, {
"mallPrice": 7.40,
"image": "http://images.baixingliangfan.cn/compressedPic/20171224082144_8430.jpg",
"goodsId": "85173b3ce7a24a44ac2ed960a3e431fc",
"price": 9.00,
"name": "旺仔牛奶125ml*4/条"
}, {
"mallPrice": 68.00,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415122117_1031.jpg",
"goodsId": "99e37959ae22433da7bb378a2d24c19c",
"price": 68.00,
"name": "同福阿胶粥300g/箱"
}, {
"mallPrice": 3.50,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415122256_2373.jpg",
"goodsId": "068fe09cf2a849b4b8c7ce3fea734072",
"price": 3.50,
"name": "银鹭桂圆莲子八宝粥360g/瓶"
}, {
"mallPrice": 14.50,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415121432_880.jpg",
"goodsId": "8172961149434b51865612820c7b8891",
"price": 14.50,
"name": "椰树牌椰汁饮料1L/瓶"
}, {
"mallPrice": 4.50,
"image": "http://images.baixingliangfan.cn/compressedPic/20180415115515_7254.jpg",
"goodsId": "a870459dfbba4df8af52e52aa6d0c426",
"price": 4.50,
"name": "豆本豆原味豆奶250ml/盒"
}],
"recommend": [{
"image": "http://images.baixingliangfan.cn/compressedPic/20180411083404_6619.jpg",
"mallPrice": 16.80,
"goodsId": "238bc2e023844769a6b67d9a4c04b2ea",
"price": 16.80,
"goodsName": "纳美小苏打源生护龈牙膏3010/支"
}, {
"image": "http://images.baixingliangfan.cn/compressedPic/20180411085355_2725.jpg",
"mallPrice": 9.50,
"goodsId": "245fc7d457e5454481db9620f0f9881f",
"price": 9.50,
"goodsName": "ABCK25超吸棉柔护垫22片/包"
}, {
"image": "http://images.baixingliangfan.cn/compressedPic/20180413093730_3138.jpg",
"mallPrice": 6.00,
"goodsId": "24afea564e5248b5a2bc59da95f09911",
"price": 6.00,
"goodsName": "果倍爽橙汁饮料330ml/瓶"
}, {
"image": "http://images.baixingliangfan.cn/compressedPic/20180409155457_3302.jpg",
"mallPrice": 109.00,
"goodsId": "418fc60784d04e71beffe1ce5174c947",
"price": 109.00,
"goodsName": "睿嫣白檀香护发素500ml/瓶"
}, {
"image": "http://images.baixingliangfan.cn/compressedPic/20180412173646_7050.jpg",
"mallPrice": 4.00,
"goodsId": "4ae4e2e2c1df45308be5011a97aae537",
"price": 4.00,
"goodsName": "乐百氏脉动芒果味600ml/瓶"
}, {
"image": "http://images.baixingliangfan.cn/compressedPic/20180413142444_1480.jpg",
"mallPrice": 6.90,
"goodsId": "4cf7744443f94557b7c6ad37dca9c4db",
"price": 6.90,
"goodsName": "农夫山泉NFC橙汁100%300ml/瓶"
}, {
"image": "http://images.baixingliangfan.cn/compressedPic/20180411084437_6209.jpg",
"mallPrice": 8.60,
"goodsId": "66074cd2d8464dcc9b2d7fbef5b417d9",
"price": 8.60,
"goodsName": "七度空间少女棉超薄超长夜用卫生巾8片/包"
}, {
"image": "http://images.baixingliangfan.cn/compressedPic/20180407172335_1082.jpg",
"mallPrice": 15.00,
"goodsId": "6694401a30a940f6ae437d541b7fd26d",
"price": 15.00,
"goodsName": "爱莲巧牛奶巧克力100g/块"
}, {
"image": "http://images.baixingliangfan.cn/compressedPic/20180407172544_4503.jpg",
"mallPrice": 9.90,
"goodsId": "a632bfb3818541da8e6843d6d0dbd917",
"price": 9.90,
"goodsName": "Gemez小鸡干脆面(烧烤鸡肉味)90g/袋"
}, {
"image": "http://images.baixingliangfan.cn/compressedPic/20180407173221_2015.jpg",
"mallPrice": 8.00,
"goodsId": "ad176e397858448a854dc50371334faf",
"price": 8.00,
"goodsName": "单身狗粮地中海盐味薯片 71g/袋"
}, {
"image": "http://images.baixingliangfan.cn/compressedPic/20180413091557_6636.jpg",
"mallPrice": 6.50,
"goodsId": "af117ed90b624318914fd4b42001216c",
"price": 6.50,
"goodsName": "可口可乐2L/瓶"
}, {
"image": "http://images.baixingliangfan.cn/compressedPic/20180413142955_5219.jpg",
"mallPrice": 6.90,
"goodsId": "bdd9bd7f131843c59c7f9aabdb36f069",
"price": 6.90,
"goodsName": "农夫山泉NFC苹果香蕉汁100%300ml/瓶"
}, {
"image": "http://images.baixingliangfan.cn/compressedPic/20180410091738_4529.jpg",
"mallPrice": 138.00,
"goodsId": "d6e15b84c1cd45138d9493c72333f7ce",
"price": 138.00,
"goodsName": "可米小子象牙松子罐装262g/罐"
}, {
"image": "http://images.baixingliangfan.cn/compressedPic/20180407171943_7260.jpg",
"mallPrice": 29.80,
"goodsId": "e53c046465204d4fb8f22431cc2807e7",
"price": 29.80,
"goodsName": "费罗伦珍珠水果糖(狮子座)240g/盒"
}, {
"image": "http://images.baixingliangfan.cn/compressedPic/20180412174207_1023.jpg",
"mallPrice": 4.00,
"goodsId": "e7ebc6153924459287468104768bee00",
"price": 4.00,
"goodsName": "农夫山泉水葡萄果味饮料530ml/瓶"
}, {
"image": "http://images.baixingliangfan.cn/compressedPic/20180407171519_1489.jpg",
"mallPrice": 9.90,
"goodsId": "f36f6dd8f62247d5846eaa9b3f269cbc",
"price": 11.50,
"goodsName": "捷客每日红提味曲奇120g/盒"
}, {
"image": "http://images.baixingliangfan.cn/compressedPic/20171225110825_6758.jpg",
"mallPrice": 26.00,
"goodsId": "fa750a815cfd46c3ba468db800f0e370",
"price": 28.00,
"goodsName": "青芒1.6kg/盒"
}],
"sendFee": {
"chargeStartFee": "59.00",
"deliveryFee": "3.00"
}
},
"page": null,
"limit": null
}