commit
60deda3f73
23 changed files with 4307 additions and 0 deletions
@ -0,0 +1,24 @@ |
|||||
|
# Logs |
||||
|
logs |
||||
|
*.log |
||||
|
npm-debug.log* |
||||
|
yarn-debug.log* |
||||
|
yarn-error.log* |
||||
|
pnpm-debug.log* |
||||
|
lerna-debug.log* |
||||
|
|
||||
|
node_modules |
||||
|
dist |
||||
|
dist-ssr |
||||
|
*.local |
||||
|
|
||||
|
# Editor directories and files |
||||
|
.vscode/* |
||||
|
!.vscode/extensions.json |
||||
|
.idea |
||||
|
.DS_Store |
||||
|
*.suo |
||||
|
*.ntvs* |
||||
|
*.njsproj |
||||
|
*.sln |
||||
|
*.sw? |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"recommendations": ["Vue.volar"] |
||||
|
} |
||||
@ -0,0 +1,5 @@ |
|||||
|
# Vue 3 + TypeScript + Vite |
||||
|
|
||||
|
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
||||
|
|
||||
|
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup). |
||||
@ -0,0 +1,10 @@ |
|||||
|
/* eslint-disable */ |
||||
|
/* prettier-ignore */ |
||||
|
// @ts-nocheck
|
||||
|
// noinspection JSUnusedGlobalSymbols
|
||||
|
// Generated by unplugin-auto-import
|
||||
|
// biome-ignore lint: disable
|
||||
|
export {} |
||||
|
declare global { |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
/* eslint-disable */ |
||||
|
// @ts-nocheck
|
||||
|
// Generated by unplugin-vue-components
|
||||
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
|
// biome-ignore lint: disable
|
||||
|
export {} |
||||
|
|
||||
|
/* prettier-ignore */ |
||||
|
declare module 'vue' { |
||||
|
export interface GlobalComponents { |
||||
|
LocaleSwitcher: typeof import('./src/components/LocaleSwitcher/index.vue')['default'] |
||||
|
ThemeSwitcher: typeof import('./src/components/ThemeSwitcher/index.vue')['default'] |
||||
|
VanButton: typeof import('vant/es')['Button'] |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,61 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8" /> |
||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
||||
|
<meta |
||||
|
name="viewport" |
||||
|
content="width=device-width, viewport-fit=cover, initial-scale=1, user-scalable=no, minimal-ui" |
||||
|
/> |
||||
|
<title>Vite + Vue + TS</title> |
||||
|
<script> |
||||
|
(function flexible(window, document) { |
||||
|
var docEl = document.documentElement; |
||||
|
var dpr = window.devicePixelRatio || 1; |
||||
|
|
||||
|
// adjust body font size |
||||
|
function setBodyFontSize() { |
||||
|
if (document.body) { |
||||
|
document.body.style.fontSize = 12 * dpr + "px"; |
||||
|
} else { |
||||
|
document.addEventListener("DOMContentLoaded", setBodyFontSize); |
||||
|
} |
||||
|
} |
||||
|
setBodyFontSize(); |
||||
|
|
||||
|
// set 1rem = viewWidth / 10 |
||||
|
function setRemUnit() { |
||||
|
var rem = docEl.clientWidth / 10; |
||||
|
docEl.style.fontSize = rem + "px"; |
||||
|
} |
||||
|
|
||||
|
setRemUnit(); |
||||
|
|
||||
|
// reset rem unit on page resize |
||||
|
window.addEventListener("resize", setRemUnit); |
||||
|
window.addEventListener("pageshow", function (e) { |
||||
|
if (e.persisted) { |
||||
|
setRemUnit(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// detect 0.5px supports |
||||
|
if (dpr >= 2) { |
||||
|
var fakeBody = document.createElement("body"); |
||||
|
var testElement = document.createElement("div"); |
||||
|
testElement.style.border = ".5px solid transparent"; |
||||
|
fakeBody.appendChild(testElement); |
||||
|
docEl.appendChild(fakeBody); |
||||
|
if (testElement.offsetHeight === 1) { |
||||
|
docEl.classList.add("hairlines"); |
||||
|
} |
||||
|
docEl.removeChild(fakeBody); |
||||
|
} |
||||
|
})(window, document); |
||||
|
</script> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="app"></div> |
||||
|
<script type="module" src="/src/main.ts"></script> |
||||
|
</body> |
||||
|
</html> |
||||
File diff suppressed because it is too large
@ -0,0 +1,33 @@ |
|||||
|
{ |
||||
|
"name": "my-vue-app", |
||||
|
"private": true, |
||||
|
"version": "0.0.0", |
||||
|
"type": "module", |
||||
|
"scripts": { |
||||
|
"dev": "vite", |
||||
|
"build": "vue-tsc -b && vite build", |
||||
|
"preview": "vite preview" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"@tailwindcss/postcss": "^4.1.4", |
||||
|
"@tailwindcss/vite": "^4.1.4", |
||||
|
"pinia": "^3.0.2", |
||||
|
"tailwindcss": "^4.1.4", |
||||
|
"vant": "^4.9.19", |
||||
|
"vue": "^3.5.13" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@types/node": "^22.15.3", |
||||
|
"@vant/auto-import-resolver": "^1.3.0", |
||||
|
"@vitejs/plugin-vue": "^5.2.2", |
||||
|
"@vue/tsconfig": "^0.7.0", |
||||
|
"postcss": "^8.5.3", |
||||
|
"postcss-pxtorem": "^6.1.0", |
||||
|
"typescript": "~5.7.2", |
||||
|
"unplugin-auto-import": "^19.1.2", |
||||
|
"unplugin-vue-components": "^28.5.0", |
||||
|
"vite": "^6.3.1", |
||||
|
"vue-tsc": "^2.2.8" |
||||
|
}, |
||||
|
"packageManager": "[email protected]+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6" |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,9 @@ |
|||||
|
export default { |
||||
|
plugins: { |
||||
|
"@tailwindcss/postcss": {}, |
||||
|
"postcss-pxtorem": { |
||||
|
rootValue: 37.5, |
||||
|
propList: ["*"], |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,34 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import ThemeSwitcher from "@/components/ThemeSwitcher/index.vue"; |
||||
|
import { useThemeStore } from "@/stores/theme"; |
||||
|
const themeStore = useThemeStore(); |
||||
|
themeStore.initTheme(); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="text-center text-red-300">欢迎来带我的vue3模板</div> |
||||
|
<van-button>asdasd</van-button> |
||||
|
<div> |
||||
|
<div class="pl-1 text-xs">dasd</div> |
||||
|
</div> |
||||
|
<div> |
||||
|
<ThemeSwitcher /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.logo { |
||||
|
height: 6em; |
||||
|
padding: 1.5em; |
||||
|
will-change: filter; |
||||
|
transition: filter 300ms; |
||||
|
} |
||||
|
|
||||
|
.logo:hover { |
||||
|
filter: drop-shadow(0 0 2em #646cffaa); |
||||
|
} |
||||
|
|
||||
|
.logo.vue:hover { |
||||
|
filter: drop-shadow(0 0 2em #42b883aa); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,55 @@ |
|||||
|
@import "tailwindcss"; |
||||
|
|
||||
|
@theme { |
||||
|
--spacing: 4px; |
||||
|
|
||||
|
--breakpoint-sm: 40rem; |
||||
|
--breakpoint-md: 48rem; |
||||
|
--breakpoint-lg: 64rem; |
||||
|
--breakpoint-xl: 80rem; |
||||
|
--breakpoint-2xl: 96rem; |
||||
|
--container-3xs: 16rem; |
||||
|
--container-2xs: 18rem; |
||||
|
--container-xs: 20rem; |
||||
|
--container-sm: 24rem; |
||||
|
--container-md: 28rem; |
||||
|
--container-lg: 32rem; |
||||
|
--container-xl: 36rem; |
||||
|
--container-2xl: 42rem; |
||||
|
--container-3xl: 48rem; |
||||
|
--container-4xl: 56rem; |
||||
|
--container-5xl: 64rem; |
||||
|
--container-6xl: 72rem; |
||||
|
--container-7xl: 80rem; |
||||
|
|
||||
|
--text-xs: 0.32rem; |
||||
|
--text-xs--line-height: calc(1 / 0.32); |
||||
|
--text-sm: 0.373rem; |
||||
|
--text-sm--line-height: calc(1.25 / 0.373); |
||||
|
--text-base: 0.427rem; |
||||
|
--text-base--line-height: calc(1.5 / 0.427); |
||||
|
--text-lg: 0.48rem; |
||||
|
--text-lg--line-height: calc(1.75 / 0.48); |
||||
|
--text-xl: 0.533rem; |
||||
|
--text-xl--line-height: calc(1.75 / 0.533); |
||||
|
/* --text-2xl: 1.5rem; |
||||
|
--text-2xl--line-height: calc(2 / 1.5); |
||||
|
--text-3xl: 1.875rem; |
||||
|
--text-3xl--line-height: calc(2.25 / 1.875); |
||||
|
--text-4xl: 2.25rem; |
||||
|
--text-4xl--line-height: calc(2.5 / 2.25); |
||||
|
--text-5xl: 3rem; |
||||
|
--text-5xl--line-height: 1; |
||||
|
--text-6xl: 3.75rem; |
||||
|
--text-6xl--line-height: 1; |
||||
|
--text-7xl: 4.5rem; |
||||
|
--text-7xl--line-height: 1; |
||||
|
--text-8xl: 6rem; |
||||
|
--text-8xl--line-height: 1; |
||||
|
--text-9xl: 8rem; |
||||
|
--text-9xl--line-height: 1; */ |
||||
|
} |
||||
|
|
||||
|
#app { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
After Width: | Height: | Size: 496 B |
@ -0,0 +1,21 @@ |
|||||
|
<template> |
||||
|
<div class="p-4 space-x-2"> |
||||
|
<button @click="toggleDark" class="px-4 py-2 rounded bg-white dark:bg-black"> |
||||
|
{{ isDark ? '亮色模式' : '暗黑模式' }} |
||||
|
</button> |
||||
|
|
||||
|
<button @click="setTheme('theme-red')" class="px-4 py-2 rounded bg-primary bg-mint-500 bg-primary"> |
||||
|
红色主题 |
||||
|
</button> |
||||
|
|
||||
|
<button @click="setTheme('theme-green')" class="px-4 py-2 rounded bg-primary"> |
||||
|
绿色主题 |
||||
|
</button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { useThemeStore } from '@/stores/theme' |
||||
|
|
||||
|
const { isDark, toggleDark, setTheme } = useThemeStore() |
||||
|
</script> |
||||
@ -0,0 +1,10 @@ |
|||||
|
import { createApp } from "vue"; |
||||
|
import { createPinia } from "pinia"; |
||||
|
import "@/assets/main.css"; |
||||
|
import App from "./App.vue"; |
||||
|
|
||||
|
const pinia = createPinia(); |
||||
|
const app = createApp(App); |
||||
|
|
||||
|
app.use(pinia); |
||||
|
app.mount("#app"); |
||||
@ -0,0 +1,51 @@ |
|||||
|
import { defineStore } from "pinia"; |
||||
|
import { ref } from "vue"; |
||||
|
|
||||
|
export const useThemeStore = defineStore("theme", () => { |
||||
|
const isDark = ref(false); |
||||
|
const themeClass = ref(""); // 主题色 class，比如 'theme-red'
|
||||
|
|
||||
|
function initTheme() { |
||||
|
const systemPrefersDark = window.matchMedia( |
||||
|
"(prefers-color-scheme: dark)" |
||||
|
).matches; |
||||
|
if ( |
||||
|
localStorage.theme === "dark" || |
||||
|
(!("theme" in localStorage) && systemPrefersDark) |
||||
|
) { |
||||
|
isDark.value = true; |
||||
|
document.documentElement.classList.add("dark"); |
||||
|
} else { |
||||
|
isDark.value = false; |
||||
|
document.documentElement.classList.remove("dark"); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function toggleDark() { |
||||
|
isDark.value = !isDark.value; |
||||
|
localStorage.theme = isDark.value ? "dark" : "light"; |
||||
|
if (isDark.value) { |
||||
|
document.documentElement.classList.add("dark"); |
||||
|
} else { |
||||
|
document.documentElement.classList.remove("dark"); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function setTheme(theme: string) { |
||||
|
themeClass.value = theme; |
||||
|
const html = document.documentElement; |
||||
|
|
||||
|
// 移除以前的 theme-xxx 类
|
||||
|
html.classList.forEach((cls) => { |
||||
|
if (cls.startsWith("theme-")) { |
||||
|
html.classList.remove(cls); |
||||
|
} |
||||
|
}); |
||||
|
// 加上新的
|
||||
|
if (theme) { |
||||
|
html.classList.add(theme); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return { isDark, themeClass, toggleDark, setTheme, initTheme }; |
||||
|
}); |
||||
@ -0,0 +1 @@ |
|||||
|
/// <reference types="vite/client" />
|
||||
@ -0,0 +1,18 @@ |
|||||
|
{ |
||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json", |
||||
|
"compilerOptions": { |
||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", |
||||
|
|
||||
|
/* Linting */ |
||||
|
"strict": true, //开启所有严格检查模式 |
||||
|
"noUnusedLocals": true, //不能有没用到的局部变量 |
||||
|
"noUnusedParameters": true, // 不能有没用到的函数参数 |
||||
|
"noFallthroughCasesInSwitch": true, //switch 语句必须用 break 或 return |
||||
|
"noUncheckedSideEffectImports": true, //禁止直接导入有副作用的模块（除非显式标注） |
||||
|
"baseUrl": "./", |
||||
|
"paths": { |
||||
|
"@/*": ["src/*"] |
||||
|
} |
||||
|
}, |
||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
{ |
||||
|
"files": [], |
||||
|
"references": [ |
||||
|
{ "path": "./tsconfig.app.json" }, |
||||
|
{ "path": "./tsconfig.node.json" } |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,24 @@ |
|||||
|
{ |
||||
|
"compilerOptions": { |
||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", |
||||
|
"target": "ES2022", |
||||
|
"lib": ["ES2023"], |
||||
|
"module": "ESNext", |
||||
|
"skipLibCheck": true, |
||||
|
|
||||
|
/* Bundler mode */ |
||||
|
"moduleResolution": "bundler", |
||||
|
"allowImportingTsExtensions": true, |
||||
|
"isolatedModules": true, |
||||
|
"moduleDetection": "force", |
||||
|
"noEmit": true, |
||||
|
|
||||
|
/* Linting */ |
||||
|
"strict": true, |
||||
|
"noUnusedLocals": true, |
||||
|
"noUnusedParameters": true, |
||||
|
"noFallthroughCasesInSwitch": true, |
||||
|
"noUncheckedSideEffectImports": true |
||||
|
}, |
||||
|
"include": ["vite.config.ts"] |
||||
|
} |
||||
@ -0,0 +1,26 @@ |
|||||
|
import { defineConfig } from "vite"; |
||||
|
import vue from "@vitejs/plugin-vue"; |
||||
|
import tailwindcss from "@tailwindcss/vite"; |
||||
|
import path from "path"; |
||||
|
import AutoImport from "unplugin-auto-import/vite"; |
||||
|
import Components from "unplugin-vue-components/vite"; |
||||
|
import { VantResolver } from "@vant/auto-import-resolver"; |
||||
|
|
||||
|
// https://vite.dev/config/
|
||||
|
export default defineConfig({ |
||||
|
plugins: [ |
||||
|
vue(), |
||||
|
tailwindcss(), |
||||
|
AutoImport({ |
||||
|
resolvers: [VantResolver()], |
||||
|
}), |
||||
|
Components({ |
||||
|
resolvers: [VantResolver()], |
||||
|
}), |
||||
|
], |
||||
|
resolve: { |
||||
|
alias: { |
||||
|
"@": path.resolve(__dirname, "src"), |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
Loading…
Reference in new issue