Skip to content

Commit 162665b

Browse files
ShenQingchuanShenQingchuan
committed
init: create playground project
0 parents  commit 162665b

23 files changed

+400
-0
lines changed

Diff for: ‎.editorconfig

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_size = 2
6+
end_of_line = lf
7+
indent_style = space
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
trim_trailing_whitespace = false

Diff for: ‎.gitignore

+24
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?

Diff for: ‎.npmrc

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
prefer-offline=true
2+
shamefully-hoist=true

Diff for: ‎.vscode/extensions.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["ShenQingchuan.vue-vine-extension"]
3+
}

Diff for: ‎README.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Vue Vine App
2+
3+
This project was generated with [create-vue-vine](https://github.com/vue-vine/vue-vine/tree/main/packages/create-vue-vine).
4+
5+
Learn more about Vue Vine in the [Vue Vine documentation](https://vue-vine.dev/)
6+
7+
## Recommended IDE Setup
8+
9+
[VSCode](https://code.visualstudio.com/) + [Vue Vine Extension](https://marketplace.visualstudio.com/items?itemName=ShenQingchuan.vue-vine-extension).
10+
11+
## Customize configuration
12+
13+
See [Vite Configuration Reference](https://vitejs.dev/config/).
14+
15+
## Project Setup
16+
17+
```sh
18+
pnpm install
19+
```
20+
21+
### Compile and Hot-Reload for Development
22+
23+
```sh
24+
pnpm dev
25+
```
26+
27+
### Compile and Minify for Production
28+
29+
```sh
30+
pnpm build
31+
```

Diff for: ‎eslint.config.mjs

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// @ts-check
2+
3+
import antfu from '@antfu/eslint-config'
4+
import VueVine from '@vue-vine/eslint-config'
5+
6+
export default antfu(
7+
{
8+
rules: {
9+
/* Override Antfu's default settings */
10+
},
11+
},
12+
...VueVine(), // Load VueVine's ESLint config
13+
)

Diff for: ‎index.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="description" content="Vue Vine Template">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
9+
<title>Vue Vine Project</title>
10+
</head>
11+
12+
<body>
13+
<div id="app"></div>
14+
<noscript>
15+
<div>Please enable JavaScript to use this application.</div>
16+
</noscript>
17+
<script>
18+
(function () {
19+
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
20+
const setting = localStorage.getItem('color-schema') || 'auto'
21+
if (setting === 'dark' || (prefersDark && setting !== 'light'))
22+
document.documentElement.classList.toggle('dark', true)
23+
})()
24+
</script>
25+
<script type="module" src="/src/main.ts"></script>
26+
</body>
27+
28+
</html>

Diff for: ‎package.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "vue-vine-playground",
3+
"type": "module",
4+
"version": "0.0.1",
5+
"private": true,
6+
"description": "A vue-vine app created with create-vue-vine",
7+
"scripts": {
8+
"dev": "vite",
9+
"build": "run-p type-check only-build",
10+
"preview": "vite preview",
11+
"lint": "eslint src --cache",
12+
"lint:fix": "eslint src --cache --fix",
13+
"type-check": "vue-vine-tsc --noEmit --composite false",
14+
"only-build": "vite build"
15+
},
16+
"dependencies": {
17+
"pinia": "^2.3.0",
18+
"vue": "^3.5.13",
19+
"vue-router": "^4.4.5"
20+
},
21+
"devDependencies": {
22+
"@antfu/eslint-config": "^3.9.2",
23+
"@types/node": "^20.17.6",
24+
"@vue-vine/eslint-config": "^0.2.13",
25+
"eslint": "^9.15.0",
26+
"npm-run-all": "^4.1.5",
27+
"tailwindcss": "^3.4.17",
28+
"typescript": "^5.6.3",
29+
"vite": "^6.0.0",
30+
"vue-vine": "^0.2.5",
31+
"vue-vine-tsc": "^0.1.5"
32+
}
33+
}

Diff for: ‎postcss.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
},
5+
}

Diff for: ‎public/favicon.svg

+9
Loading

Diff for: ‎src/app.vine.ts

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import VineLogo from '@/assets/vine-logo.png'
2+
3+
export function App() {
4+
vineStyle.scoped(`
5+
.slogan {
6+
text-wrap: pretty;
7+
}
8+
`)
9+
10+
return vine`
11+
<div class="max-w-screen-lg mx-auto h-full px-12 py-24">
12+
<header class="header flex justify-between items-center pb-4">
13+
<h1 class="font-medium text-lg">Vue Vine</h1>
14+
15+
<nav
16+
class="nav-menu flex gap-2 font-medium font-sans text-sm tracking-tight"
17+
>
18+
<router-link
19+
class="px-4 py-1 transition-colors rounded-md hover:bg-[#88888828] active:bg-[#88888850]"
20+
active-class="text-[#3451b2] dark:text-[#5777e2]"
21+
to="/"
22+
>
23+
Home
24+
</router-link>
25+
<router-link
26+
class="px-4 py-1 transition-colors rounded-md hover:bg-[#88888828] active:bg-[#88888850]"
27+
active-class="text-[#3451b2] dark:text-[#5777e2]"
28+
to="/about"
29+
>
30+
About
31+
</router-link>
32+
</nav>
33+
</header>
34+
35+
<main class="main flex h-full">
36+
<div
37+
class="slogan flex items-center justify-center flex-col px-4 pb-4 text-lg mx-auto max-w-content"
38+
>
39+
<div class="slogan-logo">
40+
<img :src="VineLogo" alt="Vine Logo" width="128" height="128" />
41+
</div>
42+
<h2 class="font-medium my-2">Another style to write Vue</h2>
43+
<p class="text-sm">
44+
Provide more flexibility for writing Vue components.
45+
</p>
46+
</div>
47+
48+
<div class="content flex-1 p-4">
49+
<router-view />
50+
</div>
51+
</main>
52+
</div>
53+
`
54+
}

Diff for: ‎src/assets/vine-logo.png

295 KB
Loading

Diff for: ‎src/main.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { createPinia } from 'pinia'
2+
import { createApp } from 'vue'
3+
import { App as VineApp } from './app.vine'
4+
import router from './router'
5+
6+
import './styles'
7+
8+
const app = createApp(VineApp)
9+
10+
app.use(router)
11+
app.use(createPinia())
12+
app.mount('#app')

Diff for: ‎src/pages/about.vine.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default function About() {
2+
return vine`
3+
<div class="h-full flex justify-center items-center">Enjoy~</div>
4+
`
5+
}

Diff for: ‎src/pages/home.vine.ts

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { ref } from 'vue'
2+
3+
interface CounterProps {
4+
step: number
5+
}
6+
7+
function Counter(props: CounterProps) {
8+
const count = ref(0)
9+
10+
vineStyle.scoped(`
11+
.action-btn {
12+
padding: .413rem 1rem;
13+
border: 1px solid #88888850;
14+
background-color: transparent;
15+
user-select: none;
16+
cursor: pointer;
17+
}
18+
`)
19+
20+
return vine`
21+
<div class="counter h-full flex flex-col justify-center items-center mb-4">
22+
<p class="title text-lg mb-4">Count: {{ count }}</p>
23+
24+
<div class="actions flex gap-2">
25+
<button
26+
class="action-btn rounded-md transition-colors hover:bg-[#88888828] active:bg-[#88888850]"
27+
@click="count += step"
28+
>
29+
Increment(+{{ step }})
30+
</button>
31+
<button
32+
class="action-btn rounded-md transition-colors hover:bg-[#88888828] active:bg-[#88888850]"
33+
@click="count -= step"
34+
>
35+
Decrement(-{{ step }})
36+
</button>
37+
</div>
38+
</div>
39+
`
40+
}
41+
42+
export function Home() {
43+
return vine`
44+
<Counter :step="2" />
45+
`
46+
}

Diff for: ‎src/router/index.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Home } from '@/pages/home.vine'
2+
3+
import { createRouter, createWebHashHistory } from 'vue-router'
4+
5+
const routes = [
6+
{ path: '/', component: Home },
7+
{ path: '/about', component: () => import('@/pages/about.vine') },
8+
]
9+
10+
const router = createRouter({
11+
history: createWebHashHistory(),
12+
routes,
13+
})
14+
15+
export default router

Diff for: ‎src/stores/counter.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { defineStore } from 'pinia'
2+
import { ref } from 'vue'
3+
4+
export const useCounterStore = defineStore(() => {
5+
const counter = ref(0)
6+
7+
function increment(step = 1) {
8+
counter.value += step
9+
}
10+
11+
return {
12+
counter,
13+
increment,
14+
}
15+
})

Diff for: ‎src/styles/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import './tailwind.css'
2+
import './main.css'

Diff for: ‎src/styles/main.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
html {
8+
background-color: light-dark(#fff, #121212);
9+
color: light-dark(#121212, #efefef);
10+
color-scheme: light dark;
11+
}
12+
13+
a {
14+
text-decoration: none;
15+
color: inherit;
16+
}
17+
18+
img {
19+
display: block;
20+
}
21+
22+
html,
23+
body,
24+
#app {
25+
height: 100%;
26+
}

Diff for: ‎src/styles/tailwind.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

Diff for: ‎tailwind.config.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/** @type {import('tailwindcss').Config} */
2+
const config = {
3+
content: ['./src/**/*.{html,ts}'],
4+
theme: {
5+
extend: {},
6+
},
7+
plugins: [],
8+
}
9+
10+
export default config

0 commit comments

Comments
 (0)