fix:vue3

15.vue3/vue_project1/package-lock.json

@@ -8,6 +8,7 @@
       "name": "vue_project1",
       "version": "0.0.0",
       "dependencies": {
+        "vite-plugin-vue-setup-extend": "^0.4.0",
         "vue": "^3.5.13"
       },
       "devDependencies": {
@@ -498,7 +499,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -515,7 +515,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -532,7 +531,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -549,7 +547,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -566,7 +563,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -583,7 +579,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -600,7 +595,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -617,7 +611,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -634,7 +627,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -651,7 +643,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -668,7 +659,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -685,7 +675,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -702,7 +691,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -719,7 +707,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -736,7 +723,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -753,7 +739,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -770,7 +755,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -787,7 +771,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -804,7 +787,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -821,7 +803,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -838,7 +819,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -855,7 +835,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -872,7 +851,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -889,7 +867,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -906,7 +883,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1005,7 +981,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1019,7 +994,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1033,7 +1007,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1047,7 +1020,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1061,7 +1033,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1075,7 +1046,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1089,7 +1059,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1103,7 +1072,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1117,7 +1085,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1131,7 +1098,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1145,7 +1111,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1159,7 +1124,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1173,7 +1137,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1187,7 +1150,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1201,7 +1163,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1215,7 +1176,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1229,7 +1189,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1243,7 +1202,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1257,7 +1215,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1271,7 +1228,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1309,14 +1265,13 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.7.tgz",
       "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/node": {
       "version": "22.14.1",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-22.14.1.tgz",
       "integrity": "sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -1921,7 +1876,6 @@
       "version": "0.25.2",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.25.2.tgz",
       "integrity": "sha512-16854zccKPnC+toMywC+uKNeYSv+/eXkevRAfwRD/G9Cleq66m8XFIrigkbvauLLlCfDL45Q2cWegSg53gGBnQ==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -2005,7 +1959,6 @@
       "version": "6.4.4",
       "resolved": "https://registry.npmmirror.com/fdir/-/fdir-6.4.4.tgz",
       "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
-      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "picomatch": "^3 || ^4"
@@ -2051,7 +2004,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -2549,7 +2501,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.2.tgz",
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -2640,7 +2591,6 @@
       "version": "4.40.0",
       "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.40.0.tgz",
       "integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.7"
@@ -2772,6 +2722,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
+      "license": "MIT"
+    },
     "node_modules/speakingurl": {
       "version": "14.0.1",
       "resolved": "https://registry.npmmirror.com/speakingurl/-/speakingurl-14.0.1.tgz",
@@ -2812,7 +2769,6 @@
       "version": "0.2.13",
       "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.13.tgz",
       "integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.4.4",
@@ -2853,7 +2809,7 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/unicorn-magic": {
@@ -2914,7 +2870,6 @@
       "version": "6.3.2",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-6.3.2.tgz",
       "integrity": "sha512-ZSvGOXKGceizRQIZSz7TGJ0pS3QLlVY/9hwxVh17W3re67je1RKYzFHivZ/t0tubU78Vkyb9WnHPENSBCzbckg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
@@ -3073,6 +3028,28 @@
         "vite": "^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0"
       }
     },
+    "node_modules/vite-plugin-vue-setup-extend": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz",
+      "integrity": "sha512-WMbjPCui75fboFoUTHhdbXzu4Y/bJMv5N9QT9a7do3wNMNHHqrk+Tn2jrSJU0LS5fGl/EG+FEDBYVUeWIkDqXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-sfc": "^3.2.29",
+        "magic-string": "^0.25.7"
+      },
+      "peerDependencies": {
+        "vite": ">=2.0.0"
+      }
+    },
+    "node_modules/vite-plugin-vue-setup-extend/node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "license": "MIT",
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
     "node_modules/vscode-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/vscode-uri/-/vscode-uri-3.1.0.tgz",

15.vue3/vue_project1/package.json

@@ -11,6 +11,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {

15.vue3/vue_project1/src/App.vue

@@ -2,12 +2,14 @@
   <div>
     <Demo1/>
     <Demo2/>
+    <Demo32/>
   </div>
 </template>
 
 <script>
-import Demo1 from "./components/Demo1.vue";
+import Demo1 from "./components/Demo167.vue";
 import Demo2 from "./components/Demo2.vue";
+import Demo32 from "./components/Demo36.vue";
 export default {
   // 为什么data是函数
   // data为什么不是对象
@@ -20,7 +22,8 @@ export default {
   // }
   components: {
     Demo1,
-    Demo2
+    Demo2,
+    Demo32
   },
 };
 </script>

15.vue3/vue_project1/src/components/Demo1.vue

@@ -1,22 +0,0 @@
-<template>
-    <div>
-      {{msg}}
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    // 为什么data是函数
-    // data为什么不是对象
-    // v-model
-    // vue3中可以使用vue2写法
-    data() {
-      return{
-        msg:"你好"
-      }
-    }
-  };
-  </script>
-  
-  <style lang="scss" scoped></style>
-  

15.vue3/vue_project1/src/components/Demo167.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    {{ msg }}
+    <button @click="showName">点击</button>
+  </div>
+</template>
+
+<script>
+export default {
+  // 为什么data是函数
+  // data为什么不是对象
+  // v-model
+  // vue3中可以使用vue2写法
+  name:"Demo43",
+  data() {
+    return {
+      msg: "你好",
+    };
+  },
+  methods:{
+    showName() {
+        console.log(this.msg)
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

15.vue3/vue_project1/src/components/Demo2.vue

@@ -1,20 +1,25 @@
 <template>
   <div>
-    {{ msg }}
+    {{ name }}
+    <button @click="showName">点击</button>
   </div>
 </template>
 
 <script>
 export default {
-  // 为什么data是函数
-  // data为什么不是对象
-  // v-model
-  // vue3中可以使用vue2写法
-  data() {
-    return {
-      msg: "第二个",
-    };
-  },
+    // setup 不支持this
+    // vue新增的option 所有的的组合都再次函数内调用 只在初始化的时候执行一次 vue3新增的语法糖
+    setup(){
+        let name = '孙悟空';
+
+        function showName() {
+            console.log(name)
+        }
+
+        return {name,showName}
+
+    }
+
 };
 </script>
 

15.vue3/vue_project1/src/components/Demo36.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    组件三
+    <h3>{{ msg }}</h3>
+  </div>
+</template>
+
+<script setup name="Flower">
+let msg = "今天天气好";
+</script>
+<style></style>

15.vue3/vue_project1/vite.config.ts

@@ -3,12 +3,13 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
-
+import VueSetupExtend from 'vite-plugin-vue-setup-extend';
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     vueDevTools(),
+    VueSetupExtend()
   ],
   resolve: {
     alias: {