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

作者: 图恩分类: 编程开发阅读: 472发布时间： 2021-12-23 06:32:08
不同设备适配

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

    <script>
      // 设备屏幕的宽度
      var width = document.documentElement.clientWidth || document.body.clientWidth
      var ratio = width / 375
      var fontSize = 100 * ratio
      // 获得第一个html标签
      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px'
    </script>

整体代码如下：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script>
      // 设备屏幕的宽度
      var width = document.documentElement.clientWidth || document.body.clientWidth
      var ratio = width / 375
      var fontSize = 100 * ratio
      // 获得第一个html标签
      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px'
    </script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without
        JavaScript enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
项目上线

新建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}"
}]

本文章由javascript技术分享原创和收集

本文由作者创作或收集，内容引用如有问题请联系站长处理。

发表评论 (审核通过后显示评论)：

© 基于nuxt
粤ICP备20013202号
© 2020-2024 javascript技术分享