├── .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 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/checked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /public/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 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 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/like-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/like-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 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 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/profile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 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 | 10 | -------------------------------------------------------------------------------- /src/components/Card.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 35 | -------------------------------------------------------------------------------- /src/components/CartItem.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 26 | -------------------------------------------------------------------------------- /src/components/Drawer.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 70 | -------------------------------------------------------------------------------- /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 27 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 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 | 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 | --------------------------------------------------------------------------------