vue3

13.Vue3/project2/package.json

@@ -22,6 +22,7 @@
     "typescript": "~5.7.3",
     "vite": "^6.1.0",
     "vite-plugin-vue-devtools": "^7.7.2",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^2.2.2"
   }
 }

13.Vue3/project2/src/App.vue

@@ -3,12 +3,14 @@
     <!-- {{msg}} -->
     <Demo1/>
     <Demo2/>
+    <Demo3/>
   </div>
 </template>
 
 <script>
 import Demo1 from './components/Demo1.vue'
 import Demo2 from './components/Demo2.vue'
+import Demo3 from './components/Demo3.vue'
 // vue2 选项式API => Option API
 // Vue3 组合式API => component API
 export default {
@@ -19,7 +21,8 @@ export default {
   // }
   components:{
     Demo1,
-    Demo2
+    Demo2,
+    Demo3
   }
 }
 </script>

13.Vue3/project2/src/components/Demo1.vue

@@ -2,11 +2,20 @@
   <div>
     <h1>第一个demo</h1>
     <p>我叫{{ name1 }}</p>
+    <p>{{ a }}</p>
     <button @click="changeName">改名</button>
   </div>
 </template>
 
-<script  name="Demo1" setup>
+<script>
+    export default {
+        name:'Demo1e34',
+        setup() {
+            console.log(this,'this')
+        }
+    }
+</script>
+<script   setup>
    // setup语法糖不支持this
     //ref定义基本数据类型 值在value中
     import { ref } from "vue";

13.Vue3/project2/src/components/Demo2.vue

@@ -7,27 +7,27 @@
   </div>
 </template>
 
-<script  name="Demo1" setup>
-import {reactive} from 'vue'
-   let obj = reactive({
-    name:"图图",
-    age:3,
-    sex:'男'
-   })
-   console.log(obj)
-   function changeName() {
-    obj.name = "小红"
-   }
-   function changeAll() {
-    // obj = reactive({
-    //  name:"小明",
-    //  age:5,
-    //  sex:'女'
-    // })
-    // obj.name = "小红";
-    // obj.age = 5;
-    // obj.sex = "小红"
-    Object.assign(obj,{name:"哆啦A梦",age:7,sex:'男'})
-   }
+<script name="Demo2" setup>
+import { reactive } from "vue";
+let obj = reactive({
+  name: "图图",
+  age: 3,
+  sex: "男",
+});
+console.log(obj);
+function changeName() {
+  obj.name = "小红";
+}
+function changeAll() {
+  // obj = reactive({
+  //  name:"小明",
+  //  age:5,
+  //  sex:'女'
+  // })
+  // obj.name = "小红";
+  // obj.age = 5;
+  // obj.sex = "小红"
+  Object.assign(obj, { name: "哆啦A梦", age: 7, sex: "男" });
+}
 </script>
 <style lang="scss" scoped></style>

13.Vue3/project2/src/components/Demo3.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <p>第三個demo</p>
+  </div>
+</template>
+<script name="Demo3" setup>
+
+</script>
+// <script>
+// export default {
+//   name: "hello",
+//   setup() {
+//     let name = "张三";
+//     let age = 10;
+//     return {
+//       name,
+//       age,
+//     };
+//   },
+//   data() {
+
+//   }
+// };
+</script>
+<style scoped></style>

13.Vue3/project2/vite.config.ts

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