add some files.

README.md

@@ -1,3 +1,9 @@
 # learn-vue
 
-学习vue3
+学习 vue3
+
+## 安装 `vue` 工具
+
+```shell
+npm i -g vue-cli
+```

hello_vue3/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

hello_vue3/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

hello_vue3/README.md

@@ -0,0 +1,40 @@
+# hello_vue3
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```

hello_vue3/backups/01-自己写一个App组件/App.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="app">
+        <h1>你好呀</h1>
+    </div>
+</template>
+
+<script lang="ts">
+// ts or js
+export default {
+    name:'App', // 组件名
+}
+</script>
+
+<style>
+.app{
+    background-color: #ddd;
+    box-shadow: 0 0 10px;
+    border-radius: 10px;
+    padding: 20px;
+}
+</style>

hello_vue3/backups/01-自己写一个App组件/main.ts

@@ -0,0 +1,6 @@
+// 引入 createApp 创建组件
+import { createApp } from "vue";
+// 引入根组件
+import App from "./App.vue";
+
+createApp(App).mount('#app')

hello_vue3/backups/02-setup概述/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="app">
+    <h1>你好呀</h1>
+    <Person />
+  </div>
+</template>
+
+<script lang="ts">
+import Person from './components/Person.vue'
+export default {
+  name: 'App', // 组件名
+  components: { Person }, // 注册组件
+}
+</script>
+
+<style>
+.app {
+  background-color: #ddd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+</style>

hello_vue3/backups/02-setup概述/components/Person.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="person">
+    <h2>姓名: {{ name }}</h2>
+    <h2>年龄: {{ age }}</h2>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="showTel">查看联系方式</button>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'Person', // 组件名
+
+  beforeCreate() {
+    console.log('钩子函数')
+  },
+
+  setup() {
+    /* 
+      vue3 开始弱化 this
+      setup 中的 this 是 undefine
+    */
+    let name = '张三'
+    let age = 18
+    let tel = '111111'
+
+    function showTel() {
+      alert(tel)
+    }
+    function changeName() {
+      name = 'ddd' // 直接修改是无效的 | 无法做到响应式
+    }
+    function changeAge() {
+      age = 11
+    }
+
+    return {
+      showTel,
+      changeName,
+      changeAge,
+      name,
+      age,
+      tel,
+    }
+  },
+}
+</script>
+
+<style scoped>
+.person {
+  background-color: #2bc7bd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+
+button {
+  /* 上下为0 左右为5 */
+  margin: 0 5px;
+}
+</style>

hello_vue3/backups/02-setup概述/main.ts

@@ -0,0 +1,6 @@
+// 引入 createApp 创建组件
+import { createApp } from "vue";
+// 引入根组件
+import App from "./App.vue";
+
+createApp(App).mount('#app')

hello_vue3/backups/03-setup返回值/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="app">
+    <h1>你好呀</h1>
+    <Person />
+  </div>
+</template>
+
+<script lang="ts">
+import Person from './components/Person.vue'
+export default {
+  name: 'App', // 组件名
+  components: { Person }, // 注册组件
+}
+</script>
+
+<style>
+.app {
+  background-color: #ddd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+</style>

hello_vue3/backups/03-setup返回值/components/Person.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="person">
+    <h2>姓名: {{ name }}</h2>
+    <h2>年龄: {{ age }}</h2>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="showTel">查看联系方式</button>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'Person', // 组件名
+
+  beforeCreate() {
+    console.log('钩子函数')
+  },
+
+  setup() {
+    /* 
+      vue3 开始弱化 this
+      setup 中的 this 是 undefine
+    */
+    let name = '张三'
+    let age = 18
+    let tel = '111111'
+
+    function showTel() {
+      alert(tel)
+    }
+    function changeName() {
+      name = 'ddd' // 直接修改是无效的 | 无法做到响应式
+    }
+    function changeAge() {
+      age = 11
+    }
+
+    // setup 的返回值也可以是一个渲染函数
+
+    // return () => 'hh'
+    return {
+      showTel,
+      changeName,
+      changeAge,
+      name,
+      age,
+      tel,
+    }
+  },
+}
+</script>
+
+<style scoped>
+.person {
+  background-color: #2bc7bd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+
+button {
+  /* 上下为0 左右为5 */
+  margin: 0 5px;
+}
+</style>

hello_vue3/backups/03-setup返回值/main.ts

@@ -0,0 +1,6 @@
+// 引入 createApp 创建组件
+import { createApp } from "vue";
+// 引入根组件
+import App from "./App.vue";
+
+createApp(App).mount('#app')

hello_vue3/backups/04-setup和Options API的关系/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="app">
+    <h1>你好呀</h1>
+    <Person />
+  </div>
+</template>
+
+<script lang="ts">
+import Person from './components/Person.vue'
+export default {
+  name: 'App', // 组件名
+  components: { Person }, // 注册组件
+}
+</script>
+
+<style>
+.app {
+  background-color: #ddd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+</style>

hello_vue3/backups/04-setup和Options API的关系/components/Person.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="person">
+    <h2>姓名: {{ name }}</h2>
+    <h2>年龄: {{ age }}</h2>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="showTel">查看联系方式</button>
+  </div>
+  <hr />
+  <h2>{{ a }}</h2>
+  <h2>测试：{{ c }}</h2>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'Person', // 组件名
+
+  beforeCreate() {
+    console.log('钩子函数')
+  },
+
+  data() {
+    // 同时兼容 | 但是不建议
+    return {
+      a: '11',
+      c: this.name, // 读取得到 setup 中的数据
+    }
+  },
+
+  setup() {
+    /* 
+      vue3 开始弱化 this
+      setup 中的 this 是 undefine
+      
+      读取不到 data 中的数据 |> this 不存在
+        => 可以共存 | 新的 <=read= 旧的
+    */
+    let name = '张三'
+    let age = 18
+    let tel = '111111'
+
+    function showTel() {
+      alert(tel)
+    }
+    function changeName() {
+      name = 'ddd' // 直接修改是无效的 | 无法做到响应式
+    }
+    function changeAge() {
+      age = 11
+    }
+
+    return {
+      showTel,
+      changeName,
+      changeAge,
+      name,
+      age,
+      tel,
+    }
+  },
+}
+</script>
+
+<style scoped>
+.person {
+  background-color: #2bc7bd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+
+button {
+  /* 上下为0 左右为5 */
+  margin: 0 5px;
+}
+</style>

hello_vue3/backups/04-setup和Options API的关系/main.ts

@@ -0,0 +1,6 @@
+// 引入 createApp 创建组件
+import { createApp } from "vue";
+// 引入根组件
+import App from "./App.vue";
+
+createApp(App).mount('#app')

hello_vue3/backups/05-setup语法糖/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="app">
+    <h1>你好呀</h1>
+    <Person />
+  </div>
+</template>
+
+<script lang="ts">
+import Person from './components/Person.vue'
+export default {
+  name: 'App', // 组件名
+  components: { Person }, // 注册组件
+}
+</script>
+
+<style>
+.app {
+  background-color: #ddd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+</style>

hello_vue3/backups/05-setup语法糖/components/Person.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="person">
+    <h2>姓名: {{ name }}</h2>
+    <h2>年龄: {{ age }}</h2>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="showTel">查看联系方式</button>
+  </div>
+</template>
+
+<script lang="ts" setup name="Person234">
+let name = '张三'
+let age = 18
+let tel = '111111'
+
+// 方法
+function showTel() {
+  alert(tel)
+}
+function changeName() {
+  name = 'ddd' // 直接修改是无效的 | 无法做到响应式
+}
+function changeAge() {
+  age = 11
+}
+</script>
+
+<style scoped>
+.person {
+  background-color: #2bc7bd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+
+button {
+  /* 上下为0 左右为5 */
+  margin: 0 5px;
+}
+</style>

hello_vue3/backups/05-setup语法糖/main.ts

@@ -0,0 +1,6 @@
+// 引入 createApp 创建组件
+import { createApp } from "vue";
+// 引入根组件
+import App from "./App.vue";
+
+createApp(App).mount('#app')

hello_vue3/backups/06-ref创建基本类型响应数据/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="app">
+    <h1>你好呀</h1>
+    <Person />
+  </div>
+</template>
+
+<script lang="ts">
+import Person from './components/Person.vue'
+export default {
+  name: 'App', // 组件名
+  components: { Person }, // 注册组件
+}
+</script>
+
+<style>
+.app {
+  background-color: #ddd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+</style>

hello_vue3/backups/06-ref创建基本类型响应数据/components/Person.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="person">
+    <h2>姓名: {{ name }}</h2>
+    <h2>年龄: {{ age }}</h2>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="showTel">查看联系方式</button>
+  </div>
+</template>
+
+<script lang="ts" setup name="Person">
+import { ref } from 'vue'
+let name = ref('张三')
+let age = ref(18)
+let tel = '111111'
+
+console.log(name) // ref 实例化对象:> RefImpl
+console.log(age)
+console.log(tel)
+
+// 方法
+function showTel() {
+  alert(tel)
+}
+function changeName() {
+  name.value = 'ddd'
+}
+function changeAge() {
+  age.value = 11
+}
+</script>
+
+<style scoped>
+.person {
+  background-color: #2bc7bd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+
+button {
+  /* 上下为0 左右为5 */
+  margin: 0 5px;
+}
+</style>

hello_vue3/backups/06-ref创建基本类型响应数据/main.ts

@@ -0,0 +1,6 @@
+// 引入 createApp 创建组件
+import { createApp } from "vue";
+// 引入根组件
+import App from "./App.vue";
+
+createApp(App).mount('#app')

hello_vue3/backups/07-reactive创建对象类型响应数据/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="app">
+    <h1>你好呀</h1>
+    <Person />
+  </div>
+</template>
+
+<script lang="ts">
+import Person from './components/Person.vue'
+export default {
+  name: 'App', // 组件名
+  components: { Person }, // 注册组件
+}
+</script>
+
+<style>
+.app {
+  background-color: #ddd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+</style>

hello_vue3/backups/07-reactive创建对象类型响应数据/components/Person.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="person">
+    <h2>一辆{{ car.brand }}车价值: {{ car.price }} 万</h2>
+    <button @click="changePrice">修改金额</button>
+  </div>
+
+  <hr />
+
+  <strong>游戏列表:</strong>
+  <ul>
+    <li v-for="item of games" :key="item.id">
+      {{ item.name }}
+    </li>
+  </ul>
+
+  <hr />
+  <h2>测试：{{ obj.a.b.c }}</h2>
+  <button @click="changeObj">修改金额</button>
+</template>
+
+<script lang="ts" setup name="Person">
+import { reactive } from 'vue'
+
+let car = reactive({
+  brand: '奔驰',
+  price: 100,
+})
+
+let games = reactive([
+  { id: 'donwdd', name: '王者荣耀' },
+  { id: 'donwww', name: '原神' },
+  { id: 'donwxx', name: '吃鸡' },
+])
+
+// reactive 深层次的 => 不管数据多么深
+// 响应式对象
+let obj = reactive({
+  a: {
+    b: {
+      c: 666,
+    },
+  },
+})
+
+console.log(car) // Proxy(Object)
+console.log(Proxy) // windows 自带
+
+const changePrice = () => {
+  car.price += 10
+  console.log(car.price)
+}
+
+const changeObj = () => {
+  obj.a.b.c = 999
+}
+</script>
+
+<style scoped>
+.person {
+  background-color: #2bc7bd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+
+button {
+  /* 上下为0 左右为5 */
+  margin: 0 5px;
+}
+</style>

hello_vue3/backups/07-reactive创建对象类型响应数据/main.ts

@@ -0,0 +1,6 @@
+// 引入 createApp 创建组件
+import { createApp } from "vue";
+// 引入根组件
+import App from "./App.vue";
+
+createApp(App).mount('#app')

hello_vue3/backups/08-ref的对象类型定义/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="app">
+    <h1>你好呀</h1>
+    <Person />
+  </div>
+</template>
+
+<script lang="ts">
+import Person from './components/Person.vue'
+export default {
+  name: 'App', // 组件名
+  components: { Person }, // 注册组件
+}
+</script>
+
+<style>
+.app {
+  background-color: #ddd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+</style>

hello_vue3/backups/08-ref的对象类型定义/components/Person.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="person">
+    <h2>一辆{{ car.brand }}车价值: {{ car.price }} 万</h2>
+    <button @click="changePrice">修改金额</button>
+  </div>
+
+  <hr />
+
+  <strong>游戏列表:</strong>
+  <ul>
+    <li v-for="item of games" :key="item.id">
+      {{ item.name }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup name="Person">
+import { reactive, ref } from 'vue'
+
+let car = ref({
+  brand: '奔驰',
+  price: 100,
+})
+
+// 响应式对象
+let games = ref([
+  { id: 'donwdd', name: '王者荣耀' },
+  { id: 'donwww', name: '原神' },
+  { id: 'donwxx', name: '吃鸡' },
+])
+
+let obj = reactive({ x: 999 })
+
+console.log(car)
+console.log(obj)
+
+const changePrice = () => {
+  console.log(games.value[0])
+}
+</script>
+
+<style scoped>
+.person {
+  background-color: #2bc7bd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+
+button {
+  /* 上下为0 左右为5 */
+  margin: 0 5px;
+}
+</style>

hello_vue3/backups/08-ref的对象类型定义/main.ts

@@ -0,0 +1,6 @@
+// 引入 createApp 创建组件
+import { createApp } from "vue";
+// 引入根组件
+import App from "./App.vue";
+
+createApp(App).mount('#app')

hello_vue3/backups/09-ref和reactive区别/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="app">
+    <h1>你好呀</h1>
+    <Person />
+  </div>
+</template>
+
+<script lang="ts">
+import Person from './components/Person.vue'
+export default {
+  name: 'App', // 组件名
+  components: { Person }, // 注册组件
+}
+</script>
+
+<style>
+.app {
+  background-color: #ddd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+</style>

hello_vue3/backups/09-ref和reactive区别/components/Person.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="person">
+    <h2>一辆{{ car.brand }}车价值: {{ car.price }} 万</h2>
+    <button @click="changePrice">修改金额</button>
+  </div>
+
+  <hr />
+
+  <strong>游戏列表:</strong>
+  <ul>
+    <li v-for="item of games" :key="item.id">
+      {{ item.name }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup name="Person">
+import { reactive, ref } from 'vue'
+
+let car = ref({
+  brand: '奔驰',
+  price: 100,
+})
+
+// 响应式对象
+let games = ref([
+  { id: 'donwdd', name: '王者荣耀' },
+  { id: 'donwww', name: '原神' },
+  { id: 'donwxx', name: '吃鸡' },
+])
+
+let obj = reactive({ x: 999 })
+
+console.log(car)
+console.log(obj)
+
+const changePrice = () => {
+  car.value.price += 10
+}
+</script>
+
+<style scoped>
+.person {
+  background-color: #2bc7bd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+
+button {
+  /* 上下为0 左右为5 */
+  margin: 0 5px;
+}
+</style>

hello_vue3/backups/09-ref和reactive区别/main.ts

@@ -0,0 +1,6 @@
+// 引入 createApp 创建组件
+import { createApp } from "vue";
+// 引入根组件
+import App from "./App.vue";
+
+createApp(App).mount('#app')

hello_vue3/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+declare module "*.vue" {
+    import type { DefineComponent } from "vue";
+
+    const vueComponent: DefineComponent<{}, {}, any>;
+
+    export default vueComponent;
+}

hello_vue3/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

hello_vue3/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "hello_vue3",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force"
+  },
+  "dependencies": {
+    "vue": "^3.3.11"
+  },
+  "devDependencies": {
+    "@tsconfig/node18": "^18.2.2",
+    "@types/node": "^18.19.3",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vue/tsconfig": "^0.5.0",
+    "npm-run-all2": "^6.1.1",
+    "typescript": "~5.3.0",
+    "vite": "^5.0.10",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vue-tsc": "^1.8.25"
+  }
+}

hello_vue3/src/App.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="app">
+    <!-- <h1>你好呀</h1>
+    <Person /> -->
+    <Demo />
+  </div>
+</template>
+
+<script lang="ts">
+import Demo from './components/Demo.vue'
+import Person from './components/Person.vue'
+export default {
+  name: 'App', // 组件名
+  components: { Person, Demo }, // 注册组件
+}
+</script>
+
+<style>
+.app {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(50deg, #75accb, #cce4d7);
+}
+</style>

hello_vue3/src/components/Demo.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="login-box">
+    <div class="owl" :class="{ password: isPasswordFocused }">
+      <div class="hand"></div>
+      <div class="hand hand-r"></div>
+      <div class="arms">
+        <div class="arm"></div>
+        <div class="arm arm-r"></div>
+      </div>
+    </div>
+    <div class="input-box">
+      <input
+        type="text"
+        placeholder="账号"
+        v-model="userAuth.account"
+        :disabled="userAuth.isInput"
+      />
+      <input
+        type="password"
+        placeholder="密码"
+        v-model="userAuth.password"
+        :disabled="userAuth.isInput"
+        @focus="handlePasswordFocus"
+        @blur="handlePasswordBlur"
+        @keyup.enter="handleLogin"
+      />
+      <button @click="handleLogin" :disabled="userAuth.isInput">登录</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+
+let userAuth = reactive({
+  account: '',
+  password: '',
+  isInput: false,
+})
+
+let isPasswordFocused = ref(false)
+
+let handlePasswordFocus = () => {
+  isPasswordFocused.value = true
+}
+
+let handlePasswordBlur = () => {
+  isPasswordFocused.value = false
+}
+
+let handleLogin = () => {
+  if (!userAuth.isInput) {
+    userAuth.isInput = true
+    // 模拟登录逻辑
+    setTimeout(() => {
+      console.log('登录成功，重定向到其他页面')
+      userAuth.isInput = false
+    }, 2000)
+  } else {
+    userAuth.isInput = false
+    console.log('登录失败，重新启用按钮和回车键')
+  }
+  console.log(userAuth.isInput)
+}
+</script>
+
+<style scoped>
+.login-box {
+  /* 相对定位 */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 320px;
+
+  padding: 20px;
+  box-shadow: 0 0 10px;
+  border-radius: 15px;
+  background: linear-gradient(200deg, #72afd3, #96fbc4);
+  justify-content: center;
+}
+.input-box {
+  /* 弹性布局 垂直排列 */
+  display: flex;
+  flex-direction: column;
+}
+.input-box input {
+  height: 40px;
+  border-radius: 3px;
+  /* 缩进15像素 */
+  text-indent: 15px;
+  outline: none;
+  border: none;
+  margin-bottom: 15px;
+}
+.input-box input:focus {
+  outline: 1px solid rgb(36, 197, 189);
+}
+
+.input-box button {
+  width: 9em;
+  height: 3em;
+  border: none;
+  border-radius: 30em;
+  font-size: 15px;
+  font-family: inherit;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  justify-content: center;
+  text-align: center;
+  background-color: lightseagreen;
+  margin: 0 auto; /* 水平居中 */
+  display: block; /* 使按钮成为块级元素 */
+  transition: background-color 0.3s ease; /* 添加简单的背景色过渡效果 */
+}
+
+.input-box button:hover {
+  background-color: #3cb371; /* 悬停时的背景色 */
+}
+
+/* 接下来是猫头鹰的样式 */
+.owl {
+  width: 211px;
+  height: 108px;
+  /* 背景图片 */
+  background: url('@/assets/owl-login.png') no-repeat;
+  /* 绝对定位 */
+  position: absolute;
+  top: -100px;
+  /* 水平居中 */
+  left: 50%;
+  transform: translateX(-50%);
+}
+.owl .hand {
+  width: 34px;
+  height: 34px;
+  border-radius: 40px;
+  background-color: #472d20;
+  /* 绝对定位 */
+  position: absolute;
+  left: 12px;
+  bottom: -8px;
+  /* 沿Y轴缩放0.6倍（压扁） */
+  transform: scaleY(0.6);
+  /* 动画过渡 */
+  transition: 0.3s ease-out;
+}
+.owl .hand.hand-r {
+  left: 170px;
+}
+.owl.password .hand {
+  transform: translateX(42px) translateY(-15px) scale(0.7);
+}
+.owl.password .hand.hand-r {
+  transform: translateX(-42px) translateY(-15px) scale(0.7);
+}
+.owl .arms {
+  position: absolute;
+  top: 58px;
+  width: 100%;
+  height: 41px;
+  overflow: hidden;
+}
+.owl .arms .arm {
+  width: 40px;
+  height: 65px;
+  position: absolute;
+  left: 20px;
+  top: 40px;
+  background: url('@/assets/owl-login-arm.png') no-repeat;
+  transform: rotate(-20deg);
+  transition: 0.3s ease-out;
+}
+.owl .arms .arm.arm-r {
+  transform: rotate(20deg) scaleX(-1);
+  left: 158px;
+}
+.owl.password .arms .arm {
+  transform: translateY(-40px) translateX(40px);
+}
+.owl.password .arms .arm.arm-r {
+  transform: translateY(-40px) translateX(-40px) scaleX(-1);
+}
+</style>

hello_vue3/src/components/Person.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="person">
+    <h2>一辆{{ car.brand }}车价值: {{ car.price }} 万</h2>
+    <button @click="changePrice">修改金额</button>
+  </div>
+
+  <hr />
+
+  <strong>游戏列表:</strong>
+  <ul>
+    <li v-for="item of games" :key="item.id">
+      {{ item.name }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup name="Person">
+import { reactive, ref, toRef, toRefs } from 'vue'
+
+let car = reactive({
+  brand: '奔驰',
+  price: 100,
+})
+
+// 响应式对象
+let games = ref([
+  { id: 'donwdd', name: '王者荣耀' },
+  { id: 'donwww', name: '原神' },
+  { id: 'donwxx', name: '吃鸡' },
+])
+
+let obj = reactive({ x: 999 })
+
+console.log(car)
+console.log(obj)
+
+let { price } = toRefs(car)
+let nl = toRef(car, 'brand')
+
+const changePrice = () => {
+  // car.value.price += 10
+  price.value += 10
+  console.log(`当前选择: ${nl.value}`)
+}
+</script>
+
+<style scoped>
+.person {
+  background-color: #2bc7bd;
+  box-shadow: 0 0 10px;
+  border-radius: 10px;
+  padding: 20px;
+}
+
+button {
+  /* 上下为0 左右为5 */
+  margin: 0 5px;
+}
+</style>

hello_vue3/src/main.ts

@@ -0,0 +1,6 @@
+// 引入 createApp 创建组件
+import { createApp } from "vue";
+// 引入根组件
+import App from "./App.vue";
+
+createApp(App).mount('#app')

hello_vue3/tsconfig.app.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

hello_vue3/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

hello_vue3/tsconfig.node.json

@@ -0,0 +1,17 @@
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

hello_vue3/vite.config.ts

@@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url';
+
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite';
+import VueSetupExtend from "vite-plugin-vue-setup-extend";
+
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(), VueSetupExtend(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})