├── .eslintrc.cjs
├── .gitignore
├── .prettierrc.json
├── .vscode
└── extensions.json
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── arrow-next.svg
├── arrow-right.svg
├── cart.svg
├── checked.svg
├── close.svg
├── emoji-1.png
├── emoji-2.png
├── favicon.ico
├── heart.svg
├── like-1.svg
├── like-2.svg
├── logo.png
├── order-success-icon.png
├── package-icon.png
├── plus.svg
├── profile.svg
├── search.svg
├── sneakers
│ ├── sneakers-1.jpg
│ ├── sneakers-10.jpg
│ ├── sneakers-11.jpg
│ ├── sneakers-12.jpg
│ ├── sneakers-2.jpg
│ ├── sneakers-3.jpg
│ ├── sneakers-4.jpg
│ ├── sneakers-5.jpg
│ ├── sneakers-6.jpg
│ ├── sneakers-7.jpg
│ ├── sneakers-8.jpg
│ └── sneakers-9.jpg
└── vite.svg
├── src
├── App.vue
├── components
│ ├── Card.vue
│ ├── CartItem.vue
│ ├── Drawer.vue
│ ├── Header.vue
│ └── HelloWorld.vue
├── main.js
├── pages
│ └── Home.vue
└── style.css
├── tailwind.config.js
└── vite.config.js
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | require('@rushstack/eslint-patch/modern-module-resolution')
3 |
4 | module.exports = {
5 | root: true,
6 | extends: [
7 | 'plugin:vue/vue3-essential',
8 | 'eslint:recommended',
9 | '@vue/eslint-config-prettier/skip-formatting'
10 | ],
11 | parserOptions: {
12 | ecmaVersion: 'latest'
13 | },
14 | rules: {
15 | 'vue/multi-word-component-names': 'off'
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 |
17 | /cypress/videos/
18 | /cypress/screenshots/
19 |
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 |
--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/prettierrc",
3 | "semi": false,
4 | "tabWidth": 2,
5 | "singleQuote": true,
6 | "printWidth": 100,
7 | "trailingComma": "none"
8 | }
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": [
3 | "Vue.volar",
4 | "Vue.vscode-typescript-vue-plugin",
5 | "dbaeumer.vscode-eslint",
6 | "esbenp.prettier-vscode"
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Vue Sneakers 👟
2 |
3 | ## Как запустить?
4 |
5 | 1. Склонировать репозиторий к себе на ПК
6 | 2. `npm install`
7 | 3. `npm run dev`
8 | 4. Готово!
9 |
10 | ## 🧐 Для кого этот курс?
11 |
12 | Курс предназначен для НАЧИНАЮЩИХ 👨🏻🎓, кто не знаком с Vue. Для ноченающех! Не для тру фронтенд девелоперов с опытом в 150 лет и познавших вселенную фронтенда, а для простых смертных.
13 |
14 | Для тех, кто вообще не знаком с Vue и хочет понять, что это за фреймворк и как на нём создавать реальные приложения с передачей данных между компонентами, роутингом, запросами к бэкенду, а не просто тудушки.
15 |
16 | В этом курсе мы не просто будем изучать Vue, но и разрабатывать приложение с роутингом, запросами на бэк, передачей данных между приложением, анимациями, изучим что такое Composition API / Options API и т.д.
17 |
18 | **⏬ Мы поймём:**
19 |
20 | - Как работает Vue
21 | - Научимся передавать данные между компонентами
22 | - Делать запросы на бэк и обрабатывать JSON-данные
23 | - Как делать переход между страницами с помощью Vue Router
24 | - Как стилизировать приложение с помощью TailwindCSS
25 | - Как сделать красивую и простую анимацию списков товаров, корзину и т.п.
26 |
27 | **⚙️ Стэк технологий:**
28 |
29 | - Vue 3
30 | - Vue Router
31 | - TailwindCSS
32 | - Axios
33 | - @formkit/auto-animate
34 | - Composition API / Options API
35 | - ESLint
36 | - Prettier
37 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite App
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-sneakers",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "vite",
7 | "build": "vite build",
8 | "preview": "vite preview",
9 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
10 | "format": "prettier --write src/"
11 | },
12 | "dependencies": {
13 | "@formkit/auto-animate": "^0.8.0",
14 | "axios": "^1.5.1",
15 | "lodash.debounce": "^4.0.8",
16 | "vue": "^3.3.4",
17 | "vue-router": "^4.2.5"
18 | },
19 | "devDependencies": {
20 | "@rushstack/eslint-patch": "^1.3.3",
21 | "@vitejs/plugin-vue": "^4.3.4",
22 | "@vitejs/plugin-vue-jsx": "^3.0.2",
23 | "@vue/eslint-config-prettier": "^8.0.0",
24 | "autoprefixer": "^10.4.16",
25 | "eslint": "^8.49.0",
26 | "eslint-plugin-vue": "^9.17.0",
27 | "postcss": "^8.4.31",
28 | "prettier": "^3.0.3",
29 | "tailwindcss": "^3.3.3",
30 | "vite": "^4.4.9"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/public/arrow-next.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/public/arrow-right.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/cart.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/public/checked.svg:
--------------------------------------------------------------------------------
1 |
26 |
--------------------------------------------------------------------------------
/public/close.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/public/emoji-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/emoji-1.png
--------------------------------------------------------------------------------
/public/emoji-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/emoji-2.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/favicon.ico
--------------------------------------------------------------------------------
/public/heart.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/like-1.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/public/like-2.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/logo.png
--------------------------------------------------------------------------------
/public/order-success-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/order-success-icon.png
--------------------------------------------------------------------------------
/public/package-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/package-icon.png
--------------------------------------------------------------------------------
/public/plus.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/public/profile.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/search.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/sneakers/sneakers-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/sneakers/sneakers-1.jpg
--------------------------------------------------------------------------------
/public/sneakers/sneakers-10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/sneakers/sneakers-10.jpg
--------------------------------------------------------------------------------
/public/sneakers/sneakers-11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/sneakers/sneakers-11.jpg
--------------------------------------------------------------------------------
/public/sneakers/sneakers-12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/sneakers/sneakers-12.jpg
--------------------------------------------------------------------------------
/public/sneakers/sneakers-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/sneakers/sneakers-2.jpg
--------------------------------------------------------------------------------
/public/sneakers/sneakers-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/sneakers/sneakers-3.jpg
--------------------------------------------------------------------------------
/public/sneakers/sneakers-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/sneakers/sneakers-4.jpg
--------------------------------------------------------------------------------
/public/sneakers/sneakers-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/sneakers/sneakers-5.jpg
--------------------------------------------------------------------------------
/public/sneakers/sneakers-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/sneakers/sneakers-6.jpg
--------------------------------------------------------------------------------
/public/sneakers/sneakers-7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/sneakers/sneakers-7.jpg
--------------------------------------------------------------------------------
/public/sneakers/sneakers-8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/sneakers/sneakers-8.jpg
--------------------------------------------------------------------------------
/public/sneakers/sneakers-9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Archakov06/vue-sneakers/d8f3417886134845dfda00eb129d1e61fdc2b824/public/sneakers/sneakers-9.jpg
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/components/Card.vue:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
34 |
35 |
--------------------------------------------------------------------------------
/src/components/CartItem.vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
![Sneaker]()
13 |
14 |
{{ title }}
15 |
16 |
{{ price }} руб.
17 |

22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/src/components/Drawer.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
10 |
11 |
34 | Корзина
35 |
36 |
37 |
38 |
43 |
44 |
45 |
46 |
47 |
48 |
Итого:
49 |
50 |
1000 руб.
51 |
52 |
53 |
54 |
Налог 5%:
55 |
56 |
50 руб.
57 |
58 |
59 |
60 |
66 |
67 |
68 |
69 |
70 |
--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |

5 |
6 |
Vue Sneakers
7 |
Магазин лучших кроссовок
8 |
9 |
10 |
11 |
12 | -
13 |
14 | 1205 руб.
15 |
16 | -
17 |
18 | Закладки
19 |
20 | -
21 |
22 | Профиль
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 | {{ msg }}
13 |
14 |
15 |
16 |
17 | Edit
18 | components/HelloWorld.vue
to test HMR
19 |
20 |
21 |
22 |
23 | Check out
24 | create-vue, the official Vue + Vite starter
27 |
28 |
29 | Install
30 | Volar
31 | in your IDE for a better DX
32 |
33 | Click on the Vite and Vue logos to learn more
34 |
35 |
36 |
41 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import './style.css';
3 | import App from './App.vue';
4 |
5 | createApp(App).mount('#app');
6 |
--------------------------------------------------------------------------------
/src/pages/Home.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
Все кроссовки
13 |
14 |
21 |
22 |
27 |
28 |

29 |
30 |
31 |
32 |
33 |
34 |
35 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | * {
6 | font-synthesis: none;
7 | text-rendering: optimizeLegibility;
8 | -webkit-font-smoothing: antialiased;
9 | -moz-osx-font-smoothing: grayscale;
10 | -webkit-text-size-adjust: 100%;
11 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
12 | }
13 |
14 | body {
15 | background-color: rgb(247 254 231);
16 | }
17 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
4 | theme: {
5 | extend: {}
6 | },
7 | plugins: []
8 | }
9 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { fileURLToPath, URL } from 'node:url'
2 |
3 | import { defineConfig } from 'vite'
4 | import vue from '@vitejs/plugin-vue'
5 | import vueJsx from '@vitejs/plugin-vue-jsx'
6 |
7 | // https://vitejs.dev/config/
8 | export default defineConfig({
9 | plugins: [
10 | vue(),
11 | vueJsx(),
12 | ],
13 | resolve: {
14 | alias: {
15 | '@': fileURLToPath(new URL('./src', import.meta.url))
16 | }
17 | }
18 | })
19 |
--------------------------------------------------------------------------------