U 更新 更加直观的看到页面展示

src/assets/common.css

@@ -0,0 +1,11 @@
+html,
+body {
+  height: 100vh;
+  width: 100vw;
+}
+
+#app {
+  height: 100vh;
+  width: 100vw;
+  text-align: center;
+}

src/main.js

@@ -1,4 +1,5 @@
 import { createApp } from 'vue';
+import './assets/common.css';
 import './tailwindcss.css';
 import App from './App.vue';
 import router from './routes';

src/pages/about.vue

@@ -1,7 +1,20 @@
 <template>
-  <div>about page</div>
-  <p>{{ store.state.count }}</p>
-  <button @click="toHome">toHome</button>
+  <div class="mt-20 mb-10 text-6xl">About Page</div>
+  <p class="mb-5 caret-green-400 text-4xl">{{ store.state.count }}</p>
+  <div class="mr-2 inline-flex rounded-md shadow">
+    <button
+      class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out hover:bg-indigo-500 focus:outline-none"
+      @click="toHome"
+    >
+      To Home Page
+    </button>
+  </div>
+  <button
+    class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out hover:bg-indigo-500 focus:outline-none"
+    @click="increment"
+  >
+    +
+  </button>
 </template>
 
 <script setup>
@@ -11,4 +24,9 @@ import store from '../store';
 const toHome = () => {
   router.push('/');
 };
+
+const increment = () => {
+  store.commit('increment');
+  console.log(store.state.count);
+};
 </script>

src/pages/home.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>home page</div>
-  <p>{{ store.state.count }}</p>
+  <div class="mt-20 mb-10 text-6xl">Home Page</div>
+  <p class="mb-5 caret-red-600 text-4xl">{{ store.state.count }}</p>
   <div class="mr-2 inline-flex rounded-md shadow">
     <button
       class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out hover:bg-indigo-500 focus:outline-none"