vue3

vue3/my_project/package-lock.json

@@ -8,6 +8,7 @@
       "name": "my_project",
       "version": "0.0.0",
       "dependencies": {
+        "vite-plugin-vue-setup-extend": "^0.4.0",
         "vue": "^3.4.21"
       },
       "devDependencies": {
@@ -39,7 +40,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "aix"
@@ -55,7 +55,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -71,7 +70,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -87,7 +85,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -103,7 +100,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -119,7 +115,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -135,7 +130,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -151,7 +145,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -167,7 +160,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -183,7 +175,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -199,7 +190,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -215,7 +205,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -231,7 +220,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -247,7 +235,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -263,7 +250,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -279,7 +265,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -295,7 +280,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -311,7 +295,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -327,7 +310,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -343,7 +325,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -359,7 +340,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -375,7 +355,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -391,7 +370,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -412,7 +390,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -425,7 +402,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -438,7 +414,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -451,7 +426,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -464,7 +438,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -477,7 +450,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -490,7 +462,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -503,7 +474,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -516,7 +486,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -529,7 +498,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -542,7 +510,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -555,7 +522,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -568,7 +534,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -581,7 +546,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -594,7 +558,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -607,7 +570,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -622,14 +584,13 @@
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
     "node_modules/@types/node": {
       "version": "20.12.12",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.12.12.tgz",
       "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -867,7 +828,6 @@
       "version": "0.20.2",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.20.2.tgz",
       "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
-      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -910,7 +870,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,
       "optional": true,
       "os": [
@@ -1109,7 +1068,6 @@
       "version": "4.17.2",
       "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.17.2.tgz",
       "integrity": "sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
       },
@@ -1190,6 +1148,12 @@
         "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"
+    },
     "node_modules/typescript": {
       "version": "5.4.5",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.4.5.tgz",
@@ -1207,13 +1171,12 @@
       "version": "5.26.5",
       "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/vite": {
       "version": "5.2.11",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-5.2.11.tgz",
       "integrity": "sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==",
-      "dev": true,
       "dependencies": {
         "esbuild": "^0.20.1",
         "postcss": "^8.4.38",
@@ -1264,6 +1227,26 @@
         }
       }
     },
+    "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==",
+      "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==",
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
     "node_modules/vue": {
       "version": "3.4.27",
       "resolved": "https://registry.npmmirror.com/vue/-/vue-3.4.27.tgz",

vue3/my_project/package.json

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

vue3/my_project/src/App.vue

@@ -1,20 +1,28 @@
 <template>
    <div id="app">
     <!-- html -->
-    <Demo></Demo>
-    <hr>
-    <Demo1></Demo1>
+    <!-- <Demo></Demo> -->
+    <!-- <Demo1></Demo1> -->
+    <!-- <Demo2></Demo2> -->
+    <!-- <Demo3></Demo3> -->
+    <Demo4></Demo4>
    </div>
 </template>
 
 <script>
 import Demo from './components/Demo.vue'
 import Demo1 from './components/Demo1.vue'
+import Demo2 from './components/Demo2.vue'
+import Demo3 from './components/Demo3.vue'
+import Demo4 from './components/Demo4.vue'
 export default {
     // js或ts
     components: {
         Demo,
-        Demo1
+        Demo1,
+        Demo2,
+        Demo3,
+        Demo4
     },
 }
 </script>

vue3/my_project/src/components/Demo1.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo1">
     <h3>姓名：{{ name }}</h3>
-    <h3>年龄：{{age }}</h3>
+    <h3>年龄：{{ age }}</h3>
     <h3>性别：{{ sex }}</h3>
     <button @click="changeName">修改姓名</button>
     <button @click="changeAge">修改年龄</button>
@@ -11,29 +11,27 @@
 
 <script lang="ts">
 export default {
-    // 语法糖
-    setup() {
-        // setup语法中 不支持使用this
-        let name = "孙悟空"
-        let age = 18
-        let sex = "男"
+  // 语法糖
+  setup() {
+    // setup语法中 不支持使用this
+    let name = "孙悟空";
+    let age = 18;
+    let sex = "男";
 
-       function changeName() {
-            console.log("走进来")
-            name = '猪八戒'
-            console.log(name)
-        }
-
-        return {
-            name,
-            age,
-            sex,
-            changeName
-        }
+    function changeName() {
+      console.log("走进来");
+      name = "猪八戒";
+      console.log(name);
     }
-}
-</script>
 
-<style>
+    return {
+      name,
+      age,
+      sex,
+      changeName,
+    };
+  },
+};
+</script>
 
-</style>
+<style></style>

vue3/my_project/src/components/Demo2.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="demo1">
+    <h3>姓名：{{ names }}</h3>
+    <h3>年龄：{{ age }}</h3>
+    <h3>性别：{{ sex }}</h3>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeSex">修改性别</button>
+
+  </div>
+</template>
+<script setup lang="ts" name="Person">
+    let names = "孙悟空";
+    let age = 18;
+    let sex = "男";
+
+    function changeName() {
+        names = "猪八戒";
+    }
+    function changeAge() {
+        age = 20;
+    }
+    function changeSex() {
+        sex = "女";
+    }
+
+
+</script>
+
+<style></style>

vue3/my_project/src/components/Demo3.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="demo1">
+    <h3>姓名：{{ names }}</h3>
+    <h3>年龄：{{ age }}</h3>
+    <h3>性别：{{ sex }}</h3>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changeSex">修改性别</button>
+    
+  </div>
+</template>
+<script setup lang="ts" name="Demo3">
+  /**
+   * ref 可以定义基本数据类型
+   * 真实修改的值 ref.value
+   */
+  import { ref } from 'vue';
+
+    let names = ref("孙悟空");
+    let age = ref(18);
+    let sex = ref("男");
+
+    function changeName() {
+      console.log(names)
+        names.value = "猪八戒";
+    }
+    function changeAge() {
+      age.value = 20;
+    }
+    function changeSex() {
+      sex.value = "man"
+    }
+
+
+</script>
+
+<style></style>

vue3/my_project/src/components/Demo4.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="demo4">
+    <ul>
+      <li v-for="(item,index) in arr" :key="index">
+        {{ index + 1 }}--姓名是：{{item.name}}--今年{{item.age}}岁
+      </li>
+    </ul>
+    <button @click="changeFirst">修改第一项的内容</button>
+  </div>
+</template>
+
+<script lang="ts" setup name="Demo4">
+import { reactive } from 'vue';
+let arr = reactive([
+  {
+    name: '张三',
+    age: 18
+  },
+  {
+    name: '李四',
+    age: 20
+  },
+  {
+    name: '王五',
+    age: 22
+  }
+])
+
+console.log(arr,'arr')
+
+function changeFirst() {
+  arr[0].name = '孙悟空';
+}
+
+</script>
+
+<style>
+
+</style>

vue3/my_project/src/main.ts

@@ -1,5 +1,4 @@
 
 import { createApp } from 'vue'
 import App from './App.vue';
-
 createApp(App).mount("#app");

vue3/my_project/vite.config.ts

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