Skip to content

Commit d89c2b5

Browse files
mayashavinmayashavin
committed
add: 7 and 8
1 parent c5026a0 commit d89c2b5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+2934
-2853
lines changed

‎ch07/.eslintrc.cjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ module.exports = {
77
'plugin:vue/vue3-essential',
88
'eslint:recommended',
99
'@vue/eslint-config-typescript',
10-
'@vue/eslint-config-prettier'
10+
'@vue/eslint-config-prettier/skip-formatting'
1111
],
1212
parserOptions: {
1313
ecmaVersion: 'latest'

‎ch07/.prettierrc.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
1-
{}
1+
{
2+
"$schema": "https://json.schemastore.org/prettierrc",
3+
"semi": false,
4+
"tabWidth": 2,
5+
"singleQuote": true,
6+
"printWidth": 100,
7+
"trailingComma": "none"
8+
}

‎ch07/.vscode/extensions.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
11
{
2-
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
2+
"recommendations": [
3+
"Vue.volar",
4+
"Vue.vscode-typescript-vue-plugin",
5+
"dbaeumer.vscode-eslint",
6+
"esbenp.prettier-vscode"
7+
]
38
}

‎ch07/README.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# ch07
1+
# ch07_1
22

33
This template should help get you started developing with Vue 3 in Vite.
44

@@ -39,6 +39,12 @@ npm run dev
3939
npm run build
4040
```
4141

42+
### Run Unit Tests with [Vitest](https://vitest.dev/)
43+
44+
```sh
45+
npm run test:unit
46+
```
47+
4248
### Lint with [ESLint](https://eslint.org/)
4349

4450
```sh

‎ch07/package.json‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,34 @@
66
"dev": "vite",
77
"build": "run-p type-check build-only",
88
"preview": "vite preview",
9+
"test:unit": "vitest",
910
"build-only": "vite build",
10-
"type-check": "vue-tsc --noEmit",
11-
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
11+
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
12+
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
13+
"format": "prettier --write src/"
1214
},
1315
"dependencies": {
14-
"vue": "^3.2.45"
16+
"vue": "^3.3.4"
1517
},
1618
"devDependencies": {
17-
"@rushstack/eslint-patch": "^1.1.4",
18-
"@types/node": "^18.11.12",
19-
"@vitejs/plugin-vue": "^4.0.0",
20-
"@vue/eslint-config-prettier": "^7.0.0",
21-
"@vue/eslint-config-typescript": "^11.0.0",
22-
"@vue/tsconfig": "^0.1.3",
23-
"eslint": "^8.22.0",
24-
"eslint-plugin-vue": "^9.3.0",
19+
"@rushstack/eslint-patch": "^1.3.2",
20+
"@tsconfig/node18": "^18.2.0",
21+
"@types/jsdom": "^21.1.1",
22+
"@types/node": "^18.17.5",
23+
"@vitejs/plugin-vue": "^4.3.1",
24+
"@vitejs/plugin-vue-jsx": "^3.0.2",
25+
"@vue/eslint-config-prettier": "^8.0.0",
26+
"@vue/eslint-config-typescript": "^11.0.3",
27+
"@vue/test-utils": "^2.4.1",
28+
"@vue/tsconfig": "^0.4.0",
29+
"eslint": "^8.46.0",
30+
"eslint-plugin-vue": "^9.16.1",
31+
"jsdom": "^22.1.0",
2532
"npm-run-all": "^4.1.5",
26-
"prettier": "^2.7.1",
27-
"typescript": "~4.7.4",
28-
"vite": "^4.0.0",
29-
"vue-router": "4.1.6",
30-
"vue-tsc": "^1.0.12"
33+
"prettier": "^3.0.0",
34+
"typescript": "~5.1.6",
35+
"vite": "^4.4.9",
36+
"vitest": "^0.34.2",
37+
"vue-tsc": "^1.8.8"
3138
}
3239
}

