From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Fri, 23 Jul 2021 07:11:02 +0000 (+0800)
Subject: feat: add source code to all templates
X-Git-Tag: v3.0.0-alpha.2~37
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=4b8d6d43d93a8fcc8c932a97360e3656a4ed2265;p=thirdparty%2Fvuejs%2Fcreate-vue.git

feat: add source code to all templates
---

diff --git a/template/source/default/src/App.vue b/template/source/default/src/App.vue
new file mode 100644
index 00000000..a058d171
--- /dev/null
+++ b/template/source/default/src/App.vue
@@ -0,0 +1,22 @@
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + Vite" />
+</template>
+
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+
+// This starter template is using Vue 3 experimental <script setup> SFCs
+// Check out https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/template/source/default/src/assets/logo.png b/template/source/default/src/assets/logo.png
new file mode 100644
index 00000000..f3d2503f
Binary files /dev/null and b/template/source/default/src/assets/logo.png differ
diff --git a/template/source/default/src/components/HelloWorld.vue b/template/source/default/src/components/HelloWorld.vue
new file mode 100644
index 00000000..36a089f1
--- /dev/null
+++ b/template/source/default/src/components/HelloWorld.vue
@@ -0,0 +1,38 @@
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Documentation
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+  </p>
+
+  <button type="button" @click="state.count++">
+    count is: {{ state.count }}
+  </button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+
+const count = ref(0)
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+</style>
diff --git a/template/source/default/src/main.js b/template/source/default/src/main.js
new file mode 100644
index 00000000..01433bca
--- /dev/null
+++ b/template/source/default/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/template/source/spa/src/App.vue b/template/source/spa/src/App.vue
new file mode 100644
index 00000000..b9643551
--- /dev/null
+++ b/template/source/spa/src/App.vue
@@ -0,0 +1,30 @@
+<template>
+  <div id="nav">
+    <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
+  </div>
+  <router-view/>
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
+</style>
diff --git a/template/source/spa/src/assets/logo.png b/template/source/spa/src/assets/logo.png
new file mode 100644
index 00000000..f3d2503f
Binary files /dev/null and b/template/source/spa/src/assets/logo.png differ
diff --git a/template/source/spa/src/components/HelloWorld.vue b/template/source/spa/src/components/HelloWorld.vue
new file mode 100644
index 00000000..51f81a8f
--- /dev/null
+++ b/template/source/spa/src/components/HelloWorld.vue
@@ -0,0 +1,57 @@
+<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 Docs
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+
+const count = ref(0)
+</script>
+
+<style scoped>
+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/source/spa/src/components/__tests__/HelloWorld.spec.js b/template/source/spa/src/components/__tests__/HelloWorld.spec.js
new file mode 100644
index 00000000..087c9561
--- /dev/null
+++ b/template/source/spa/src/components/__tests__/HelloWorld.spec.js
@@ -0,0 +1,22 @@
+import { mount } from '@cypress/vue'
+import HelloWorld from '../HelloWorld.vue'
+
+describe('HelloWorld', () => {
+  it('playground', () => {
+    mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+  })
+
+  it('renders properly', () => {
+    mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+    cy.get('h1').should('contain', 'Hello Cypress')
+  })
+
+  it('adds 1 when clicking the plus button', () => {
+    mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+    
+    cy.get('button')
+      .should('contain', '0')
+      .click()
+      .should('contain', '1')
+  })
+})
diff --git a/template/source/spa/src/main.js b/template/source/spa/src/main.js
new file mode 100644
index 00000000..ab55e6d5
--- /dev/null
+++ b/template/source/spa/src/main.js
@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import router from './router'
+import store from './store'
+
+const app = createApp(App)
+
+app.use(router)
+app.use(store)
+
+app.mount('#app')
diff --git a/template/source/spa/src/router/index.js b/template/source/spa/src/router/index.js
new file mode 100644
index 00000000..26bf8e7e
--- /dev/null
+++ b/template/source/spa/src/router/index.js
@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    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/About.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+})
+
+export default router
diff --git a/template/source/spa/src/store/index.js b/template/source/spa/src/store/index.js
new file mode 100644
index 00000000..5f05f193
--- /dev/null
+++ b/template/source/spa/src/store/index.js
@@ -0,0 +1,12 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
diff --git a/template/source/spa/src/views/About.vue b/template/source/spa/src/views/About.vue
new file mode 100644
index 00000000..3fa28070
--- /dev/null
+++ b/template/source/spa/src/views/About.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
diff --git a/template/source/spa/src/views/Home.vue b/template/source/spa/src/views/Home.vue
new file mode 100644
index 00000000..d74dda2c
--- /dev/null
+++ b/template/source/spa/src/views/Home.vue
@@ -0,0 +1,19 @@
+<template>
+  <img alt="Vue logo" src="@/assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + Vite" />
+</template>
+
+<script setup>
+import HelloWorld from '@/components/HelloWorld.vue'
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/template/source/typescript-default/src/App.vue b/template/source/typescript-default/src/App.vue
new file mode 100644
index 00000000..f1611b6f
--- /dev/null
+++ b/template/source/typescript-default/src/App.vue
@@ -0,0 +1,19 @@
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+</template>
+
+<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/template/source/typescript-default/src/assets/logo.png b/template/source/typescript-default/src/assets/logo.png
new file mode 100644
index 00000000..f3d2503f
Binary files /dev/null and b/template/source/typescript-default/src/assets/logo.png differ
diff --git a/template/source/typescript-default/src/components/HelloWorld.vue b/template/source/typescript-default/src/components/HelloWorld.vue
new file mode 100644
index 00000000..2dac5234
--- /dev/null
+++ b/template/source/typescript-default/src/components/HelloWorld.vue
@@ -0,0 +1,54 @@
+<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 Docs
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  msg: String,
+}>()
+
+const count = ref(0)
+</script>
+
+<style scoped>
+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/source/typescript-default/src/main.ts b/template/source/typescript-default/src/main.ts
new file mode 100644
index 00000000..01433bca
--- /dev/null
+++ b/template/source/typescript-default/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/template/source/typescript-spa/package.json b/template/source/typescript-spa/package.json
new file mode 100644
index 00000000..364bb2bf
--- /dev/null
+++ b/template/source/typescript-spa/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "vue-router": "^4.0.10",
+    "vuex": "^4.0.2"
+  }
+}
diff --git a/template/source/typescript-spa/src/components/HelloWorld.vue b/template/source/typescript-spa/src/components/HelloWorld.vue
index 383c3097..2dac5234 100644
--- a/template/source/typescript-spa/src/components/HelloWorld.vue
+++ b/template/source/typescript-spa/src/components/HelloWorld.vue
@@ -26,14 +26,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineComponent } from 'vue'
-
-defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
-})
+import { ref } from 'vue'
+
+defineProps<{
+  msg: String,
+}>()
 
 const count = ref(0)
 </script>
diff --git a/template/source/typescript-spa/src/router/index.ts b/template/source/typescript-spa/src/router/index.ts
index 8e2f95ee..06036285 100644
--- a/template/source/typescript-spa/src/router/index.ts
+++ b/template/source/typescript-spa/src/router/index.ts
@@ -1,4 +1,6 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+
 import Home from '../views/Home.vue'
 
 const routes: Array<RouteRecordRaw> = [