fwb
3 months ago
commit
2b7075db80
32 changed files with 1857 additions and 0 deletions
@ -0,0 +1,30 @@ |
|||||||
|
# Logs |
||||||
|
logs |
||||||
|
*.log |
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
pnpm-debug.log* |
||||||
|
lerna-debug.log* |
||||||
|
|
||||||
|
node_modules |
||||||
|
.DS_Store |
||||||
|
dist |
||||||
|
dist-ssr |
||||||
|
coverage |
||||||
|
*.local |
||||||
|
|
||||||
|
/cypress/videos/ |
||||||
|
/cypress/screenshots/ |
||||||
|
|
||||||
|
# Editor directories and files |
||||||
|
.vscode/* |
||||||
|
!.vscode/extensions.json |
||||||
|
.idea |
||||||
|
*.suo |
||||||
|
*.ntvs* |
||||||
|
*.njsproj |
||||||
|
*.sln |
||||||
|
*.sw? |
||||||
|
|
||||||
|
*.tsbuildinfo |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
{ |
||||||
|
"recommendations": ["Vue.volar"] |
||||||
|
} |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
# test |
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite. |
||||||
|
|
||||||
|
## Recommended IDE Setup |
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur). |
||||||
|
|
||||||
|
## Type Support for `.vue` Imports in TS |
||||||
|
|
||||||
|
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types. |
||||||
|
|
||||||
|
## Customize configuration |
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vitejs.dev/config/). |
||||||
|
|
||||||
|
## Project Setup |
||||||
|
|
||||||
|
```sh |
||||||
|
npm install |
||||||
|
``` |
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development |
||||||
|
|
||||||
|
```sh |
||||||
|
npm run dev |
||||||
|
``` |
||||||
|
|
||||||
|
### Type-Check, Compile and Minify for Production |
||||||
|
|
||||||
|
```sh |
||||||
|
npm run build |
||||||
|
``` |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<link rel="icon" href="/favicon.ico"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title>ces</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="app"></div> |
||||||
|
<script type="module" src="/src/main.ts"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
{ |
||||||
|
"name": "test", |
||||||
|
"version": "0.0.0", |
||||||
|
"private": true, |
||||||
|
"type": "module", |
||||||
|
"scripts": { |
||||||
|
"dev": "vite", |
||||||
|
"build": "run-p type-check \"build-only {@}\" --", |
||||||
|
"preview": "vite preview", |
||||||
|
"build-only": "vite build", |
||||||
|
"type-check": "vue-tsc --build --force" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"@element-plus/icons-vue": "^2.3.1", |
||||||
|
"element-plus": "^2.8.6", |
||||||
|
"mitt": "^3.0.1", |
||||||
|
"vue": "^3.4.29", |
||||||
|
"vue-router": "^4.3.3" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@tsconfig/node20": "^20.1.4", |
||||||
|
"@types/node": "^20.14.5", |
||||||
|
"@vitejs/plugin-vue": "^5.0.5", |
||||||
|
"@vue/tsconfig": "^0.5.1", |
||||||
|
"npm-run-all2": "^6.2.0", |
||||||
|
"typescript": "~5.4.0", |
||||||
|
"vite": "^5.3.1", |
||||||
|
"vue-tsc": "^2.0.21" |
||||||
|
} |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,9 @@ |
|||||||
|
<template> |
||||||
|
<index/> |
||||||
|
</template> |
||||||
|
<script setup lang="ts"> |
||||||
|
import Index from "@/views/ref-parent/index.vue"; |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,86 @@ |
|||||||
|
/* color palette from <https://github.com/vuejs/theme> */ |
||||||
|
:root { |
||||||
|
--vt-c-white: #ffffff; |
||||||
|
--vt-c-white-soft: #f8f8f8; |
||||||
|
--vt-c-white-mute: #f2f2f2; |
||||||
|
|
||||||
|
--vt-c-black: #181818; |
||||||
|
--vt-c-black-soft: #222222; |
||||||
|
--vt-c-black-mute: #282828; |
||||||
|
|
||||||
|
--vt-c-indigo: #2c3e50; |
||||||
|
|
||||||
|
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29); |
||||||
|
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12); |
||||||
|
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); |
||||||
|
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); |
||||||
|
|
||||||
|
--vt-c-text-light-1: var(--vt-c-indigo); |
||||||
|
--vt-c-text-light-2: rgba(60, 60, 60, 0.66); |
||||||
|
--vt-c-text-dark-1: var(--vt-c-white); |
||||||
|
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64); |
||||||
|
} |
||||||
|
|
||||||
|
/* semantic color variables for this project */ |
||||||
|
:root { |
||||||
|
--color-background: var(--vt-c-white); |
||||||
|
--color-background-soft: var(--vt-c-white-soft); |
||||||
|
--color-background-mute: var(--vt-c-white-mute); |
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-light-2); |
||||||
|
--color-border-hover: var(--vt-c-divider-light-1); |
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-light-1); |
||||||
|
--color-text: var(--vt-c-text-light-1); |
||||||
|
|
||||||
|
--section-gap: 160px; |
||||||
|
} |
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) { |
||||||
|
:root { |
||||||
|
--color-background: var(--vt-c-black); |
||||||
|
--color-background-soft: var(--vt-c-black-soft); |
||||||
|
--color-background-mute: var(--vt-c-black-mute); |
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-dark-2); |
||||||
|
--color-border-hover: var(--vt-c-divider-dark-1); |
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-dark-1); |
||||||
|
--color-text: var(--vt-c-text-dark-2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
*, |
||||||
|
*::before, |
||||||
|
*::after { |
||||||
|
box-sizing: border-box; |
||||||
|
margin: 0; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
min-height: 100vh; |
||||||
|
color: var(--color-text); |
||||||
|
background: var(--color-background); |
||||||
|
transition: |
||||||
|
color 0.5s, |
||||||
|
background-color 0.5s; |
||||||
|
line-height: 1.6; |
||||||
|
font-family: |
||||||
|
Inter, |
||||||
|
-apple-system, |
||||||
|
BlinkMacSystemFont, |
||||||
|
'Segoe UI', |
||||||
|
Roboto, |
||||||
|
Oxygen, |
||||||
|
Ubuntu, |
||||||
|
Cantarell, |
||||||
|
'Fira Sans', |
||||||
|
'Droid Sans', |
||||||
|
'Helvetica Neue', |
||||||
|
sans-serif; |
||||||
|
font-size: 15px; |
||||||
|
text-rendering: optimizeLegibility; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 276 B |
@ -0,0 +1,35 @@ |
|||||||
|
@import './base.css'; |
||||||
|
|
||||||
|
#app { |
||||||
|
max-width: 1280px; |
||||||
|
margin: 0 auto; |
||||||
|
padding: 2rem; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
|
||||||
|
a, |
||||||
|
.green { |
||||||
|
text-decoration: none; |
||||||
|
color: hsla(160, 100%, 37%, 1); |
||||||
|
transition: 0.4s; |
||||||
|
padding: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
@media (hover: hover) { |
||||||
|
a:hover { |
||||||
|
background-color: hsla(160, 100%, 37%, 0.2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 1024px) { |
||||||
|
body { |
||||||
|
display: flex; |
||||||
|
place-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
#app { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: 1fr 1fr; |
||||||
|
padding: 0 2rem; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
import mitt from 'mitt' |
||||||
|
const $emitter = mitt(); |
||||||
|
export default $emitter; |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
import mitt from 'mitt' |
||||||
|
const $emitter = mitt(); |
||||||
|
export default $emitter; |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import './assets/main.css' |
||||||
|
|
||||||
|
import { createApp } from 'vue' |
||||||
|
import ElementPlus from 'element-plus' |
||||||
|
import 'element-plus/dist/index.css' |
||||||
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue' |
||||||
|
import App from './App.vue' |
||||||
|
import router from './router' |
||||||
|
|
||||||
|
const app = createApp(App) |
||||||
|
app.use(ElementPlus) |
||||||
|
app.use(router) |
||||||
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
||||||
|
app.component(key, component) |
||||||
|
} |
||||||
|
app.mount('#app') |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
import { createRouter, createWebHashHistory } from 'vue-router' |
||||||
|
const router = createRouter({ |
||||||
|
history: createWebHashHistory(), |
||||||
|
routes: [ |
||||||
|
{ |
||||||
|
path: '/index', |
||||||
|
name: 'index', |
||||||
|
component: ()=>import('../views/rout/index.vue'), |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: '/sunshine', |
||||||
|
name: 'sunshine', |
||||||
|
component: () => import('../views/rout/component/sunshine.vue') |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: '/rain', |
||||||
|
name:'rain', |
||||||
|
component:()=>import('../views/rout/component/rain.vue') |
||||||
|
} |
||||||
|
] |
||||||
|
}) |
||||||
|
|
||||||
|
export default router |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<h1>我是{{name}}</h1> |
||||||
|
<button style="width: 60px;height: 100px" @click="handler">每天想的是</button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script setup lang="ts"> |
||||||
|
import {ref} from 'vue' |
||||||
|
import $emitter from "@/bus/bus"; |
||||||
|
let name = ref('亭') |
||||||
|
const handler = ()=>{ |
||||||
|
$emitter.emit('dream', { dream: '马上下班' }) |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
.container{ |
||||||
|
height: 280px; |
||||||
|
width: 200px; |
||||||
|
background: powderblue; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<h1>我是奇</h1> |
||||||
|
<hr> |
||||||
|
<p>{{dream1}}</p> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script setup lang="ts"> |
||||||
|
import {ref,onMounted,onUnmounted} from 'vue' |
||||||
|
import $emitter from "@/bus/bus"; |
||||||
|
let dream1 = ref('') |
||||||
|
// 在组件挂载后添加事件监听器 |
||||||
|
onMounted(()=>{ |
||||||
|
$emitter.on('dream',(data)=>{ |
||||||
|
console.log(data) |
||||||
|
dream1.value = data.dream; |
||||||
|
}) |
||||||
|
}) |
||||||
|
// 当组件卸载时移除事件监听器 |
||||||
|
onUnmounted(()=>{ |
||||||
|
$emitter.off('dream'); |
||||||
|
}) |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
.container{ |
||||||
|
height: 280px; |
||||||
|
width: 200px; |
||||||
|
background: greenyellow; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<p>数量为{{money}}</p> |
||||||
|
<el-button style="width: 60px;height: 100px" @click="handler" type="primary" round>点击数量翻倍{{modelValue}}</el-button> |
||||||
|
<button style="width: 60px;height: 100px" @click="$emitter('update:age',age+1)">年龄增到为{{age}}</button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script setup lang="ts"> |
||||||
|
import { defineProps, defineEmits } from 'vue'; |
||||||
|
let props = defineProps(['money','age']); |
||||||
|
let $emitter = defineEmits(['update:money','update:age']); |
||||||
|
const handler = ()=>{ |
||||||
|
$emitter('update:money',props.money*2); |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.container{ |
||||||
|
width: 200px; |
||||||
|
background: wheat; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
<template> |
||||||
|
<div class="all"> |
||||||
|
<p>以下是mitt传数据案例</p> |
||||||
|
<hr> |
||||||
|
<h1>{{money}}</h1> |
||||||
|
<hr> |
||||||
|
<div class="container"> |
||||||
|
<AboutView/> |
||||||
|
<!--<ModeView :model-value="money" @update:modelValue=" handler"></ModeView>--> |
||||||
|
<ModeView v-model:money="money" v-model:age="age"></ModeView> |
||||||
|
<HomeView/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import AboutView from "@/views/eventbus/component/AboutView.vue"; |
||||||
|
import HomeView from "@/views/eventbus/component/HomeView.vue"; |
||||||
|
import ModeView from "@/views/eventbus/component/ModeView.vue"; |
||||||
|
import {ref} from 'vue' |
||||||
|
let money = ref(100) |
||||||
|
let age = ref(20) |
||||||
|
const handler = (num)=>{ |
||||||
|
money.value = num |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.all{ |
||||||
|
height: 600px; |
||||||
|
width: 60vw; |
||||||
|
background: gainsboro; |
||||||
|
} |
||||||
|
.container{ |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
<template> |
||||||
|
<div class="container-da"> |
||||||
|
<h2>牛奶有{{bottom}}瓶</h2> |
||||||
|
<el-button @click="handler($parent)" type="primary">卖给父亲一瓶，扣除父亲100元</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import {ref} from 'vue'; |
||||||
|
let bottom = ref(30) |
||||||
|
const handler = ($parent)=>{ |
||||||
|
bottom.value -= 1; |
||||||
|
$parent.money -= 100; |
||||||
|
if($parent.money < 0){ |
||||||
|
alert('没有钱再购买了！') |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.container-da{ |
||||||
|
width: 300px; |
||||||
|
height: 200px; |
||||||
|
background-image: linear-gradient(60deg,white,skyblue,darkseagreen); |
||||||
|
margin-left: 50px; |
||||||
|
margin-top: 50px; |
||||||
|
padding: 30px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
<template> |
||||||
|
<div class="son"> |
||||||
|
<h2>孩子，有￥{{money}}</h2> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script setup lang="ts"> |
||||||
|
import {ref} from 'vue'; |
||||||
|
let money = ref(500) |
||||||
|
//组件内部的数据是对外关闭的，如果想让外部访问，通过defineExports暴露' |
||||||
|
defineExpose({ |
||||||
|
money |
||||||
|
}) |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
.son{ |
||||||
|
width: 300px; |
||||||
|
height: 200px; |
||||||
|
background:ghostwhite; |
||||||
|
margin-left: 50px; |
||||||
|
margin-top: 50px; |
||||||
|
padding: 30px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<h1>我是父亲，有￥{{money}}</h1> |
||||||
|
<el-button @click="handler" type="success">点击按钮，找儿子借100元</el-button> |
||||||
|
<hr> |
||||||
|
<son ref="son"/> |
||||||
|
<daughter/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import {ref} from 'vue' |
||||||
|
import Son from "@/views/ref-parent/component/son.vue"; |
||||||
|
import Daughter from "@/views/ref-parent/component/daughter.vue"; |
||||||
|
let money = ref(2500) |
||||||
|
let son = ref() |
||||||
|
const handler = ()=>{ |
||||||
|
money.value += 100; |
||||||
|
console.log(son.value); |
||||||
|
son.value.money -= 100; |
||||||
|
if(son.value.money <0){ |
||||||
|
alert('孩子没钱了！') |
||||||
|
} |
||||||
|
} |
||||||
|
defineExpose({ |
||||||
|
money |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.container{ |
||||||
|
width: 60vw; |
||||||
|
height: 700px; |
||||||
|
background-image: linear-gradient(60deg,skyblue,gray); |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<h1>是个雨天</h1> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.container{ |
||||||
|
background-image: linear-gradient(60deg,deepskyblue,darkseagreen,powderblue); |
||||||
|
text-align: center |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<h1>是个晴天</h1> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
.container{ |
||||||
|
background-image: linear-gradient(60deg,pink,darkorange,red); |
||||||
|
text-align: center |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,59 @@ |
|||||||
|
<template> |
||||||
|
<div class="box"> |
||||||
|
<div class="container"> |
||||||
|
<h1>天气预测</h1> |
||||||
|
</div> |
||||||
|
<hr> |
||||||
|
<el-button @click="handler" class="btn" type="success">明天的天气</el-button> |
||||||
|
<hr> |
||||||
|
<el-button @click="handler1" class="btn1" type="primary">后天的天气</el-button> |
||||||
|
<hr> |
||||||
|
<div class="r-box"> |
||||||
|
<div class="r-container"> |
||||||
|
<router-view></router-view> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import {useRouter} from "vue-router"; |
||||||
|
const router = useRouter(); |
||||||
|
const handler = () => { |
||||||
|
router.push('/sunshine') |
||||||
|
} |
||||||
|
const handler1 = () => { |
||||||
|
router.push('/rain') |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.box{ |
||||||
|
padding: 20px |
||||||
|
} |
||||||
|
.container{ |
||||||
|
text-align: center; |
||||||
|
background-image: linear-gradient(60deg,lightskyblue,white,pink); |
||||||
|
margin-bottom: 10px |
||||||
|
} |
||||||
|
.btn{ |
||||||
|
margin-top: 10px; |
||||||
|
margin-bottom: 10px; |
||||||
|
margin-left: 50px |
||||||
|
} |
||||||
|
.btn1{ |
||||||
|
margin-top: 10px; |
||||||
|
margin-bottom: 10px; |
||||||
|
margin-left: 50px |
||||||
|
} |
||||||
|
.r-box{ |
||||||
|
width: 200px; |
||||||
|
height: 100px; |
||||||
|
margin-top: 20px |
||||||
|
} |
||||||
|
.r-container{ |
||||||
|
width: 180px; |
||||||
|
margin: auto |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
<template> |
||||||
|
<p>{{res.type}}</p> |
||||||
|
<p>{{res.size}}</p> |
||||||
|
<p>{{res.icon.name}}</p> |
||||||
|
<el-button :="res"></el-button> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
//接收父组件传递过来的数据 |
||||||
|
//props和useattr都可以获取父组件传来的数学和属性值，但是props接收后useattr接收不到了 |
||||||
|
// defineProps(['type','size',':icon']) |
||||||
|
import {useAttrs} from "vue"; |
||||||
|
let res = useAttrs(); |
||||||
|
console.log(res) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-button type="success" size="small" :icon="Edit">userAttrs案例</el-button> |
||||||
|
<ChildPage type="success" size="small" :icon="Edit" @click="handler"></ChildPage> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script setup lang="ts"> |
||||||
|
import {Edit} from "@element-plus/icons-vue"; |
||||||
|
import ChildPage from "./component/ChildPage.vue"; |
||||||
|
const handler = ()=>{ |
||||||
|
alert('hello') |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
{ |
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json", |
||||||
|
"include": [ |
||||||
|
"env.d.ts", |
||||||
|
"src/**/*", |
||||||
|
"src/**/*.vue", |
||||||
|
"node_modules/.pnpm/@vue+runtime-core@3.5.12/node_modules/@vue/runtime-core/dist/runtime-core.d.ts" |
||||||
|
], |
||||||
|
"exclude": ["src/**/__tests__/*"], |
||||||
|
"compilerOptions": { |
||||||
|
"composite": true, |
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", |
||||||
|
|
||||||
|
"baseUrl": ".", |
||||||
|
"paths": { |
||||||
|
"@/*": ["./src/*"] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
{ |
||||||
|
"files": [], |
||||||
|
"references": [ |
||||||
|
{ |
||||||
|
"path": "./tsconfig.node.json" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"path": "./tsconfig.app.json" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
{ |
||||||
|
"extends": "@tsconfig/node20/tsconfig.json", |
||||||
|
"include": [ |
||||||
|
"vite.config.*", |
||||||
|
"vitest.config.*", |
||||||
|
"cypress.config.*", |
||||||
|
"nightwatch.conf.*", |
||||||
|
"playwright.config.*" |
||||||
|
], |
||||||
|
"compilerOptions": { |
||||||
|
"composite": true, |
||||||
|
"noEmit": true, |
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", |
||||||
|
|
||||||
|
"module": "ESNext", |
||||||
|
"moduleResolution": "Bundler", |
||||||
|
"types": ["node"] |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import { fileURLToPath, URL } from 'node:url' |
||||||
|
|
||||||
|
import { defineConfig } from 'vite' |
||||||
|
import vue from '@vitejs/plugin-vue' |
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({ |
||||||
|
plugins: [ |
||||||
|
vue(), |
||||||
|
], |
||||||
|
resolve: { |
||||||
|
alias: { |
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url)) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
Loading…
Reference in new issue