‎ch07/src/App.vue‎

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,43 @@
1-
<script setup lang="ts">
2-
import { RouterView } from "vue-router";
3-
import NavBar from "@/components/NavBar.vue";
4-
</script>
5-
<template>
6-
<NavBar />
7-
<RouterView />
1+
<!-- <template>
2+
<component is="HelloWorld" />
83
</template>
9-
<style scoped>
10-
header {
11-
line-height: 1.5;
12-
}
13-
14-
.logo {
15-
display: block;
16-
margin: 0 auto 2rem;
17-
}
18-
19-
@media (min-width: 1024px) {
20-
header {
21-
display: flex;
22-
place-items: center;
23-
padding-right: calc(var(--section-gap) / 2);
24-
}
4+
<script lang="ts">
5+
import { defineComponent } from "vue";
6+
import HelloWorld from "./components/HelloWorld.vue";
257
26-
.logo {
27-
margin: 0 2rem 0 0;
28-
}
8+
export default defineComponent({
9+
name: "App",
10+
components: {
11+
HelloWorld,
12+
},
13+
});
14+
</script> -->
15+
<template>
16+
<div>
17+
<keep-alive>
18+
<component :is="activeComp" />
19+
</keep-alive>
20+
<div>
21+
<button @click="activeComp = 'StepOne'" v-if="activeComp === 'StepTwo'">
22+
Go to Step Two
23+
</button>
24+
<button @click="activeComp = 'StepTwo'" v-else>Back to Step One</button>
25+
</div>
26+
</div>
27+
<TruncatedText />
28+
</template>
29+
<script lang="ts">
30+
import { defineComponent } from "vue";
31+
import StepOne from "./components/StepOne.vue";
32+
import StepTwo from "./components/StepTwo.vue";
33+
import TruncatedText from "./components/TruncatedText.vue";
2934
30-
header .wrapper {
31-
display: flex;
32-
place-items: flex-start;
33-
flex-wrap: wrap;
34-
}
35-
}
36-
</style>
35+
export default defineComponent({
36+
components: { StepTwo, StepOne, TruncatedText },
37+
data() {
38+
return {
39+
activeComp: "StepOne",
40+
};
41+
},
42+
});
43+
</script>

‎ch07/src/assets/base.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@
5555
*::after {
5656
box-sizing: border-box;
5757
margin: 0;
58-
position: relative;
5958
font-weight: normal;
6059
}
6160

‎ch07/src/assets/logo.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎ch07/src/assets/main.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
#app {
44
max-width: 1280px;
5-
margin: 0 100px;
5+
margin: 0 auto;
66
padding: 2rem;
77

88
font-weight: normal;
@@ -23,13 +23,13 @@ a,
2323

2424
@media (min-width: 1024px) {
2525
body {
26-
/* display: flex; */
26+
display: flex;
2727
place-items: center;
2828
}
2929

3030
#app {
3131
display: grid;
32-
grid-template-rows: 1fr auto;
33-
padding: 2rem;
32+
grid-template-columns: 1fr 1fr;
33+
padding: 0 2rem;
3434
}
3535
}

‎ch07/src/components/HelloWorld.vue‎

Lines changed: 2 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,3 @@
1-
<script setup lang="ts">
2-
defineProps<{
3-
msg: string
4-
}>()
5-
</script>
6-
71
<template>
8-
<div class="greetings">
9-
<h1 class="green">{{ msg }}</h1>
10-
<h3>
11-
You’ve successfully created a project with
12-
<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
13-
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
14-
</h3>
15-
</div>
16-
</template>
17-
18-
<style scoped>
19-
h1 {
20-
font-weight: 500;
21-
font-size: 2.6rem;
22-
top: -10px;
23-
}
24-
25-
h3 {
26-
font-size: 1.2rem;
27-
}
28-
29-
.greetings h1,
30-
.greetings h3 {
31-
text-align: center;
32-
}
33-
34-
@media (min-width: 1024px) {
35-
.greetings h1,
36-
.greetings h3 {
37-
text-align: left;
38-
}
39-
}
40-
</style>
2+
<div>Hello World</div>
3+
</template>

0 commit comments

Comments
 (0)