保存进度！

code/web/car_dealer/.hintrc

@@ -8,6 +8,15 @@
       {
         "label": "off"
       }
+    ],
+    "compat-api/css": [
+      "default",
+      {
+        "ignore": [
+          "-webkit-text-size-adjust"
         ]
       }
+    ],
+    "highest-available-document-mode": "off"
+  }
 }

code/web/car_dealer/css/kane.css

@@ -1,3 +1,14 @@
+/*
+ * @Author: Kane
+ * @Date: 2022-10-12 08:49:14
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-10-20 16:45:14
+ * @FilePath: \car_dealer\css\kane.css
+ * @Description: vue学习用的样式表！
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+ */
+
 html {
     --backupground-color: #f7f7f7;
     --btn-color-blue: #307dbe;
@@ -9,17 +20,20 @@ html {
 
 #root,
 #app {
-    height: 100vh;
-    width: 100vw;
-    position: fixed;
     padding: 50px;
-    /* font-size: 0; */
-    overflow: auto;
 }
 
 #root,
-#app * + * {
+#app *+* {
     margin-top: 15px;
+    text-align: center;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 
 hr {
@@ -43,12 +57,10 @@ button {
     border: none;
     border-radius: 0.25em;
     font-size: 1.5rem;
+    text-align: center;
 }
 
-button + button {
+/* 用于按钮点击时样式切换。 */
-    margin-left: 0.5em;
-}
-
 button:active {
     background-color: var(--btn-font-color);
     color: var(--btn-color-red);

code/web/car_dealer/css/normalize.css

@@ -9,8 +9,10 @@
  */
 
 html {
-  line-height: 1.15; /* 1 */
+  line-height: 1.15;
-  -webkit-text-size-adjust: 100%; /* 2 */
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
 }
 
 /* Sections
@@ -51,9 +53,12 @@ h1 {
  */
 
 hr {
-  box-sizing: content-box; /* 1 */
+  box-sizing: content-box;
-  height: 0; /* 1 */
+  /* 1 */
-  overflow: visible; /* 2 */
+  height: 0;
+  /* 1 */
+  overflow: visible;
+  /* 2 */
 }
 
 /**
@@ -62,8 +67,10 @@ hr {
  */
 
 pre {
-  font-family: monospace, monospace; /* 1 */
+  font-family: monospace, monospace;
-  font-size: 1em; /* 2 */
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
 }
 
 /* Text-level semantics
@@ -83,9 +90,12 @@ a {
  */
 
 abbr[title] {
-  border-bottom: none; /* 1 */
+  border-bottom: none;
-  text-decoration: underline; /* 2 */
+  /* 1 */
-  text-decoration: underline dotted; /* 2 */
+  text-decoration: underline;
+  /* 2 */
+  text-decoration: underline dotted;
+  /* 2 */
 }
 
 /**
@@ -105,8 +115,10 @@ strong {
 code,
 kbd,
 samp {
-  font-family: monospace, monospace; /* 1 */
+  font-family: monospace, monospace;
-  font-size: 1em; /* 2 */
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
 }
 
 /**
@@ -162,10 +174,14 @@ input,
 optgroup,
 select,
 textarea {
-  font-family: inherit; /* 1 */
+  font-family: inherit;
-  font-size: 100%; /* 1 */
+  /* 1 */
-  line-height: 1.15; /* 1 */
+  font-size: 100%;
-  margin: 0; /* 2 */
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */
 }
 
 /**
@@ -174,7 +190,8 @@ textarea {
  */
 
 button,
-input { /* 1 */
+input {
+  /* 1 */
   overflow: visible;
 }
 
@@ -184,7 +201,8 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 
@@ -238,12 +256,18 @@ fieldset {
  */
 
 legend {
-  box-sizing: border-box; /* 1 */
+  box-sizing: border-box;
-  color: inherit; /* 2 */
+  /* 1 */
-  display: table; /* 1 */
+  color: inherit;
-  max-width: 100%; /* 1 */
+  /* 2 */
-  padding: 0; /* 3 */
+  display: table;
-  white-space: normal; /* 1 */
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */
 }
 
 /**
@@ -269,8 +293,10 @@ textarea {
 
 [type="checkbox"],
 [type="radio"] {
-  box-sizing: border-box; /* 1 */
+  box-sizing: border-box;
-  padding: 0; /* 2 */
+  /* 1 */
+  padding: 0;
+  /* 2 */
 }
 
 /**
@@ -288,8 +314,10 @@ textarea {
  */
 
 [type="search"] {
-  -webkit-appearance: textfield; /* 1 */
+  -webkit-appearance: textfield;
-  outline-offset: -2px; /* 2 */
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
 }
 
 /**
@@ -306,8 +334,10 @@ textarea {
  */
 
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
+  -webkit-appearance: button;
-  font: inherit; /* 2 */
+  /* 1 */
+  font: inherit;
+  /* 2 */
 }
 
 /* Interactive

code/web/car_dealer/vue/vue_01.html

@@ -0,0 +1,62 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-10-20 15:07:59
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-10-20 16:45:40
+ * @FilePath: \car_dealer\vue\vue_01.html
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<!DOCTYPE html>
+<html lang="en">
+
+<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" />
+    <title>vue3入门</title>
+    <link rel="stylesheet" href="../css/root.css" .css" />
+    <link rel="stylesheet" href="../css/normalize.css" />
+    <link rel="stylesheet" href="../css/kane.css" .css" />
+    <script src="../js/vue/vue.global.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <div class="content">
+            <h1>{{title}}</h1>
+            <h1>{{count}}</h1>
+            <button v-on:click="addCount()">计数器</button>
+            <button v-on:click="switchButton()">{{btn_title}}</button>
+        </div>
+    </div>
+</body>
+<script>
+    const app = {
+        data() {
+            return {
+                title: "vue3 入门！",
+                count: 0,
+                btn_title: "走你",
+                btn_switch: true,
+            };
+        },
+        methods: {
+            addCount() {
+                this.count++;
+            },
+            switchButton() {
+                this.btn_switch = !this.btn_switch;
+
+                this.btn_title = this.btn_switch ? "走你！" : "滚";
+            }
+        },
+    };
+
+    const vm = Vue.createApp(app);
+
+    vm.mount("#app");
+</script>
+
+</html>