Deps: Support viewport layout & browser prefix

cwandev · cwandev · commit 1974fb476a26 · 2022-05-29T23:25:55.000+08:00
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,5 @@
+> 1%
+last 2 versions
+not dead
+chrome > 40
+not ie 11
diff --git a/index.html b/index.html
@@ -1,12 +1,11 @@
 <!DOCTYPE html>
-<html lang="zh-cmn-Hans">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta name="theme-color" content="#ffffff" />
+    <meta name="description" content="The basic Vue3 template for Mobile、PC、IPad, use easy and efficiency." />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"/>
     <link rel="icon" href="/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
-    />
     <title>Vue3 Vant Mobile</title>
   </head>
   <body>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-vant-mobile",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.2.0",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
@@ -15,6 +15,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.3",
+    "less": "^4.1.2",
+    "postcss-preset-env": "^7.6.0",
+    "postcss-px-to-viewport": "^1.1.1",
     "typescript": "^4.5.4",
     "vite": "^2.9.9",
     "vite-plugin-style-import": "1.4.1",
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,9 @@
+// postcss.config.js
+module.exports = {
+  plugins: {
+    'postcss-preset-env': {},
+    'postcss-px-to-viewport': {
+      viewportWidth: 375
+    }
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -7,7 +7,7 @@ const count = ref(0)
 </script>
 
 <template>
-  <h1>{{ msg }}</h1>
+  <h1 class="title">{{ msg }}</h1>
   <van-button type="primary" @click="count++">count is: {{ count }}</van-button>
 </template>
 
@@ -21,6 +21,10 @@ label {
   font-weight: bold;
 }
 
+.title {
+  user-select: none;
+}
+
 code {
   background-color: #eee;
   padding: 2px 4px;
diff --git a/src/main.ts b/src/main.ts
@@ -1,11 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import { createPinia } from 'pinia'
-import { Button } from 'vant'
 
 // Vant 桌面端适配
 import '@vant/touch-emulator'
-
+import { Button } from 'vant'
 
 createApp(App)
   .use(createPinia())
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import styleImport, { VantResolve } from 'vite-plugin-style-import'
+import pxtoviewport from 'postcss-px-to-viewport'
 
 // https://vitejs.dev/config/
 export default defineConfig({
diff --git a/yarn.lock b/yarn.lock
