【vue3.0】26.0 某东到家( 廿六)——不同设备适配和项目上线

不同设备适配

目前是针对普通手机的屏幕尺寸设计,如果需要适配比如平板电脑,等比例放大,需要进行设备配置。
修改public\index.html
只需要在title后面增加如下代码:

    

整体代码如下:



  
    
    
    
    
    <%= htmlWebpackPlugin.options.title %>
    
  
  
    
    
项目上线

新建vue.config.js

// 1. npm run build 打包代码
// 2. 把代码给后端
// 3. 后端把前端代码放入后端工程
// 4. 后端重启后端服务
// * 容易出问题的就是下面的配置
module.exports = {
  publicPath: '/moudong'
}
image.png

正在打包中:


image.png

打包完成:


image.png

然后把dist目录发给后端人员即可,由他们去发布。
image.png

到此,本项目学习课程全部结束,之后如有内容都是自己在巨人的肩膀上全新编写。

目前整个项目涉及的所有接口如下:

[{
  "name": "获取订单列表",
  "url": "/api/order",
  "method": "get",
  "on": true
}, {
  "name": "创建订单",
  "url": "/api/createOrder",
  "method": "post",
  "on": true
}, {
  "name": "查询商店的商品列表",
  "url": "/api/shop/:id/products",
  "method": "get",
  "on": true
}, {
  "name": "商店详情",
  "url": "/api/shop/:id",
  "method": "get",
  "on": true
}, {
  "name": "热门店铺",
  "url": "/api/user/hot_list",
  "method": "get",
  "on": true
}, {
  "name": "注册",
  "url": "/api/user/register",
  "method": "post",
  "on": true
}, {
  "name": "登录",
  "url": "/api/user/login",
  "method": "post",
  "on": true
}]

接口数据如下:

