diff --git a/flake.lock b/flake.lock
new file mode 100644
index 0000000..8547e38
--- /dev/null
+++ b/flake.lock
@@ -0,0 +1,27 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1757034884,
+        "narHash": "sha256-PgLSZDBEWUHpfTRfFyklmiiLBE1i1aGCtz4eRA3POao=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "ca77296380960cd497a765102eeb1356eb80fed0",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}
diff --git a/flake.nix b/flake.nix
new file mode 100644
index 0000000..f4fe886
--- /dev/null
+++ b/flake.nix
@@ -0,0 +1,25 @@
+{
+  description = "A Nix-flake-based development environment with Vue CLI";
+
+  inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
+
+  outputs = { self, nixpkgs }:
+  let
+    supportedSystems = [ "x86_64-linux" "aarch64-linux" ];
+    forEachSupportedSystem = f:
+      nixpkgs.lib.genAttrs supportedSystems (system:
+        f {
+          pkgs = import nixpkgs { inherit system; };
+        });
+  in
+  {
+    devShells = forEachSupportedSystem ({ pkgs }: {
+      default = pkgs.mkShell {
+        packages = with pkgs; [
+          nodejs
+          yarn
+        ];
+      };
+    });
+  };
+}
diff --git a/test1.html b/test1.html
new file mode 100644
index 0000000..68faf9f
--- /dev/null
+++ b/test1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE <html>
+<html lang="zh-CN">
+<head>
+ <meta charset= 
+</head>
+</html>>
diff --git a/vue1.html b/vue1.html
new file mode 100644
index 0000000..1e3d1bb
--- /dev/null
+++ b/vue1.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" connect="width=devices-width,initial-scale=1.0" />
+        <title>Vue3 demo</title>
+        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    </head>
+    <body>
+        <div style="text-align: center" id="app">
+            <h1>{{ count }}</h1>
+            <button v-on:click="clickButton">单击</button>
+        </div>
+    </body>
+    <!--hello-->
+    <script>
+        const App = {
+            data() {
+                return {
+                    count: 0,
+                };
+            },
+            methods: {
+                clickButton() {
+                    this.count = this.count + 1;
+                },
+            },
+        };
+        Vue.createApp(App).mount("#app");
+    </script>
+</html>
diff --git a/vue2.html b/vue2.html
new file mode 100644
index 0000000..5f7d730
--- /dev/null
+++ b/vue2.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <title>Vue 登录作业</title>
+  <script src="https://unpkg.com/vue@3"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 40px;
+    }
+    .container {
+      width: 300px;
+      margin: auto;
+    }
+    input {
+      width: 100%;
+      padding: 8px;
+      margin: 8px 0;
+    }
+    button {
+      width: 100%;
+      padding: 8px;
+      margin: 8px 0;
+      cursor: pointer;
+    }
+    h2 {
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <div id="app" class="container">
+    <h2>
+      {{ isLoggedIn ? ("欢迎回来！已登录账号：" + currentUser) : "请登录" }}
+    </h2>
+
+    <!-- 登录表单 -->
+    <div v-if="!isLoggedIn">
+      <input type="text" v-model="studentId" placeholder="请输入账号(学号)">
+      <input type="password" v-model="password" placeholder="请输入密码">
+      <button @click="login">登录</button>
+    </div>
+
+    <!-- 登出按钮 -->
+    <div v-else>
+      <button @click="logout">登出</button>
+    </div>
+  </div>
+
+  <script>
+    const { createApp } = Vue;
+
+    createApp({
+      data() {
+        return {
+          isLoggedIn: false,
+          studentId: "",
+          password: "",
+          currentUser: "" // 保存当前登录用户
+        };
+      },
+      methods: {
+        async login() {
+          if (!this.studentId || !this.password) {
+            alert("请输入账号和密码！");
+            return;
+          }
+
+          // 本地验证：支持两个测试账户
+          if (
+            (this.studentId === "2023001" && this.password === "123456") ||
+            (this.studentId === "admin" && this.password === "admin")
+          ) {
+            this.isLoggedIn = true;
+            this.currentUser = this.studentId;
+            alert("本地验证成功，已登录！");
+            return;
+          }
+
+          // 否则再尝试服务器验证
+          try {
+            // 用 URLSearchParams 发送表单数据
+            const params = new URLSearchParams();
+            params.append("studentId", this.studentId);
+            params.append("password", this.password);
+
+            const response = await axios.post("http://117.72.102.219/login.php", params, {
+              headers: {
+                "Content-Type": "application/x-www-form-urlencoded"
+              }
+            });
+
+            console.log("服务器响应：", response.data);
+
+            if (response.data === "success") {
+              this.isLoggedIn = true;
+              this.currentUser = this.studentId;
+              alert("服务器验证成功！");
+            } else {
+              alert("账号或密码错误！");
+            }
+          } catch (error) {
+            console.error(error);
+            alert("登录失败，请检查网络或服务器！");
+          }
+        },
+        logout() {
+          this.isLoggedIn = false;
+          this.studentId = "";
+          this.password = "";
+          this.currentUser = "";
+          alert("您已退出登录！");
+        }
+      }
+    }).mount("#app");
+  </script>
+</body>
+</html>
+
diff --git a/vue3.html b/vue3.html
new file mode 100644
index 0000000..4862fff
--- /dev/null
+++ b/vue3.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-
+scale=1.0"
+        />
+        <title>猜数游戏</title>
+
+        <script>
+            let count = 10; // 猜测次数
+            let target; // 随机目标数字
+            let flag = false; // 用于控制游戏是否进行
+        </script>
+
+        <style>
+            body {
+                text-align: center;
+                font-family: Arial, sans-serif;
+                background-color: #f0f8ff;
+                margin: 0;
+                padding: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 100vh;
+            }
+            h2 {
+                color: #333;
+            }
+            form {
+                display: inline-block;
+                padding: 20px;
+                background-color: #fff;
+                border-radius: 10px;
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            }
+            input[type="text"] {
+                padding: 5px;
+                margin-bottom: 10px;
+                width: 100px;
+                text-align: center;
+                border-radius: 5px;
+                border: 1px solid #ccc;
+            }
+            input[type="button"] {
+                padding: 5px 10px;
+                margin: 5px;
+                border-radius: 5px;
+                border: 1px solid #007bff;
+                background-color: #007bff;
+                color: white;
+                cursor: pointer;
+            }
+            input[type="button"]:hover {
+                background-color: #0056b3;
+            }
+            label {
+                display: block;
+                margin: 10px 0;思考如何使用 Vue3 实现该游戏?
+            }
+        </style>
+    </head>
+    <body>
+        <div>
+            <h2>猜数游戏</h2>
+            <strong>请输入一个 0-100 之间的随机整数:</strong>
+            <br /><br />
+            <form>
+                <input type="text" id="guess" placeholder="输入你的猜测" />
+                <input type="button" id="button" value="提交" onclick="run()" />
+                <input type="button" value="开始" onclick="restart()" />
+                <br />
+                <label
+                    >结果: <input type="text" id="feedback" readonly
+                /></label>
+                <label
+                    >当前还可以猜测的次数:
+                    <input type="text" value="10" id="count" readonly
+                /></label>
+            </form>
+        </div>
+    </body>
+
+    <script>
+        function restart() {
+            flag = true; // 标记游戏开始
+            let guess = document.getElementById("guess");
+            guess.value = ""; // 清空输入框
+            let result = document.getElementById("feedback");
+            result.value = ""; // 清空反馈框
+            count = 10; // 重置猜测次数
+            let nn = document.getElementById("count");
+            nn.value = count;
+            target = Math.floor(Math.random() * 101); // 生成随机数
+        }
+    </script>
+
+    <script>
+        function run() {
+            if (flag) {
+                let guess = parseInt(document.getElementById("guess").value);
+                // 将用户输入转换为整数
+                let result = document.getElementById("feedback");
+                let nn = document.getElementById("count");
+                // 判断用户输入是否有效
+                if (isNaN(guess) || guess < 0 || guess > 100) {
+                    result.value = "请输入一个 0-100 之间的有效数字!";
+                    return;
+                }
+                // 根据猜测结果给出反馈
+                if (guess > target) {
+                    result.value = "猜的有点大!";
+                } else if (guess < target) {
+                    result.value = "猜的有点小!";
+                } else if (guess == target) {
+                    result.value = "猜对啦！答案是" + guess;
+                    flag = false; // 猜对后结束游戏
+                }
+                // 更新剩余猜测次数
+                count -= 1;
+                nn.value = count;
+                // 如果猜测次数用完，结束游戏
+                if (count == 0 && guess != target) {
+                    result.value = "游戏结束！次数已用完，正确答案是" + target;
+                    flag = false;
+                }
+            }
+        }
+    </script>
+</html>
diff --git a/vue4.html b/vue4.html
new file mode 100644
index 0000000..f389ad1
--- /dev/null
+++ b/vue4.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <title>学生成绩计算</title>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <style>
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh; 
+      margin: 0;
+      background: #f3f4f6;
+      font-family: "Microsoft YaHei", sans-serif;
+    }
+
+    .card {
+      background: white;
+      padding: 30px;
+      border-radius: 12px;
+      box-shadow: 0 6px 16px rgba(0,0,0,0.1);
+    }
+
+    table {
+      border-collapse: collapse;
+      width: 400px;
+    }
+
+    th {
+      background-color: #4f46e5;
+      color: white;
+      padding: 12px;
+      font-size: 16px;
+    }
+
+    td {
+      padding: 10px;
+      text-align: center;
+      border-bottom: 1px solid #e5e7eb;
+      font-size: 15px;
+    }
+
+    input {
+      width: 100px;
+      padding: 6px 8px;
+      border: 1px solid #cbd5e1;
+      border-radius: 6px;
+      text-align: center;
+      font-size: 14px;
+      transition: 0.2s;
+    }
+
+    input:focus {
+      outline: none;
+      border-color: #4f46e5;
+      box-shadow: 0 0 4px rgba(79,70,229,0.4);
+    }
+
+    input[readonly] {
+      background: #f9fafb;
+      color: #374151;
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+  <div id="app" class="card">
+    <table>
+      <tr>
+        <th>学科</th>
+        <th>分数</th>
+      </tr>
+      <tr>
+        <td>语文</td>
+        <td><input v-model="chinese" type="text"></td>
+      </tr>
+      <tr>
+        <td>数学</td>
+        <td><input v-model="math" type="text"></td>
+      </tr>
+      <tr>
+        <td>英语</td>
+        <td><input v-model="english" type="text"></td>
+      </tr>
+      <tr>
+        <td>总分</td>
+        <td><input :value="total" readonly></td>
+      </tr>
+      <tr>
+        <td>平均分</td>
+        <td><input :value="average" readonly></td>
+      </tr>
+    </table>
+  </div>
+
+  <script>
+    const { createApp } = Vue;
+
+    createApp({
+      data() {
+        return {
+          chinese: 0,
+          math: 0,
+          english: 0
+        };
+      },
+      computed: {
+        total() {
+          let c = Number(this.chinese) || 0;
+          let m = Number(this.math) || 0;
+          let e = Number(this.english) || 0;
+          return c + m + e;
+        },
+        average() {
+          return Math.floor(this.total / 3);
+        }
+      }
+    }).mount("#app");
+  </script>
+</body>
+</html>
diff --git a/vue5.html b/vue5.html
new file mode 100644
index 0000000..3e0b1a2
--- /dev/null
+++ b/vue5.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <title>Vue3 小型购物车</title>
+  <script src="https://unpkg.com/vue@3"></script>
+  <style>
+    table thead tr {
+      background-color: #ffebcd;
+    }
+
+    table {
+      margin: 0 auto;
+      border: 1px solid #989898;
+      border-collapse: collapse;
+    }
+
+    th, td {
+      border: 1px solid #989898;
+      text-align: center;
+      padding: 5px 10px;
+    }
+
+    button {
+      margin: 0 2px;
+      padding: 2px 6px;
+      cursor: pointer;
+    }
+
+    h2 {
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <h2>购物车表格</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>序号</th>
+          <th>书籍名称</th>
+          <th>出版日期</th>
+          <th>价格</th>
+          <th>购买数量</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(book, index) in books" :key="book.id">
+          <td>{{ index + 1 }}</td>
+          <td>{{ book.name }}</td>
+          <td>{{ book.date }}</td>
+          <td>￥{{ book.price.toFixed(2) }}</td>
+          <td>
+            <button @click="increase(book)">+</button>
+            {{ book.count }}
+            <button @click="decrease(book)">-</button>
+          </td>
+          <td>
+            <button @click="remove(index)">移除</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h3 style="text-align:center;">总价：￥{{ totalPrice.toFixed(2) }}</h3>
+  </div>
+
+  <script>
+    const { createApp } = Vue;
+
+    createApp({
+      data() {
+        return {
+          books: [
+            { id: 1, name: '《JavaScript程序设计》', date: '2022-9', price: 85.0, count: 1 },
+            { id: 2, name: '《C语言基础》', date: '2021-2', price: 59.0, count: 1 },
+            { id: 3, name: '《Java高级语言编程》', date: '2022-10', price: 39.0, count: 1 },
+            { id: 4, name: '《数据库原理》', date: '2023-3', price: 128.0, count: 1 },
+            { id: 5, name: '《计算机网络》', date: '2022-8', price: 88.0, count: 1 }
+          ]
+        };
+      },
+      computed: {
+        totalPrice() {
+          return this.books.reduce((sum, book) => sum + book.price * book.count, 0);
+        }
+      },
+      methods: {
+        increase(book) {
+          book.count++;
+        },
+        decrease(book) {
+          if (book.count > 1) book.count--;
+        },
+        remove(index) {
+          this.books.splice(index, 1);
+        }
+      }
+    }).mount('#app');
+  </script>
+</body>
+</html>
+
diff --git a/vue6.html b/vue6.html
new file mode 100644
index 0000000..1f4172a
--- /dev/null
+++ b/vue6.html
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <title>任务六 简易计算器</title>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <style>
+    body {
+      font-family: "Microsoft YaHei", sans-serif;
+      background: linear-gradient(135deg, #e3f2fd, #bbdefb);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+    }
+
+    .container {
+      background: #fff;
+      border-radius: 16px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      padding: 30px 50px;
+      text-align: center;
+      width: 380px;
+      transition: 0.3s;
+    }
+
+    h2 {
+      margin-bottom: 20px;
+      color: #1565c0;
+    }
+
+    input, select, button {
+      padding: 8px;
+      margin: 8px 0;
+      width: 80%;
+      font-size: 16px;
+      border-radius: 8px;
+      border: 1px solid #ccc;
+      transition: 0.2s;
+    }
+
+    input:focus, select:focus {
+      outline: none;
+      border-color: #42a5f5;
+      box-shadow: 0 0 5px rgba(66,165,245,0.4);
+    }
+
+    button {
+      background: #42a5f5;
+      color: #fff;
+      border: none;
+      cursor: pointer;
+      width: 85%;
+    }
+
+    button:hover:not(:disabled) {
+      background: #1e88e5;
+    }
+
+    button:disabled {
+      background: #ccc;
+      cursor: not-allowed;
+    }
+
+    .result {
+      margin-top: 15px;
+      font-size: 18px;
+      font-weight: bold;
+      color: #2e7d32;
+    }
+
+    .error {
+      color: #d32f2f;
+      margin-top: 10px;
+      min-height: 20px;
+    }
+
+    ul {
+      text-align: left;
+      padding-left: 40px;
+    }
+
+    li {
+      list-style: disc;
+      margin: 3px 0;
+    }
+
+    .history {
+      margin-top: 20px;
+      text-align: left;
+    }
+  </style>
+</head>
+<body>
+<div id="app">
+  <div class="container">
+    <h2>任务六 简易计算器</h2>
+
+    <p>请输入第一个数：</p>
+    <input type="text" v-model.trim="num1" placeholder="支持小数与负数">
+
+    <p>
+      <select v-model="op">
+        <option value="+">＋</option>
+        <option value="-">－</option>
+        <option value="*">×</option>
+        <option value="/">÷</option>
+      </select>
+    </p>
+
+    <p>请输入第二个数：</p>
+    <input type="text" v-model.trim="num2" placeholder="支持小数与负数">
+
+    <p><button :disabled="!num1 || !num2" @click="calculate">计算</button></p>
+
+    <div class="result" v-if="result !== null">
+      得出结果：{{ result }}
+    </div>
+
+    <p class="error">{{ errorMsg }}</p>
+
+    <div class="history" v-if="history.length > 0">
+      <h3>历史记录（最近5次）</h3>
+      <ul>
+        <li v-for="(item, index) in history" :key="index">{{ item }}</li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<script>
+const { createApp } = Vue;
+
+createApp({
+  data() {
+    return {
+      num1: '',
+      num2: '',
+      op: '+',
+      result: null,
+      errorMsg: '',
+      history: []
+    };
+  },
+  methods: {
+    isValidNumber(val) {
+      return /^-?\d+(\.\d+)?$/.test(val);
+    },
+    calculate() {
+      this.errorMsg = '';
+      this.result = null;
+
+      if (!this.isValidNumber(this.num1) || !this.isValidNumber(this.num2)) {
+        this.errorMsg = '请输入合法的数字（支持小数与负数）。';
+        return;
+      }
+
+      let a = parseFloat(this.num1);
+      let b = parseFloat(this.num2);
+
+      if (this.op === '/' && b === 0) {
+        this.errorMsg = '除数不能为 0。';
+        return;
+      }
+
+      let res;
+      switch (this.op) {
+        case '+': res = a + b; break;
+        case '-': res = a - b; break;
+        case '*': res = a * b; break;
+        case '/': res = a / b; break;
+      }
+
+      this.result = Math.round(res * 100) / 100; // 保留两位小数
+
+      // 添加历史记录
+      this.history.unshift(this.result);
+      if (this.history.length > 5) this.history.pop();
+    }
+  }
+}).mount('#app');
+</script>
+</body>
+</html>
