Skip to content

Commit daa5a1c

Browse files
LaoujinLaoujin
committed
vue3 for the socks
1 parent bf2891b commit daa5a1c

32 files changed

+213
-310
lines changed

‎01-HelloWorld/04-ReviewableSocks.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -91,20 +91,18 @@ app.component('product-review', {
9191
},
9292

9393
// LifeCycle Methods
94-
created() {
95-
console.log('product-review created');
94+
// https://vuejs.org/api/options-lifecycle.html
95+
beforeMount() {
96+
console.log('product-review beforeMount');
9697
},
9798
mounted() {
9899
console.log('product-review mounted');
99100
},
100101
updated() {
101102
console.log('product-review updated');
102103
},
103-
destroyed() {
104-
console.log('product-review destroyed');
105-
},
106-
beforeDestroy() {
107-
console.log('product-review beforeDestroy');
104+
unmounted() {
105+
console.log('product-review unmounted');
108106
},
109107
});
110108

‎Exercises.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ E. Allow to order more/less of a product in the Cart.
3131
F. Calculate the total Cart cost. (with shipping costs?)
3232

3333

34-
5 Vuex
35-
------
34+
5 Pinia (Store)
35+
---------------
3636
A. Put the `Product.vue` product properties in `store.ts` in a products array.
3737
B. Turn product into a `@Prop() product!: any` of `Product.vue`.
3838
C. On the main page, loop over the products and display them.

‎LifeCycleHooks.png‎

186 KB
Loading

‎README.md‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
Vue.js Technical Session
22
========================
33

4-
State Management: Vuex -> Pinia
5-
64
# Prerequisites <small>(optional)</small>
75

86
Node 16.10.0
97

10-
118
- Install the Chrome [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en)
129
- Install the Visual Studio Code [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) extension
1310
- Install the Visual Studio Code [Vue Inline Template](https://marketplace.visualstudio.com/items?itemName=faisalhakim47.vue-inline-template) extension
@@ -26,12 +23,13 @@ npx http-server
2623
# cli-socks
2724

2825
Converted `01-HelloWorld` to a with Vue CLI **Vite** generated "full blown" application
29-
(Routing Vuex, SCSS, TypeScript, ...)
26+
(Routing, Store, SCSS, TypeScript, ...)
3027

3128
## Installation
3229
```
3330
cd cli-socks
3431
npm install
32+
npm run dev
3533
```
3634

3735
ATTN: Some Webstorm attendees needed to do an additional `npm install node-sass`.
@@ -63,11 +61,4 @@ Scaffold projects in Vue, React, ...
6361
npm create vite@latest
6462
```
6563

66-
VitePress: static website generator
67-
68-
69-
## Testing
70-
71-
```
72-
npm run test:unit
73-
```
64+
[VitePress](https://vitepress.vuejs.org/): static website generator

‎cli-socks/.browserslistrc‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎cli-socks/.eslintrc.js‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎cli-socks/README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Vue 3 + TypeScript + Vite
2+
3+
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.
4+
5+
## Recommended IDE Setup
6+
7+
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
8+
9+
## Type Support For `.vue` Imports in TS
10+
11+
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
12+
13+
1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
14+
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
15+
16+
You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).

‎cli-socks/babel.config.js‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎cli-socks/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue + TS</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎cli-socks/jest.config.js‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

0 commit comments

Comments
 (0)