[{
  "delay": 0,
  "name": "获取订单列表",
  "method": "get",
  "url": "/api/order",
  "description": "返回商品的所有订单信息,用于前端展示",
  "on": 1,
  "create_time": "2021-12-02T08:45:54.000Z",
  "update_time": "2021-12-02T09:47:07.000Z",
  "project": 36763,
  "create_user": null,
  "folder_id": 0,
  "mock_rule": "{\r\n  \"code\": 200,\r\n  \"data\": [\r\n    {\r\n      \"address\": {\r\n        \"city\": \"北京\",\r\n        \"department\": \"xx小区\",\r\n        \"houseNumber\": \"门牌号\",\r\n        \"name\": \"张三\",\r\n        \"phone\": \"18012341234\"\r\n      },\r\n      \"shopId\": \"1\",\r\n      \"shopName\": \"某什么码1\",\r\n      \"isCanceled\": false,\r\n      \"products\": [\r\n        {\r\n          \"orderSales\": 5,\r\n          \"product\": {\r\n            \"name\": \"番茄250g/份\",\r\n            \"imgUrl\": \"/i18n/9_16/img/tomato.png\",\r\n            \"sales\": 10,\r\n            \"price\": 33.6\r\n          }\r\n        },\r\n        {\r\n          \"orderSales\": 10,\r\n          \"product\": {\r\n            \"name\": \"樱桃250g/份\",\r\n            \"imgUrl\": \"/i18n/9_16/img/cherry.png\",\r\n            \"sales\": 10,\r\n            \"price\": 79.6\r\n          }\r\n        },\r\n        {\r\n          \"orderSales\": 8,\r\n          \"product\": {\r\n            \"name\": \"帝王蟹250g/份\",\r\n            \"imgUrl\": \"/i18n/9_16/img/crab.png\",\r\n            \"sales\": 10,\r\n            \"price\": 159.6\r\n          }\r\n        },\r\n        {\r\n          \"orderSales\": 4,\r\n          \"product\": {\r\n            \"name\": \"橙子250g/份\",\r\n            \"imgUrl\": \"/i18n/9_16/img/orange.png\",\r\n            \"sales\": 10,\r\n            \"price\": 92.6\r\n          }\r\n        }\r\n      ]\r\n    }\r\n  ],\r\n  \"desc\": \"成功\"\r\n}\r\n"
}, {
  "delay": 0,
  "name": "创建订单",
  "method": "post",
  "url": "/api/createOrder",
  "description": null,
  "on": 1,
  "create_time": "2021-11-29T19:57:00.000Z",
  "update_time": "2021-11-29T20:10:42.000Z",
  "project": 36763,
  "create_user": null,
  "folder_id": 0,
  "mock_rule": "    /**\r\n     * 输入\r\n     * conten-type:json\r\n     * body:{\r\n       addressId:“xxx”//收货地址 id\r\n       shopId:\"\"//商店id\r\n       shopName:\"某什么码1\",\r\n       isCanceled:false,//订单是否被取消了\r\n       products:[\r\n       {\r\n         id:\"xxx\",//商品id\r\n         num:6//商品数量\r\n       }, \r\n       {\r\n         id:\"xxx\",//商品id\r\n         num:6//商品数量\r\n       },\r\n       ]\r\n     }\r\n     **/\r\n    {\r\n      \"code\": 200,\r\n      \"data\": {   _id: '1',},\r\n      \"desc\": \"成功\"\r\n    }"
}, {
  "delay": 0,
  "name": "查询商店的商品列表",
  "method": "get",
  "url": "/api/shop/:id/products",
  "description": "id:动态参数,即商店id\n?tab=all  tab(页面左侧tab),可作为query",
  "on": 1,
  "create_time": "2021-10-13T17:49:26.000Z",
  "update_time": "2021-10-15T12:44:40.000Z",
  "project": 36763,
  "create_user": null,
  "folder_id": 0,
  "mock_rule": "    {\r\n      \"code\": 200,\r\n      \"data\": [{\r\n          _id: '1',\r\n          name: '番茄250g/份',\r\n          imgUrl: '/i18n/9_16/img/tomato.png',\r\n          sales: 10,\r\n          price: 33.6,\r\n          oldPrice: 39.6\r\n        },\r\n        {\r\n          _id: '2',\r\n          name: '樱桃250g/份',\r\n          imgUrl: '/i18n/9_16/img/cherry.png',\r\n          sales: 10,\r\n          price: 79.6,\r\n          oldPrice: 59.6\r\n        },\r\n        {\r\n          _id: '3',\r\n          name: '帝王蟹250g/份',\r\n          imgUrl: '/i18n/9_16/img/crab.png',\r\n          sales: 10,\r\n          price: 159.6,\r\n          oldPrice: 149.6\r\n        },\r\n        {\r\n          _id: '4',\r\n          name: '橙子250g/份',\r\n          imgUrl: '/i18n/9_16/img/orange.png',\r\n          sales: 10,\r\n          price: 92.6,\r\n          oldPrice: 85.6\r\n        }\r\n      ],\r\n      \"desc\": \"成功\"\r\n    }"
}, {
  "delay": 300,
  "name": "商店详情",
  "method": "get",
  "url": "/api/shop/:id",
  "description": "id为动态参数,为商店店铺id",
  "on": 1,
  "create_time": "2021-07-19T04:34:47.000Z",
  "update_time": "2021-10-13T16:20:01.000Z",
  "project": 36763,
  "create_user": null,
  "folder_id": 0,
  "mock_rule": "{\r\n  \"code\": 200,\r\n  \"data\": {\r\n      id: '1',\r\n      name: '某什么玛1',\r\n      imgUrl: '/i18n/9_16/img/near.png',\r\n      sales: 200,\r\n      expressLimit: 0,\r\n      expressPrice: 5,\r\n      slogon: 'VIP尊享xx元减x元运费券(每月x张)'\r\n  },\r\n  \"desc\": \"成功\"\r\n}"
}, {
  "delay": 300,
  "name": "热门店铺",
  "method": "get",
  "url": "/api/user/hot_list",
  "description": "热门店铺",
  "on": 1,
  "create_time": "2021-07-17T14:54:21.000Z",
  "update_time": "2021-07-19T03:09:54.000Z",
  "project": 36763,
  "create_user": null,
  "folder_id": 0,
  "mock_rule": "{\r\n  code: 200,\r\n  data: [\r\n    {\r\n      id: '1',\r\n      name: '某什么玛1',\r\n      imgUrl: '/i18n/9_16/img/near.png',\r\n      sales: 1000,\r\n      expressLimit: 0,\r\n      expressPrice: 5,\r\n      slogon: 'VIP尊享xx元减x元运费券(每月x张)'\r\n    },\r\n    {\r\n      id: '2',\r\n      name: '某什么玛2',\r\n      imgUrl: '/i18n/9_16/img/near.png',\r\n      sales: 2000,\r\n      expressLimit: 0,\r\n      expressPrice: 5,\r\n      slogon: 'VIP尊享xx元减x元运费券(每月x张)'\r\n    },\r\n    {\r\n      id: '3',\r\n      name: '某什么玛3',\r\n      imgUrl: '/i18n/9_16/img/near.png',\r\n      sales: 200,\r\n      expressLimit: 0,\r\n      expressPrice: 5,\r\n      slogon: 'VIP尊享xx元减x元运费券(每月x张)'\r\n    },\r\n    {\r\n      id: '4',\r\n      name: '某什么玛4',\r\n      imgUrl: '/i18n/9_16/img/near.png',\r\n      sales: 100,\r\n      expressLimit: 0,\r\n      expressPrice: 5,\r\n      slogon: 'VIP尊享xx元减x元运费券(每月x张)'\r\n    }\r\n  ],\r\n  desc: '成功'\r\n}"
}, {
  "delay": 300,
  "name": "注册",
  "method": "post",
  "url": "/api/user/register",
  "description": "注册保存",
  "on": 1,
  "create_time": "2021-07-17T04:32:34.000Z",
  "update_time": "2021-07-17T14:40:09.000Z",
  "project": 36763,
  "create_user": null,
  "folder_id": 0,
  "mock_rule": "{\r\n  \"code\": 200,\r\n  \"data\": {\r\n  },\r\n  \"desc\": \"成功\"\r\n}"
}, {
  "delay": 300,
  "name": "登录",
  "method": "post",
  "url": "/api/user/login",
  "description": "登录验密",
  "on": 1,
  "create_time": "2021-07-16T15:28:29.000Z",
  "update_time": "2021-07-17T04:32:56.000Z",
  "project": 36763,
  "create_user": null,
  "folder_id": 0,
  "mock_rule": "{\r\n  \"code\": 200,\r\n  \"data\": {\r\n  \r\n  },\r\n  \"desc\": \"成功\"\r\n}"
}]

你可能感兴趣的:(【vue3.0】26.0 某东到家( 廿六)——不同设备适配和项目上线)