商城

package.json

@@ -10,16 +10,19 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "cube-ui": "^1.12.36",
+    "fastclick": "^1.0.6",
     "router": "^1.3.5",
     "vue": "^2.6.11",
+    "vue-lazyload": "^1.3.3",
     "vue-router": "^3.1.6",
-    "vuex": "^3.1.3"
+    "vuex": "^3.3.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.3.0",
     "@vue/cli-plugin-router": "~4.3.0",
     "@vue/cli-plugin-vuex": "~4.3.0",
     "@vue/cli-service": "~4.3.0",
+    "postcss-px-to-viewport": "^1.1.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "vue-cli-plugin-cube-ui": "~0.2.5",

postcss.config.js

@@ -0,0 +1,14 @@
+// module.exports = {
+//   plugins: {
+//     autoprefixer: {},
+//     'postcss-px-to-viewport': {
+//       viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
+//       viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
+//       unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
+//       viewportUnit: "vw",   //指定需要转换成的视窗单位，建议使用vw
+//       selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
+//       minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
+//       mediaQuery: false     // 允许在媒体查询中转换`px`
+//     }
+//   }
+// }

src/App.vue

@@ -40,4 +40,15 @@ export default {
 </script>
 <style>
 @import "./assets/css/normal.css";
+body {
+  width: 100%;
+  min-width: 320px;
+  max-width: 640px;
+  margin: 0 auto;
+  font-size: 14px;
+  font-family: -apple-system, Helvetica, sans-serif;
+  color: #666;
+  line-height: 1.5;
+  background-color: #f6f6f6;
+}
 </style>