From 793adb0c3d63149f292787f1c5cbf9db06e315c3 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Wed, 11 Aug 2021 16:20:47 +0800
Subject: [PATCH] fix: fix js HelloWorld template

---
 .../default/src/components/HelloWorld.vue     | 29 +++++++++++++++----
 playground/jsx/src/components/HelloWorld.vue  | 29 +++++++++++++++----
 .../src/components/HelloWorld.vue             | 29 +++++++++++++++----
 playground/vuex/src/components/HelloWorld.vue | 29 +++++++++++++++----
 .../with-tests/src/components/HelloWorld.vue  | 29 +++++++++++++++----
 .../default/src/components/HelloWorld.vue     | 29 +++++++++++++++----
 6 files changed, 144 insertions(+), 30 deletions(-)

diff --git a/playground/default/src/components/HelloWorld.vue b/playground/default/src/components/HelloWorld.vue
index 36a089f1..51f81a8f 100644
--- a/playground/default/src/components/HelloWorld.vue
+++ b/playground/default/src/components/HelloWorld.vue
@@ -1,17 +1,24 @@
 <template>
   <h1>{{ msg }}</h1>
 
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
   <p>
     <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
+      Vite Docs
     </a>
     |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
   </p>
 
-  <button type="button" @click="state.count++">
-    count is: {{ state.count }}
-  </button>
+  <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
     Edit
     <code>components/HelloWorld.vue</code> to test hot module replacement.
@@ -35,4 +42,16 @@ const count = ref(0)
 a {
   color: #42b983;
 }
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
 </style>
diff --git a/playground/jsx/src/components/HelloWorld.vue b/playground/jsx/src/components/HelloWorld.vue
index 36a089f1..51f81a8f 100644
--- a/playground/jsx/src/components/HelloWorld.vue
+++ b/playground/jsx/src/components/HelloWorld.vue
@@ -1,17 +1,24 @@
 <template>
   <h1>{{ msg }}</h1>
 
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
   <p>
     <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
+      Vite Docs
     </a>
     |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
   </p>
 
-  <button type="button" @click="state.count++">
-    count is: {{ state.count }}
-  </button>
+  <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
     Edit
     <code>components/HelloWorld.vue</code> to test hot module replacement.
@@ -35,4 +42,16 @@ const count = ref(0)
 a {
   color: #42b983;
 }
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
 </style>
diff --git a/playground/vuex-with-tests/src/components/HelloWorld.vue b/playground/vuex-with-tests/src/components/HelloWorld.vue
index 36a089f1..51f81a8f 100644
--- a/playground/vuex-with-tests/src/components/HelloWorld.vue
+++ b/playground/vuex-with-tests/src/components/HelloWorld.vue
@@ -1,17 +1,24 @@
 <template>
   <h1>{{ msg }}</h1>
 
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
   <p>
     <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
+      Vite Docs
     </a>
     |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
   </p>
 
-  <button type="button" @click="state.count++">
-    count is: {{ state.count }}
-  </button>
+  <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
     Edit
     <code>components/HelloWorld.vue</code> to test hot module replacement.
@@ -35,4 +42,16 @@ const count = ref(0)
 a {
   color: #42b983;
 }
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
 </style>
diff --git a/playground/vuex/src/components/HelloWorld.vue b/playground/vuex/src/components/HelloWorld.vue
index 36a089f1..51f81a8f 100644
--- a/playground/vuex/src/components/HelloWorld.vue
+++ b/playground/vuex/src/components/HelloWorld.vue
@@ -1,17 +1,24 @@
 <template>
   <h1>{{ msg }}</h1>
 
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
   <p>
     <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
+      Vite Docs
     </a>
     |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
   </p>
 
-  <button type="button" @click="state.count++">
-    count is: {{ state.count }}
-  </button>
+  <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
     Edit
     <code>components/HelloWorld.vue</code> to test hot module replacement.
@@ -35,4 +42,16 @@ const count = ref(0)
 a {
   color: #42b983;
 }
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
 </style>
diff --git a/playground/with-tests/src/components/HelloWorld.vue b/playground/with-tests/src/components/HelloWorld.vue
index 36a089f1..51f81a8f 100644
--- a/playground/with-tests/src/components/HelloWorld.vue
+++ b/playground/with-tests/src/components/HelloWorld.vue
@@ -1,17 +1,24 @@
 <template>
   <h1>{{ msg }}</h1>
 
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
   <p>
     <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
+      Vite Docs
     </a>
     |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
   </p>
 
-  <button type="button" @click="state.count++">
-    count is: {{ state.count }}
-  </button>
+  <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
     Edit
     <code>components/HelloWorld.vue</code> to test hot module replacement.
@@ -35,4 +42,16 @@ const count = ref(0)
 a {
   color: #42b983;
 }
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
 </style>
diff --git a/template/code/default/src/components/HelloWorld.vue b/template/code/default/src/components/HelloWorld.vue
index 36a089f1..51f81a8f 100644
--- a/template/code/default/src/components/HelloWorld.vue
+++ b/template/code/default/src/components/HelloWorld.vue
@@ -1,17 +1,24 @@
 <template>
   <h1>{{ msg }}</h1>
 
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
   <p>
     <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
+      Vite Docs
     </a>
     |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
   </p>
 
-  <button type="button" @click="state.count++">
-    count is: {{ state.count }}
-  </button>
+  <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
     Edit
     <code>components/HelloWorld.vue</code> to test hot module replacement.
@@ -35,4 +42,16 @@ const count = ref(0)
 a {
   color: #42b983;
 }
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
 </style>
-- 
2.39.5