+
+
+
+ + + More instructions are available in
README.md.
+
+
+
+
+
+
diff --git a/components_vue3/src/components/icons/IconCommunity.vue b/components_vue3/src/components/icons/IconCommunity.vue
new file mode 100644
index 0000000..2dc8b05
--- /dev/null
+++ b/components_vue3/src/components/icons/IconCommunity.vue
@@ -0,0 +1,7 @@
+
+
+
diff --git a/components_vue3/src/components/icons/IconDocumentation.vue b/components_vue3/src/components/icons/IconDocumentation.vue
new file mode 100644
index 0000000..6d4791c
--- /dev/null
+++ b/components_vue3/src/components/icons/IconDocumentation.vue
@@ -0,0 +1,7 @@
+
+
+
diff --git a/components_vue3/src/components/icons/IconEcosystem.vue b/components_vue3/src/components/icons/IconEcosystem.vue
new file mode 100644
index 0000000..c3a4f07
--- /dev/null
+++ b/components_vue3/src/components/icons/IconEcosystem.vue
@@ -0,0 +1,7 @@
+
+
+
diff --git a/components_vue3/src/components/icons/IconSupport.vue b/components_vue3/src/components/icons/IconSupport.vue
new file mode 100644
index 0000000..7452834
--- /dev/null
+++ b/components_vue3/src/components/icons/IconSupport.vue
@@ -0,0 +1,7 @@
+
+
+
diff --git a/components_vue3/src/components/icons/IconTooling.vue b/components_vue3/src/components/icons/IconTooling.vue
new file mode 100644
index 0000000..660598d
--- /dev/null
+++ b/components_vue3/src/components/icons/IconTooling.vue
@@ -0,0 +1,19 @@
+
+
+
+
diff --git a/components_vue3/src/main.ts b/components_vue3/src/main.ts
new file mode 100644
index 0000000..5a5dbdb
--- /dev/null
+++ b/components_vue3/src/main.ts
@@ -0,0 +1,11 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')
diff --git a/components_vue3/src/router/index.ts b/components_vue3/src/router/index.ts
new file mode 100644
index 0000000..a49ae50
--- /dev/null
+++ b/components_vue3/src/router/index.ts
@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+ history: createWebHistory(import.meta.env.BASE_URL),
+ routes: [
+ {
+ path: '/',
+ name: 'home',
+ component: HomeView
+ },
+ {
+ path: '/about',
+ name: 'about',
+ // route level code-splitting
+ // this generates a separate chunk (About.[hash].js) for this route
+ // which is lazy-loaded when the route is visited.
+ component: () => import('../views/AboutView.vue')
+ }
+ ]
+})
+
+export default router
diff --git a/components_vue3/src/views/AboutView.vue b/components_vue3/src/views/AboutView.vue
new file mode 100644
index 0000000..756ad2a
--- /dev/null
+++ b/components_vue3/src/views/AboutView.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components_vue3/src/views/HomeView.vue b/components_vue3/src/views/HomeView.vue
new file mode 100644
index 0000000..d5c0217
--- /dev/null
+++ b/components_vue3/src/views/HomeView.vue
@@ -0,0 +1,9 @@
+
+
+
+ This is an about page
+
-
diff --git a/hello_vue3/src/components/Demo.vue b/hello_vue3/src/components/Login.vue
similarity index 93%
rename from hello_vue3/src/components/Demo.vue
rename to hello_vue3/src/components/Login.vue
index 7abb669..e8b1f86 100644
--- a/hello_vue3/src/components/Demo.vue
+++ b/hello_vue3/src/components/Login.vue
@@ -109,14 +109,25 @@ let handleLogin = () => {
z-index: 1;
justify-content: center;
text-align: center;
+ outline: none;
background-color: lightseagreen;
margin: 0 auto; /* 水平居中 */
- display: block; /* 使按钮成为块级元素 */
+ display: block; /*使按钮成为块级元素 */
transition: background-color 0.3s ease; /* 添加简单的背景色过渡效果 */
}
+.input-box button {
+ user-select: none;
+}
+
+.input-box button:focus {
+ /* 焦点在的时候变化颜色 */
+ background-color: #3cb371;
+}
+
.input-box button:hover {
- background-color: #3cb371; /* 悬停时的背景色 */
+ /* 鼠标悬停颜色变化 */
+ background-color: #3cb371;
}
/* 接下来是猫头鹰的样式 */