vue3

vue3/project1/package.json

@@ -13,14 +13,19 @@
   "dependencies": {
     "sass": "^1.100.0",
     "sass-loader": "^17.0.0",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue": "^3.5.32"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.0",
     "@tsconfig/node24": "^24.0.4",
     "@types/node": "^24.12.2",
     "@vitejs/plugin-vue": "^6.0.6",
     "@vue/tsconfig": "^0.9.1",
+    "autoprefixer": "^10.5.0",
     "npm-run-all2": "^8.0.4",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^3.4.19",
     "typescript": "~6.0.0",
     "vite": "^8.0.8",
     "vite-plugin-vue-devtools": "^8.1.1",

vue3/project1/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

vue3/project1/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

vue3/project1/src/App.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
     <h1>App</h1>
-    <Demo18></Demo18>
-    <hr>
+    <Demo20></Demo20>
+    <!-- <hr>
     <hr>
     <Demo16 ref="vase"></Demo16>
     <hr>
     <hr>
     <Demo15 v-if="isShow"></Demo15>
-    <hr>
+    <hr> -->
     <!-- <hr>
     <Demo11></Demo11>
     <hr>
@@ -60,12 +60,14 @@ import Demo15 from './components/Demo15.vue'
 import Demo16 from './components/Demo16.vue'
 import Demo17 from './components/Demo17.vue'
 import Demo18 from './components/Demo18.vue'
+import Demo19 from './components/Demo19.vue'
+import Demo20 from './components/Demo20.vue'
 // import Demo12 from './components/Demo12.vue'
 import { onMounted, ref } from 'vue';
 let isShow = ref(true);
-let vase = ref();
+// let vase = ref();
 onMounted(() => {
-  console.log(vase.value.a,vase.value.b)
+  // console.log(vase.value.a,vase.value.b)
 })
 </script>
 

vue3/project1/src/components/Demo19.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <h1>Demo19</h1>
+    <p>姓: <input type="text" v-model="user.firstName"></p>
+    <p>名: <input type="text" v-model="user.lastName"></p>
+    <p>全名:{{ fullName }}</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive, watch, watchEffect,} from "vue" 
+let user = reactive({
+    firstName:"喜",
+    lastName:"羊羊"
+})
+let fullName = ref("")
+
+// watch(user,(value) => {
+//     fullName.value = value.firstName + value.lastName
+// },{
+//     deep: true,
+//     immediate: true
+// })
+
+// watchEffect监听 立即执行一个函数 响应式追踪依赖 在依赖发生改变时运行
+watchEffect(()=>{
+    fullName.value = user.firstName + user.lastName
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project1/src/components/Demo20.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>Demo20:自定义hook</h1>
+    <h3>x:{{ x }},y:{{ y }}</h3>
+  </div>
+</template>
+
+<script lang="ts" setup name="News">
+// name:'News'
+import { useMouse } from '@/hooks/useMouse';
+const {x,y} = useMouse();
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project1/src/hooks/useMouse.ts

@@ -0,0 +1,17 @@
+
+import { ref, onMounted, onUnmounted } from "vue"
+export function useMouse() {
+    let x = ref<number>(0);
+    let y = ref<number>(0);
+    function changeMouse(event: MouseEvent) {
+        x.value = event.clientX;
+        y.value = event.clientY;
+    }
+    onMounted(() => {
+        window.addEventListener("mousemove", changeMouse)
+    })
+    onUnmounted(() => {
+        window.removeEventListener("mousemove", changeMouse)
+    })
+    return { x, y }
+}

vue3/project1/src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+// import './style.css'
 import App from './App.vue'
 
 const app = createApp(App)

vue3/project1/src/style.css

@@ -0,0 +1,4 @@
+/* src/style.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

vue3/project1/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

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: {