ahxin/Vue3-learning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

setup 的新写法

Browse Source
This commit is contained in:
云上贵猪 2025-04-29 20:36:15 +08:00
parent ccd0d93e27
commit 3af4711dfb
6 changed files with 51 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
.idea/workspace.xml generated
View File

@ -1,7 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="AutoImportSettings">
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="" />
<list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev&#10;&#10;# Conflicts:&#10;#&#9;.idea/workspace.xml&#10;#&#9;README.md&#10;#&#9;src/components/Person.vue">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/base.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/base.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/logo.svg" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/main.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Person.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Person.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/vite.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/vite.config.ts" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@ -10,11 +20,13 @@
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component>
<component name="ProjectColorInfo"><![CDATA[{
"associatedIndex": 3
}]]></component>
<component name="ProjectColorInfo">{
&quot;associatedIndex&quot;: 3
}</component>
<component name="ProjectId" id="2wOjf2pz32CUW5I0w9ht0hb3zbS" />
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
<component name="ProjectLevelVcsManager" settingsEditedManually="true">
<ConfirmationsSetting value="2" id="Add" />
</component>
<component name="ProjectViewState">
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
@ -23,14 +35,14 @@
"keyToString": {
"RunOnceActivity.ShowReadmeOnStart": "true",
"RunOnceActivity.git.unshallow": "true",
"git-widget-placeholder": "master",
"git-widget-placeholder": "dev",
"node.js.detected.package.eslint": "true",
"node.js.detected.package.tslint": "true",
"node.js.selected.package.eslint": "(autodetect)",
"node.js.selected.package.tslint": "(autodetect)",
"nodejs_package_manager_path": "npm",
"settings.editor.selected.configurable": "preferences.keymap",
"ts.external.directory.path": "/Volumes/Date/01_Demo/07-Vue3/vue3_01_hello/node_modules/typescript/lib",
"ts.external.directory.path": "/Volumes/Date/01_Demo/07-Vue3/node_modules/typescript/lib",
"vue.rearranger.settings.migration": "true"
}
}]]></component>
@ -51,9 +63,23 @@
<updated>1745919613888</updated>
<workItem from="1745919615396" duration="326000" />
</task>
<task id="LOCAL-00001" summary="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev&#10;&#10;# Conflicts:&#10;#&#9;.idea/workspace.xml&#10;#&#9;README.md&#10;#&#9;src/components/Person.vue">
<option name="closed" value="true" />
<created>1745928378301</created>
<option name="number" value="00001" />
<option name="presentableId" value="LOCAL-00001" />
<option name="project" value="LOCAL" />
<updated>1745928378301</updated>
</task>
<option name="localTasksCounter" value="2" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="3" />
</component>
</project>
<component name="VcsManagerConfiguration">
<MESSAGE value="Vue2 &amp; Vue3 中data 与setup 数据的调用情况" />
<MESSAGE value="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev&#10;&#10;# Conflicts:&#10;#&#9;.idea/workspace.xml&#10;#&#9;README.md&#10;#&#9;src/components/Person.vue" />
<option name="LAST_COMMIT_MESSAGE" value="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev&#10;&#10;# Conflicts:&#10;#&#9;.idea/workspace.xml&#10;#&#9;README.md&#10;#&#9;src/components/Person.vue" />
</component>
</project>

86
src/assets/base.css
View File

@ -1,86 +0,0 @@
/* 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;
}

1
src/assets/logo.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 276 B

40
src/assets/main.css
View File

@ -1,35 +1,9 @@
@import './base.css';
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
/*@import './base.css';*/
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
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;
}
}

42
src/components/Person.vue
View File

@ -1,47 +1,23 @@
<script lang="ts">
export default {
name: 'Person',
data(){
return {
a: 'vue2 data 中的数据',
b: 0,
}
},
// vue2 的方法 methods
methods:{
vue2Data(){
console.log(this.age + 1)
}
},
// setup vue3 新语法
name:'Person',
setup(){
let age = 18
//会报错 因为setup 比data 还要在前面 所以无法在此使用 data 中的数据，报错内容：
// Uncaught (in promise) Error: A listener indicated an asynchronous
// response by returning true, but the message channel closed before
// a response was received
//let x = this.a
return {age}
let axxxx: string = '原始写法';
return { axxxx }
}
}
</script>
<script setup lang="ts">
let axxxx:string = '新泻法';
</script>
<template>
<main class="setBox">
<h1>setup 的 age:{{age}}</h1>
<!--<h1>姓名:{{name}}</h1>-->
<hr>
<button @click="vue2Data">这是从vue2 调动 vue3 setup的年龄 + 1</button>
<main>
<h1>{{axxxx}}</h1>
</main>
</template>
<style scoped>
.setBox {
width: 100%;
background-color: palegreen;
border-radius: 1.5rem;
padding: 3rem;
}
</style>

2
vite.config.ts
View File

@ -8,7 +8,7 @@ import vueDevTools from 'vite-plugin-vue-devtools'
export default defineConfig({
plugins: [
vue(),
//vueDevTools(),
vueDevTools(),
],
resolve: {
alias: {