Skip to content

Commit f883f7a

Browse files
axiaoanaxiaoan
committed
chore: add new examples
1 parent 49c665c commit f883f7a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1142
-0
lines changed

‎examples/basic/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/basic/bin/www.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// Start server
2+
const { startServer } = require('vite-ssr-vue3/express')
3+
const { createApp } = require('../dist/server/main.cjs')
4+
5+
startServer({ createApp })

‎examples/basic/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎examples/basic/package.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "basic",
3+
"version": "0.0.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite-ssr --port 3333",
7+
"build": "vite-ssr build",
8+
"serve": "vite-ssr --mode production",
9+
"preview": "node ./bin/www"
10+
},
11+
"dependencies": {
12+
"vue": "^3.2.25"
13+
},
14+
"devDependencies": {
15+
"@vitejs/plugin-vue": "^2.3.0",
16+
"typescript": "^4.5.4",
17+
"vite": "^2.9.1",
18+
"vite-plugin-pages": "^0.22.0",
19+
"vite-ssr-vue3": "workspace:*"
20+
}
21+
}

‎examples/basic/public/favicon.ico

4.19 KB
Binary file not shown.

‎examples/basic/src/App.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup lang="ts">
2+
// This starter template is using Vue 3 <script setup> SFCs
3+
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
4+
import HelloWorld from './components/HelloWorld.vue'
5+
</script>
6+
7+
<template>
8+
<img alt="Vue logo" src="./assets/logo.png">
9+
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
10+
<router-view />
11+
</template>
12+
13+
<style>
14+
#app {
15+
font-family: Avenir, Helvetica, Arial, sans-serif;
16+
-webkit-font-smoothing: antialiased;
17+
-moz-osx-font-smoothing: grayscale;
18+
text-align: center;
19+
color: #2c3e50;
20+
margin-top: 60px;
21+
}
22+
</style>

‎examples/basic/src/assets/logo.png

6.69 KB
Loading

‎examples/basic/src/components/HelloWorld.vue

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
4+
defineProps<{ msg: string }>()
5+
6+
const count = ref(0)
7+
</script>
8+
9+
<template>
10+
<h1>{{ msg }}</h1>
11+
12+
<p>
13+
Recommended IDE setup:
14+
<a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
15+
+
16+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
17+
</p>
18+
19+
<p>See <code>README.md</code> for more information.</p>
20+
21+
<p>
22+
<a href="https://vitejs.dev/guide/features.html" target="_blank">
23+
Vite Docs
24+
</a>
25+
|
26+
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
27+
</p>
28+
29+
<button type="button" @click="count++">
30+
count is: {{ count }}
31+
</button>
32+
<p>
33+
Edit
34+
<code>components/HelloWorld.vue</code> to test hot module replacement.
35+
</p>
36+
</template>
37+
38+
<style scoped>
39+
a {
40+
color: #42b983;
41+
}
42+
43+
label {
44+
margin: 0 0.5em;
45+
font-weight: bold;
46+
}
47+
48+
code {
49+
background-color: #eee;
50+
padding: 2px 4px;
51+
border-radius: 4px;
52+
color: #304455;
53+
}
54+
</style>

‎examples/basic/src/main.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { ViteSSR } from 'vite-ssr-vue3'
2+
import routes from 'virtual:generated-pages'
3+
import App from './App.vue'
4+
5+
export const createApp = ViteSSR(App, { routes })

‎examples/basic/src/pages/fetch.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script setup lang="ts">
2+
3+
</script>
4+
5+
<template>
6+
<div>Fetch Page</div>
7+
</template>

0 commit comments

Comments
 (0)