14 changed files with 3944 additions and 2838 deletions
@ -0,0 +1,8 @@ |
|||||
|
{ |
||||
|
"trailingComma": "es5", |
||||
|
"tabWidth": 2, |
||||
|
"semi": true, |
||||
|
"printWidth": 120, |
||||
|
"bracketSameLine": false, |
||||
|
"plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"] |
||||
|
} |
||||
@ -0,0 +1,28 @@ |
|||||
|
// eslint.config.mjs
|
||||
|
import tsPlugin from "@typescript-eslint/eslint-plugin"; |
||||
|
import tsParser from "@typescript-eslint/parser"; |
||||
|
import vue from "eslint-plugin-vue"; |
||||
|
import vueParser from "vue-eslint-parser"; |
||||
|
|
||||
|
export default [ |
||||
|
{ |
||||
|
files: ["**/*.ts", "**/*.vue"], |
||||
|
languageOptions: { |
||||
|
parser: vueParser, |
||||
|
parserOptions: { |
||||
|
parser: tsParser, // 关键点：解析 `<script lang="ts">`
|
||||
|
ecmaVersion: 2020, |
||||
|
sourceType: "module", |
||||
|
extraFileExtensions: [".vue"], |
||||
|
}, |
||||
|
}, |
||||
|
plugins: { |
||||
|
"@typescript-eslint": tsPlugin, |
||||
|
vue, |
||||
|
}, |
||||
|
rules: { |
||||
|
"vue/multi-word-component-names": "off", |
||||
|
"@typescript-eslint/no-unused-vars": "error", |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
File diff suppressed because it is too large
@ -6,7 +6,10 @@ |
|||||
"scripts": { |
"scripts": { |
||||
"dev": "vite", |
"dev": "vite", |
||||
"build": "vue-tsc -b && vite build", |
"build": "vue-tsc -b && vite build", |
||||
"preview": "vite preview" |
"preview": "vite preview", |
||||
|
"lint": "eslint --ext .vue,.ts,.js src", |
||||
|
"lint:fix": "eslint --ext .vue,.ts,.js src --fix", |
||||
|
"format": "prettier --write \"src/**/*.{js,ts,vue,json,css,scss,md}\"" |
||||
}, |
}, |
||||
"dependencies": { |
"dependencies": { |
||||
"@tailwindcss/postcss": "^4.1.4", |
"@tailwindcss/postcss": "^4.1.4", |
||||
@ -18,15 +21,29 @@ |
|||||
}, |
}, |
||||
"devDependencies": { |
"devDependencies": { |
||||
"@types/node": "^22.15.3", |
"@types/node": "^22.15.3", |
||||
|
"@typescript-eslint/eslint-plugin": "^8.31.1", |
||||
|
"@typescript-eslint/parser": "^8.31.1", |
||||
"@vant/auto-import-resolver": "^1.3.0", |
"@vant/auto-import-resolver": "^1.3.0", |
||||
"@vitejs/plugin-vue": "^5.2.2", |
"@vitejs/plugin-vue": "^5.2.2", |
||||
|
"@vue/eslint-config-standard": "^9.0.1", |
||||
"@vue/tsconfig": "^0.7.0", |
"@vue/tsconfig": "^0.7.0", |
||||
|
"eslint": "^9.25.1", |
||||
|
"eslint-config-prettier": "^10.1.2", |
||||
|
"eslint-plugin-import": "^2.31.0", |
||||
|
"eslint-plugin-prettier": "^5.2.6", |
||||
|
"eslint-plugin-vue": "^10.1.0", |
||||
|
"globals": "^16.0.0", |
||||
"postcss": "^8.5.3", |
"postcss": "^8.5.3", |
||||
"postcss-pxtorem": "^6.1.0", |
"postcss-pxtorem": "^6.1.0", |
||||
|
"prettier": "^3.5.3", |
||||
|
"prettier-plugin-organize-imports": "^4.1.0", |
||||
|
"prettier-plugin-tailwindcss": "^0.6.11", |
||||
"typescript": "~5.7.2", |
"typescript": "~5.7.2", |
||||
|
"typescript-eslint": "^8.31.1", |
||||
"unplugin-auto-import": "^19.1.2", |
"unplugin-auto-import": "^19.1.2", |
||||
"unplugin-vue-components": "^28.5.0", |
"unplugin-vue-components": "^28.5.0", |
||||
"vite": "^6.3.1", |
"vite": "^6.3.1", |
||||
|
"vue-eslint-parser": "^10.1.3", |
||||
"vue-tsc": "^2.2.8" |
"vue-tsc": "^2.2.8" |
||||
}, |
}, |
||||
"packageManager": "[email protected]+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6" |
"packageManager": "[email protected]+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6" |
||||
|
|||||
File diff suppressed because it is too large
@ -1,34 +1,21 @@ |
|||||
<script setup lang="ts"> |
|
||||
import ThemeSwitcher from "@/components/ThemeSwitcher/index.vue"; |
|
||||
import { useThemeStore } from "@/stores/theme"; |
|
||||
const themeStore = useThemeStore(); |
|
||||
themeStore.initTheme(); |
|
||||
</script> |
|
||||
|
|
||||
<template> |
<template> |
||||
<div class="text-center text-red-300">欢迎来带我的vue3模板</div> |
<div class="text-center text-red-300">欢迎来带我的vue3模板</div> |
||||
<van-button>asdasd</van-button> |
<van-button>asdasd</van-button> |
||||
<div> |
<div> |
||||
<div class="pl-1 text-xs">dasd</div> |
<div class="w-2 border-2 border-amber-100 pl-0.5 text-xs font-bold">dasd</div> |
||||
</div> |
</div> |
||||
<div> |
<div> |
||||
<ThemeSwitcher /> |
<ThemeSwitcher /> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<style scoped> |
<script setup lang="ts"> |
||||
.logo { |
import ThemeSwitcher from "@/components/ThemeSwitcher/index.vue"; |
||||
height: 6em; |
import { useThemeStore } from "@/stores/theme"; |
||||
padding: 1.5em; |
import { ref } from "vue"; |
||||
will-change: filter; |
|
||||
transition: filter 300ms; |
|
||||
} |
|
||||
|
|
||||
.logo:hover { |
|
||||
filter: drop-shadow(0 0 2em #646cffaa); |
|
||||
} |
|
||||
|
|
||||
.logo.vue:hover { |
const themeStore = useThemeStore(); |
||||
filter: drop-shadow(0 0 2em #42b883aa); |
themeStore.initTheme(); |
||||
} |
const a = ref("das"); |
||||
</style> |
console.log(a); |
||||
|
</script> |
||||
|
|||||
@ -1,21 +1,17 @@ |
|||||
<template> |
<template> |
||||
<div class="p-4 space-x-2"> |
<div class="space-x-2 p-4"> |
||||
<button @click="toggleDark" class="px-4 py-2 rounded bg-white dark:bg-black"> |
<button @click="toggleDark" class="rounded bg-white px-4 py-2 dark:bg-black"> |
||||
{{ isDark ? '亮色模式' : '暗黑模式' }} |
{{ isDark ? "亮色模式" : "暗黑模式" }} |
||||
</button> |
</button> |
||||
|
|
||||
<button @click="setTheme('theme-red')" class="px-4 py-2 rounded bg-primary bg-mint-500 bg-primary"> |
<button @click="setTheme('theme-red')" class="bg-primary bg-mint-500 bg-primary rounded px-4 py-2">红色主题</button> |
||||
红色主题 |
|
||||
</button> |
|
||||
|
|
||||
<button @click="setTheme('theme-green')" class="px-4 py-2 rounded bg-primary"> |
<button @click="setTheme('theme-green')" class="bg-primary rounded px-4 py-2">绿色主题</button> |
||||
绿色主题 |
</div> |
||||
</button> |
|
||||
</div> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import { useThemeStore } from '@/stores/theme' |
import { useThemeStore } from "@/stores/theme"; |
||||
|
|
||||
const { isDark, toggleDark, setTheme } = useThemeStore() |
const { isDark, toggleDark, setTheme } = useThemeStore(); |
||||
</script> |
</script> |
||||
@ -1,7 +1,4 @@ |
|||||
{ |
{ |
||||
"files": [], |
"files": [], |
||||
"references": [ |
"references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }] |
||||
{ "path": "./tsconfig.app.json" }, |
|
||||
{ "path": "./tsconfig.node.json" } |
|
||||
] |
|
||||
} |
} |
||||
|
|||||
Loading…
Reference in new issue