vue3

17.Vue3/project1/package.json

@@ -14,6 +14,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "scss": "^0.2.4",
     "vue": "^3.5.22"
   },
   "devDependencies": {
@@ -25,6 +26,7 @@
     "typescript": "~5.9.0",
     "vite": "^7.1.11",
     "vite-plugin-vue-devtools": "^8.0.3",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^3.1.1"
   }
 }

17.Vue3/project1/src/App.vue

@@ -1,11 +1,46 @@
-<script setup lang="ts"></script>
+<!-- <template>
+  <div>
+    <p>你好</p>
+    <h1>{{ msg }}</h1>
+    <button @click="changeMsg">修改</button>
+  </div>
+</template>
+
+<script lang="ts" >
+export default {
+  // data() {
+  //   return {
+  //     msg:"111"
+  //   }
+  // },
+  // methods:{
+  //   changeMsg() {
+  //     this.msg = '222';
+  //   }
+  // }
+}
+</script>
+
+<style lang="scss" scoped>
+</style> -->
+
 
 <template>
-  <h1>You did it!</h1>
-  <p>
-    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
-    documentation
-  </p>
+  <div>
+    <h1>首页</h1>
+    <Demo1></Demo1>
+  </div>
 </template>
 
-<style scoped></style>
+<script lang="ts" setup>
+import Demo1 from './components/Demo1.vue';
+// export default {
+//   // components:{
+//   //   Demo1
+//   // }
+// }
+
+</script>
+
+<style lang="scss" scoped>
+</style>

17.Vue3/project1/src/components/Demo1.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <h2>Demo1</h2>
+    <p>
+      {{ tips }}
+    </p>
+    <button @click="changeTips">修改</button>
+  </div>
+</template>
+
+<script lang="ts" setup name="hi">
+
+/**
+ * setup 不支持this
+ * ref 基本数据类型
+ * 声明字段 自带value
+ * 修改需要.value
+ */
+import {ref} from 'vue';
+let tips = ref('今天星期日');
+console.log(tips);
+function changeTips() {
+    // this.tips = 'haha';
+    tips.value = '哈哈';
+}
+</script>
+<!-- <script>
+export default {
+    name:"hi"
+}
+</script> -->
+<!-- <script>
+import { ref } from "vue";
+export default {
+  name:"hello",
+  setup() {
+    let tips = ref("哈哈");
+
+    function changeTips() {
+      // this.tips = 'haha';
+      tips.value = "你好";
+    }
+    return {
+      tips,changeTips
+    };
+  },
+};
+</script> -->
+<style lang="scss" scoped>
+</style>

17.Vue3/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: {

17.Vue3/初始.md

@@ -5,4 +5,14 @@
 初次渲染快了55% 更新快了133%
 ## 安装命令
 npm create vue@latest
-vite 打包工具
+vite 打包工具 构建
+轻量级快速热重载
+## Vue2 Vue3区别
+选项式api optionsApi
+组合式api componentAPI
+/**
+ * setup 不支持this
+ * ref 基本数据类型
+ * 声明字段 自带value
+ * 修改需要.value
+ */