feat: 升级vue2.7和修改移动端适配方案

.postcssrc.js

@@ -1,13 +1,31 @@
 // https://github.com/michael-ciniawsky/postcss-load-config
+const path = require('path')
+
 module.exports = {
   plugins: {
-    autoprefixer: {
+    autoprefixer: {},
-      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
+    'postcss-px-to-viewport': {
-    },
+      unitToConvert: 'px', // 要转化的单位
-    'postcss-pxtorem': {
+      viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
-      rootValue: 37.5,
+      viewportHeight: 812, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
-      propList: ['*']
+      unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数
-      //selectorBlackList: ['van-']
+      viewportUnit: 'vw', //指定需要转换成的视窗单位，建议使用vw
+      selectorBlackList: [
+        '.van-cell',
+        '.van-button',
+        '.van-skeleton',
+        '.van-toast',
+        '.van-popup__close-icon',
+        '.van-field',
+        '.van-dropdown-menu',
+        '.van-radio',
+        '.van-swipe',
+        '.van-list',
+        '.van-dialog',
+        '.van-tabbar'
+      ], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
+      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
+      mediaQuery: false // 允许在媒体查询中转换`px`
     }
   }
 }

package.json

@@ -12,36 +12,35 @@
     "deps": "yarn upgrade-interactive --latest"
   },
   "dependencies": {
+    "amfe-flexible": "^2.2.1",
     "axios": "^0.27.2",
-    "core-js": "^3.8.3",
+    "core-js": "^3.23.3",
-    "lib-flexible": "^0.3.2",
     "regenerator-runtime": "^0.13.5",
-    "vant": "^2.10.2",
+    "vant": "^2.12.48",
-    "vue": "^2.6.14",
+    "vue": "^2.7.4",
-    "vue-router": "^3.5.1",
+    "vue-router": "^3.5.2",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
+    "@babel/core": "^7.18.6",
-    "@babel/eslint-parser": "^7.12.16",
+    "@babel/eslint-parser": "^7.18.2",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "babel-eslint": "^10.1.0",
-    "babel-plugin-import": "^1.13.0",
+    "babel-plugin-import": "^1.13.5",
     "babel-plugin-transform-remove-console": "^6.9.4",
-    "eslint": "^8.18.0",
+    "eslint": "^8.19.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.1.1",
+    "eslint-plugin-vue": "^9.2.0",
-    "postcss-pxtorem": "^6.0.0",
+    "postcss-px-to-viewport": "^1.1.1",
-    "prettier": "^2.4.1",
+    "prettier": "^2.7.1",
-    "sass": "^1.32.7",
+    "sass": "^1.53.0",
-    "sass-loader": "^13.0.1",
+    "sass-loader": "^13.0.2",
     "script-ext-html-webpack-plugin": "^2.1.4",
-    "vue-template-compiler": "^2.6.14",
     "webpack-bundle-analyzer": "^4.5.0"
   }
 }

src/main.js

@@ -17,7 +17,7 @@ import '@/plugins/vant'
 // 引入全局样式
 import '@/assets/css/index.scss'
 // 移动端适配
-import 'lib-flexible/flexible.js'
+import 'amfe-flexible'
 
 // filters
 import './filters'

src/views/home/about.vue

@@ -58,6 +58,7 @@ export default {
   }
 }
 </script>
+
 <style lang="scss">
 .about-container {
   /* 你的命名空间 */

src/views/home/index.vue

@@ -10,11 +10,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
-export default {
+import { ref } from 'vue'
-  data() {
+
-    return {
+let list = ref([
-      list: [
   'Vue-cli4',
   '配置多环境变量',
   'VantUI 组件按需加载',
@@ -32,17 +31,9 @@ export default {
   'splitChunks 单独打包第三方模块',
   '添加 IE 兼容',
   'Eslint+Pettier 统一开发规范'
-      ]
+])
-    }
-  },
-
-  computed: {},
-
-  mounted() {},
-
-  methods: {}
-}
 </script>
+
 <style lang="scss" scoped>
 .index-container {
   .warpper {
@@ -50,7 +41,7 @@ export default {
     background: #fff;
     .demo-home__title {
       margin: 0 0 6px;
-      font-size: 32px;
+      font-size: 64px;
       .demo-home__title img,
       .demo-home__title span {
         display: inline-block;