├── .cursorrules ├── .favorites.json ├── .github └── workflows │ └── deploy-build.yaml ├── .gitignore ├── .prettierrc ├── .vscode └── extensions.json ├── README.md ├── docs ├── .vitepress │ ├── config │ │ ├── index.ts │ │ ├── nav.en.ts │ │ ├── nav.ru.ts │ │ ├── sidebar.arty-crafty.ru.ts │ │ ├── sidebar.book.ru.ts │ │ ├── sidebar.faq.en.ts │ │ ├── sidebar.faq.ru.ts │ │ ├── sidebar.release-timeline.en.ts │ │ ├── sidebar.release-timeline.ru.ts │ │ ├── sidebar.vue-webapp.en.ts │ │ └── sidebar.vue-webapp.ru.ts │ └── theme │ │ ├── AppLayout.vue │ │ ├── custom-block.css │ │ ├── custom.css │ │ └── index.ts ├── assets │ └── images │ │ ├── dynamic-rendering.png │ │ ├── modular-architecture.webp │ │ └── spa-vs-mpa.png ├── en │ ├── assets │ │ └── images │ │ │ ├── dynamic-rendering.png │ │ │ └── spa-vs-mpa.png │ ├── backend │ │ ├── api.md │ │ ├── auth.md │ │ ├── backend.md │ │ ├── cors.md │ │ └── protocols.md │ ├── deployment │ │ ├── ci-cd.md │ │ ├── docker.md │ │ ├── github-actions.md │ │ └── hosting.md │ ├── development │ │ ├── architectural-patterns.md │ │ ├── assets.md │ │ ├── building.md │ │ ├── ide.md │ │ ├── libraries.md │ │ ├── misc.md │ │ ├── project-structure.md │ │ ├── store-comparison.md │ │ ├── stores.md │ │ ├── testing.md │ │ └── vs-code-settings.json │ ├── frontend │ │ ├── about-frameworks.md │ │ ├── architecture.md │ │ ├── css-ui-libs.md │ │ ├── learning.md │ │ └── spa-pwa-ssr-ssg.md │ ├── index.md │ ├── misc │ │ ├── CHANGELOG.md │ │ ├── cheat-sheets.md │ │ ├── contribute.md │ │ ├── glossary.md │ │ └── introduction.md │ ├── release-timeline │ │ ├── assets │ │ │ └── images │ │ │ │ └── rt.jpg │ │ ├── config.md │ │ ├── getting-data.md │ │ ├── getting-started.md │ │ ├── index.md │ │ ├── microfrontend.md │ │ ├── release-history.md │ │ ├── vitepress.md │ │ ├── vue-3.md │ │ └── web-component.md │ └── vue-webapp │ │ ├── contribution.md │ │ ├── getting-started.md │ │ ├── guidelines.md │ │ ├── index.md │ │ ├── objectives.md │ │ └── options │ │ ├── adaptability.md │ │ ├── api.md │ │ ├── baseIcon.md │ │ ├── description.md │ │ ├── drawer.md │ │ ├── footer.md │ │ ├── ga-gp.md │ │ ├── google-analytics.md │ │ ├── header.md │ │ ├── i18n.md │ │ ├── index.md │ │ ├── layout-main.md │ │ ├── layout-one-column.md │ │ ├── navbar.md │ │ ├── open-graph.md │ │ ├── pwa.md │ │ ├── splash-screen.md │ │ └── themes.md ├── index.md ├── public │ ├── favicon.ico │ ├── files │ │ ├── Flex-Layout-Cheat-Sheet.pdf │ │ ├── FlexBox-Cheat-Sheets-in-2021.pdf │ │ ├── Grid-Cheat-Sheet.pdf │ │ ├── Grid-Layout-Cheat-Sheet.pdf │ │ ├── HTML5-Cheat-Sheet.pdf │ │ ├── JavaScript-Cheat-Sheet.pdf │ │ ├── Markdown.pdf │ │ ├── TypeScript Classes.pdf │ │ ├── TypeScript Control Flow Analysis.pdf │ │ ├── TypeScript Interfaces.pdf │ │ ├── TypeScript Types.pdf │ │ ├── Vue-3-Cheat-Sheet.pdf │ │ └── Vue_js_3_Design_Patterns_and_Best_Practices.pdf │ ├── images │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon.png │ │ ├── arty-crafty-logo.png │ │ ├── book-face.jpg │ │ ├── faq │ │ │ ├── atomic-design.jpg │ │ │ ├── chrome-formatter-1.jpg │ │ │ ├── chrome-formatter-2.jpg │ │ │ ├── fsd.jpg │ │ │ └── microfronends.jpg │ │ ├── favicon-32x32.png │ │ ├── vue-faq-logo-bg.png │ │ ├── vue-faq-logo-small.png │ │ ├── vue-faq-logo-small.webp │ │ ├── vue-faq-logo.png │ │ ├── vue-faq-logo.webp │ │ ├── vue-webapp-logo-big.png │ │ ├── vue-webapp-logo.png │ │ └── vue-webapp │ │ │ ├── drawer-simple.png │ │ │ ├── drawer-touch.gif │ │ │ ├── footer-distributed.png │ │ │ ├── footer-rich-mantine.png │ │ │ ├── footer-rich.png │ │ │ ├── footer-simple-mantine.png │ │ │ ├── footer-simple.png │ │ │ ├── header-layered-mantine.png │ │ │ ├── header-simple-mantine.png │ │ │ ├── header-simple.png │ │ │ ├── header-sliding.gif │ │ │ ├── layout-main.png │ │ │ ├── layout-one-column.png │ │ │ ├── navbar-simple-mantine.png │ │ │ ├── navbar-simple.png │ │ │ ├── splash-screen.gif │ │ │ ├── use-case.png │ │ │ └── webapp-start.png │ └── robots.txt └── ru │ ├── articles │ ├── index.md │ └── posts.data.js │ ├── arty-crafty │ ├── analysis │ │ ├── architecture-and-design.md │ │ ├── business-analysis.md │ │ ├── data-model.md │ │ ├── research.md │ │ ├── tech-stack.md │ │ ├── ui-design.md │ │ └── ui-layout.md │ ├── assets │ │ ├── diagrams.drawio │ │ └── images │ │ │ ├── baas-adapters.webp │ │ │ ├── codeium-1.jpg │ │ │ ├── codeium-2.jpg │ │ │ ├── codeium-3.jpg │ │ │ ├── db-categories-data.webp │ │ │ ├── db-category-products-data.webp │ │ │ ├── db-products-data.webp │ │ │ ├── db-schema-1.webp │ │ │ ├── divide-et-impera.webp │ │ │ ├── header-1.gif │ │ │ ├── hoppscotch.webp │ │ │ ├── mobile-menu.webp │ │ │ ├── oc-product-table.png │ │ │ ├── package-diagram.jpg │ │ │ ├── path-1000-li.jpg │ │ │ ├── product-category.jpg │ │ │ ├── product-table-1.png │ │ │ ├── project-setup.png │ │ │ ├── supabase-api-keys.jpg │ │ │ ├── supabase-policies.jpg │ │ │ ├── three-tier-architecture.png │ │ │ ├── toys.jpg │ │ │ ├── use-case-online-shopping-example.jpg │ │ │ ├── use-case.png │ │ │ └── website-1.gif │ ├── backend │ │ ├── baas-choosing.md │ │ ├── db-data-model.md │ │ ├── hoppscotch.md │ │ ├── supabase-api.md │ │ └── supabase.md │ ├── index.md │ ├── introduction │ │ ├── development-stages.md │ │ ├── goals.md │ │ └── repository.md │ ├── showcase-data │ │ ├── api-service-adapter.md │ │ ├── mobile-menu.md │ │ ├── product-page.md │ │ ├── typescript.md │ │ └── vueuse.md │ └── showcase │ │ ├── codeium.md │ │ ├── customization.md │ │ ├── favourites.md │ │ ├── product-category.md │ │ └── project-setup.md │ ├── backend │ ├── api.md │ ├── auth.md │ ├── backend.md │ ├── cors.md │ └── protocols.md │ ├── book │ ├── Appendix__Migrating_from_Vue_2.md │ ├── Chapter_10__Deploying_Your_Application.md │ ├── Chapter_11__Bonus_Chapter_-_UX_Patterns.md │ ├── Chapter_1__The_Vue_3_Framework.md │ ├── Chapter_2__Software_Design_Principles_and_Patterns.md │ ├── Chapter_3__Setting_Up_a_Working_Project.md │ ├── Chapter_4__User_Interface_Composition_with_Components.md │ ├── Chapter_5__Single-Page_Applications.md │ ├── Chapter_6__Progressive_Web_Applications.md │ ├── Chapter_7__Data_Flow_Management.md │ ├── Chapter_8__Multithreading_with_Web_Workers.md │ ├── Chapter_9__Testing_and_Source_Control.md │ ├── images │ │ ├── Figure_1.01_B18602.jpg │ │ ├── Figure_10.01_B18602.jpg │ │ ├── Figure_10.02_B18602.jpg │ │ ├── Figure_11.01_B18602.jpg │ │ ├── Figure_11.02_B18602.jpg │ │ ├── Figure_11.03_B18602.jpg │ │ ├── Figure_11.04_B18602.jpg │ │ ├── Figure_11.05_B18602.jpg │ │ ├── Figure_11.06_B18602.jpg │ │ ├── Figure_11.07_B18602.jpg │ │ ├── Figure_11.08_B18602.jpg │ │ ├── Figure_11.09_B18602.jpg │ │ ├── Figure_11.10_B18602.jpg │ │ ├── Figure_11.11_B18602.jpg │ │ ├── Figure_11.12_B18602.jpg │ │ ├── Figure_11.13_B18602.jpg │ │ ├── Figure_11.14_B18602.jpg │ │ ├── Figure_11.15_B18602.jpg │ │ ├── Figure_11.16_B18602.jpg │ │ ├── Figure_11.17_B18602.jpg │ │ ├── Figure_11.18_B18602.jpg │ │ ├── Figure_11.19_B18602.jpg │ │ ├── Figure_11.20_B18602.jpg │ │ ├── Figure_11.21_B18602.jpg │ │ ├── Figure_11.22_B18602.jpg │ │ ├── Figure_11.23_B18602.jpg │ │ ├── Figure_11.24_B18602.jpg │ │ ├── Figure_11.25_B18602.jpg │ │ ├── Figure_11.26_B18602.jpg │ │ ├── Figure_11.27_B18602.jpg │ │ ├── Figure_11.28_B18602.jpg │ │ ├── Figure_11.29_B18602.jpg │ │ ├── Figure_11.30_B18602.jpg │ │ ├── Figure_2.01_B18602.jpg │ │ ├── Figure_2.02_B18602.jpg │ │ ├── Figure_2.03_B18602.jpg │ │ ├── Figure_2.04_B18602.jpg │ │ ├── Figure_2.05_B18602.jpg │ │ ├── Figure_2.06_B18602.jpg │ │ ├── Figure_2.07_B18602.jpg │ │ ├── Figure_2.08_B18602.jpg │ │ ├── Figure_3.01_B18602.jpg │ │ ├── Figure_3.02_B18602.jpg │ │ ├── Figure_3.03_B18602.jpg │ │ ├── Figure_3.04_B18602.jpg │ │ ├── Figure_3.05_B18602.jpg │ │ ├── Figure_3.06_B18602.jpg │ │ ├── Figure_4.01_B18602.jpg │ │ ├── Figure_4.02_B18602.jpg │ │ ├── Figure_4.03_B18602.jpg │ │ ├── Figure_4.04_B18602.jpg │ │ ├── Figure_4.05_B18602.jpg │ │ ├── Figure_4.06_B18602.jpg │ │ ├── Figure_4.07_B18602.jpg │ │ ├── Figure_5.01_B18602.jpg │ │ ├── Figure_5.02_B18602.jpg │ │ ├── Figure_5.03_B18602.jpg │ │ ├── Figure_5.04_B18602.jpg │ │ ├── Figure_5.05_B18602.jpg │ │ ├── Figure_5.06_B18602.jpg │ │ ├── Figure_5.07_B18602.jpg │ │ ├── Figure_5.08_B18602.jpg │ │ ├── Figure_6.01_B18602.jpg │ │ ├── Figure_6.02_B18602.jpg │ │ ├── Figure_6.03_B18602.jpg │ │ ├── Figure_6.04_B18602.jpg │ │ ├── Figure_6.05_B18602.jpg │ │ ├── Figure_6.06_B18602.jpg │ │ ├── Figure_6.07_B18602.jpg │ │ ├── Figure_6.08_B18602.jpg │ │ ├── Figure_7.01_B18602.jpg │ │ ├── Figure_7.02_B18602.jpg │ │ ├── Figure_7.03_B18602.jpg │ │ ├── Figure_7.04_B18602.jpg │ │ ├── Figure_7.05_B18602.jpg │ │ ├── Figure_7.06_B18602.jpg │ │ ├── Figure_7.07_B18602.jpg │ │ ├── Figure_8.01_B18602.jpg │ │ ├── Figure_8.02_B18602.jpg │ │ ├── Figure_8.03_B18602.jpg │ │ ├── Figure_8.04_B18602.jpg │ │ ├── Figure_8.05_B18602.jpg │ │ ├── Figure_8.06_B18602.jpg │ │ ├── Figure_8.07_B18602.jpg │ │ ├── Figure_8.08_B18602.jpg │ │ ├── Figure_9.01_B18602.jpg │ │ ├── Figure_9.02_B18602.jpg │ │ ├── Figure_9.03_B18602.jpg │ │ ├── Figure_9.04_B18602.jpg │ │ ├── Figure_9.05_B18602.jpg │ │ ├── Figure_9.06_B18602.jpg │ │ ├── Figure_9.07_B18602.jpg │ │ ├── Figure_9.08_B18602.jpg │ │ ├── Figure_9.09_B18602.jpg │ │ ├── Figure_9.10_B18602.jpg │ │ ├── Figure_9.11_B18602.jpg │ │ └── book-face.jpg │ ├── index.md │ └── summary.md │ ├── deployment │ ├── ci-cd.md │ ├── docker.md │ ├── github-actions.md │ └── hosting.md │ ├── development │ ├── architectural-patterns.md │ ├── assets.md │ ├── building.md │ ├── ide.md │ ├── libraries.md │ ├── misc.md │ ├── project-structure.md │ ├── store-comparison.md │ ├── stores.md │ ├── testing.md │ ├── vs-code-settings.json │ └── web-components.md │ ├── frontend │ ├── about-frameworks.md │ ├── architecture.md │ ├── css-ui-libs.md │ ├── learning.md │ └── spa-pwa-ssr-ssg.md │ ├── index.md │ ├── misc │ ├── CHANGELOG.md │ ├── cheat-sheets.md │ ├── contribute.md │ ├── glossary.md │ └── introduction.md │ ├── release-timeline │ ├── assets │ │ └── images │ │ │ └── rt.jpg │ ├── config.md │ ├── getting-data.md │ ├── getting-started.md │ ├── index.md │ ├── microfrontend.md │ ├── release-history.md │ ├── vitepress.md │ ├── vue-3.md │ └── web-component.md │ └── vue-webapp │ ├── architecture.drawio │ ├── contribution.md │ ├── getting-started.md │ ├── guidelines.md │ ├── index.md │ ├── objectives.md │ └── options │ ├── adaptability.md │ ├── api.md │ ├── baseIcon.md │ ├── description.md │ ├── drawer.md │ ├── footer.md │ ├── ga-gp.md │ ├── google-analytics.md │ ├── header.md │ ├── i18n.md │ ├── index.md │ ├── layout-main.md │ ├── layout-one-column.md │ ├── navbar.md │ ├── open-graph.md │ ├── pwa.md │ ├── splash-screen.md │ └── themes.md ├── eslint.config.js ├── index.html ├── package.json ├── pnpm-lock.yaml ├── src ├── arty-crafty-logo.xcf ├── html │ ├── en │ │ ├── Appendix_ Migrating from Vue 2.html │ │ ├── Chapter 10_ Deploying Your Application.html │ │ ├── Chapter 11 Bonus Chapter - UX Patterns.html │ │ ├── Chapter 1_ The Vue 3 Framework.html │ │ ├── Chapter 2_ Software Design Principles and Patterns.html │ │ ├── Chapter 3_ Setting Up a Working Project.html │ │ ├── Chapter 4_ User Interface Composition with Components.html │ │ ├── Chapter 5_ Single-Page Applications.html │ │ ├── Chapter 6_ Progressive Web Applications.html │ │ ├── Chapter 7_ Data Flow Management.html │ │ ├── Chapter 8_ Multithreading with Web Workers.html │ │ ├── Chapter 9_ Testing and Source Control.html │ │ ├── Final words.html │ │ └── originals │ │ │ ├── Appendix_ Migrating from Vue 2 _ Vue.js 3 Design Patterns and Best Practices.html │ │ │ ├── Chapter 10_ Deploying Your Application _ Vue.js 3 Design Patterns and Best Practices.html │ │ │ ├── Chapter 1_ The Vue 3 Framework _ Vue.js 3 Design Patterns and Best Practices.html │ │ │ ├── Chapter 2_ Software Design Principles and Patterns _ Vue.js 3 Design Patterns and Best Practices.html │ │ │ ├── Chapter 3_ Setting Up a Working Project _ Vue.js 3 Design Patterns and Best Practices.html │ │ │ ├── Chapter 4_ User Interface Composition with Components _ Vue.js 3 Design Patterns and Best Practices.html │ │ │ ├── Chapter 5_ Single-Page Applications _ Vue.js 3 Design Patterns and Best Practices.html │ │ │ ├── Chapter 6_ Progressive Web Applications _ Vue.js 3 Design Patterns and Best Practices.html │ │ │ ├── Chapter 7_ Data Flow Management _ Vue.js 3 Design Patterns and Best Practices.html │ │ │ ├── Chapter 8_ Multithreading with Web Workers _ Vue.js 3 Design Patterns and Best Practices.html │ │ │ ├── Chapter 9_ Testing and Source Control _ Vue.js 3 Design Patterns and Best Practices.html │ │ │ └── Final words _ Vue.js 3 Design Patterns and Best Practices.html │ └── ru │ │ ├── Appendix_ Migrating from Vue 2.html │ │ ├── Chapter 10_ Deploying Your Application.html │ │ ├── Chapter 11 Bonus Chapter - UX Patterns.html │ │ ├── Chapter 1_ The Vue 3 Framework.html │ │ ├── Chapter 2_ Software Design Principles and Patterns.html │ │ ├── Chapter 3_ Setting Up a Working Project.html │ │ ├── Chapter 4_ User Interface Composition with Components.html │ │ ├── Chapter 5_ Single-Page Applications.html │ │ ├── Chapter 6_ Progressive Web Applications.html │ │ ├── Chapter 7_ Data Flow Management.html │ │ ├── Chapter 8_ Multithreading with Web Workers.html │ │ └── Chapter 9_ Testing and Source Control.html ├── mermaid-diagrams.txt ├── notes.md ├── qa.png ├── vue-transparent.png └── vue-transparent.psd ├── translate-book.js ├── translate.cmd ├── translate.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.cursorrules: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/.cursorrules -------------------------------------------------------------------------------- /.favorites.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "type": "File", 4 | "name": "s:\\src\\vue-faq\\docs\\.vitepress\\config\\sidebar.arty-crafty.ru.ts", 5 | "parent_id": null, 6 | "fsPath": "s:\\src\\vue-faq\\docs\\.vitepress\\config\\sidebar.arty-crafty.ru.ts", 7 | "workspaceRoot": null, 8 | "workspacePath": null, 9 | "id": "VnMFHsjTDWOrmad6" 10 | }, 11 | { 12 | "type": "Directory", 13 | "name": "s:\\src\\vue-faq\\docs\\ru\\arty-crafty\\showcase", 14 | "parent_id": null, 15 | "fsPath": "s:\\src\\vue-faq\\docs\\ru\\arty-crafty\\showcase", 16 | "workspaceRoot": null, 17 | "workspacePath": null, 18 | "id": "FjsV2dvw3tmup0n8" 19 | }, 20 | { 21 | "type": "File", 22 | "name": "s:\\src\\vue-faq\\NOTES.md", 23 | "parent_id": null, 24 | "fsPath": "s:\\src\\vue-faq\\NOTES.md", 25 | "workspaceRoot": null, 26 | "workspacePath": null, 27 | "id": "PESpD0FGjgbmi3QU" 28 | } 29 | ] 30 | -------------------------------------------------------------------------------- /.github/workflows/deploy-build.yaml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | on: 3 | push: 4 | branches: [main] 5 | workflow_dispatch: 6 | # branches: [ "main", "development" ] 7 | permissions: 8 | contents: write 9 | # pages: write 10 | jobs: 11 | build-and-deploy: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - name: Checkout 🛎️ 15 | uses: actions/checkout@v3 16 | 17 | - uses: pnpm/action-setup@v2 18 | name: Install pnpm 19 | id: pnpm-install 20 | with: 21 | version: 8.5.0 22 | run_install: false 23 | 24 | - name: Install dependencies 25 | run: pnpm install 26 | 27 | - run: pnpm build 28 | 29 | - name: Deploy 🚀 30 | uses: JamesIves/github-pages-deploy-action@v4 31 | with: 32 | folder: docs/.vitepress/dist 33 | branch: gh-pages 34 | -------------------------------------------------------------------------------- /.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 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | .history 27 | docs/.vitepress/dist/ 28 | docs/.vitepress/cache/ 29 | .favorites.json 30 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": false, 3 | "printWidth": 120, 4 | "semi": true 5 | } -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue FAQ 2 | 3 | Available at [https://vue-faq.org/](https://vue-faq.org/) 4 | 5 | This FAQ (Frequently Asked Questions) is created on the most frequently touched topics in Reddit [r/vuejs/](https://www.reddit.com/r/vuejs/) and Telegram chat [@vuejs_ru](https://t.me/vuejs_ru). 6 | 7 | The level of questions and answers covers both beginners and experienced frontend developers. 8 | 9 | As answers are used both generally recognized, verified and objective information, and subjective opinion of the author. 10 | 11 | The main sources of information - official documentation of Vue 3 and Vite, [r/vuejs/](https://www.reddit.com/r/vuejs/), [@vuejs_ru](https://t.me/vuejs_ru). 12 | 13 | Relevance of the information - 2022-2023 years. 14 | 15 | --- 16 | 17 | This website utilizes [VitePress](https://vitepress.dev/) SSG framework 18 | 19 | If you like this project - star it! 20 | -------------------------------------------------------------------------------- /docs/.vitepress/config/nav.en.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { text: "Home", link: "/en/" }, 3 | { text: "FAQ", link: "/en/misc/introduction" }, 4 | { text: "Argus", link: "https://startup-tools.ru/telegram-tools/argus?utm_source=vue-faq.org&utm_medium=link&utm_campaign=vue-faq-website" }, 5 | { text: "Projects", items: [ 6 | { text: "vue-webapp", link: "/en/vue-webapp/" }, 7 | { text: "Release Timeline", link: "/en/release-timeline/" }, 8 | // { text: "Arty-Crafty", link: "/ru/arty-crafty/" }, 9 | { text: "Argus", link: "https://startup-tools.ru/telegram-tools/argus" }, 10 | { text: "Noema", link: "https://startup-tools.ru/telegram-tools/noema" }, 11 | // { text: "Статьи", link: "/ru/articles/" }, 12 | ] }, 13 | 14 | // { text: "Release Timeline", link: "/en/release-timeline/" }, 15 | // { text: "vue-webapp", link: "/en/vue-webapp/" }, 16 | { 17 | text: "v 1.4", 18 | items: [ 19 | { 20 | text: "Changelog", 21 | link: "/en/misc/CHANGELOG.md", 22 | }, 23 | { 24 | text: "Contribute", 25 | link: "/en/misc/contribute.md", 26 | }, 27 | ], 28 | }, 29 | ]; 30 | -------------------------------------------------------------------------------- /docs/.vitepress/config/nav.ru.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | // { text: "Главная", link: "/ru/" }, 3 | { text: "FAQ", link: "/ru/misc/introduction" }, 4 | { text: "Учебник", link: "/ru/book/" }, 5 | { text: "Argus", link: "https://startup-tools.ru/telegram-tools/argus?utm_source=vue-faq.org&utm_medium=link&utm_campaign=vue-faq-website" }, 6 | { text: "Проекты", items: [ 7 | { text: "vue-webapp", link: "/ru/vue-webapp/" }, 8 | { text: "Release Timeline", link: "/ru/release-timeline/" }, 9 | { text: "Arty-Crafty", link: "/ru/arty-crafty/" }, 10 | { text: "Argus", link: "https://startup-tools.ru/telegram-tools/argus" }, 11 | { text: "Noema", link: "https://startup-tools.ru/telegram-tools/noema" }, 12 | { text: "Статьи", link: "/ru/articles/" }, 13 | ] }, 14 | { 15 | text: "v 1.4", 16 | items: [ 17 | { 18 | text: "Changelog", 19 | link: "/ru/misc/CHANGELOG.md", 20 | }, 21 | { 22 | text: "Внести вклад", 23 | link: "/ru/misc/contribute.md", 24 | }, 25 | { 26 | text: "@vuejs_ru", 27 | title: "Телеграм сообщество", 28 | link: "https://t.me/vuejs_ru", 29 | }, 30 | { 31 | text: "@/r/vuejs/", 32 | link: "https://www.reddit.com/r/vuejs/", 33 | }, 34 | ], 35 | }, 36 | ]; 37 | -------------------------------------------------------------------------------- /docs/.vitepress/config/sidebar.book.ru.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { text: "Предисловие", link: "/ru/book/" }, 3 | { text: "Краткое содержание", link: "/ru/book/summary" }, 4 | // { text: "Глава 1", link: "/book/chapter-1" }, 5 | // { text: "Глава 1 cc", link: "/book/Chapter_1__The Vue 3 Framework - cc" }, 6 | // { text: "Глава 1 cc2", link: "/book/Chapter_1__The Vue 3 Framework - cc2" }, 7 | // { text: "Глава 1 cb", link: "/book/Chapter_1__The Vue 3 Framework - cb" }, 8 | // { text: "Глава 1 a", link: "/book/Chapter_1__The Vue 3 Framework - a" }, 9 | { text: "Глава 1: Фреймворк Vue 3", link: "/ru/book/Chapter_1__The_Vue_3_Framework" }, 10 | { 11 | text: "Глава 2: Принципы и шаблоны проектирования программного обеспечения", 12 | // link: "/ru/book/not-implemented", 13 | link: "/ru/book/Chapter_2__Software_Design_Principles_and_Patterns", 14 | }, 15 | { 16 | text: "Глава 3: Установка рабочего проекта", 17 | link: "/ru/book/Chapter_3__Setting_Up_a_Working_Project", 18 | }, 19 | { 20 | text: "Глава 4: Композиция пользовательского интерфейса с помощью компонентов", 21 | link: "/ru/book/Chapter_4__User_Interface_Composition_with_Components", 22 | }, 23 | { 24 | text: "Глава 5: Одностраничные приложения (SPA)", 25 | link: "/ru/book/Chapter_5__Single-Page_Applications", 26 | }, 27 | { 28 | text: "Глава 6: Прогрессивные веб-приложения", 29 | link: "/ru/book/Chapter_6__Progressive_Web_Applications", 30 | }, 31 | { 32 | text: "Глава 7: Управление потоком данных", 33 | link: "/ru/book/Chapter_7__Data_Flow_Management", 34 | }, 35 | { 36 | text: "Глава 8: Многопоточность с Web Workers", 37 | link: "/ru/book/Chapter_8__Multithreading_with_Web_Workers", 38 | }, 39 | { 40 | text: "Глава 9: Тестирование и системы контроля версий", 41 | link: "/ru/book/Chapter_9__Testing_and_Source_Control", 42 | }, 43 | { 44 | text: "Глава 10: Развертывание приложения", 45 | link: "/ru/book/Chapter_10__Deploying_Your_Application", 46 | }, 47 | { 48 | text: "Глава 11: Бонусная глава - Шаблоны UX", 49 | link: "/ru/book/Chapter_11__Bonus_Chapter_-_UX_Patterns", 50 | }, 51 | { 52 | text: "Приложение: Миграция с Vue 2 на Vue 3", 53 | link: "/ru/book/Appendix__Migrating_from_Vue_2", 54 | }, 55 | ]; 56 | -------------------------------------------------------------------------------- /docs/.vitepress/config/sidebar.faq.en.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { text: "Introduction", link: "/en/misc/introduction" }, 3 | { 4 | text: "Frontend", 5 | items: [ 6 | { text: "About frontend frameworks", link: "/en/frontend/about-frameworks" }, 7 | { text: "How to learn Vue?", link: "/en/frontend/learning" }, 8 | { text: "SPA, PWA, SSG, SSR and SEO", link: "/en/frontend/spa-pwa-ssr-ssg" }, 9 | { text: "CSS and UI libraries", link: "/en/frontend/css-ui-libs" }, 10 | { text: "Frontend application architecture", link: "/en/frontend/architecture" }, 11 | ], 12 | }, 13 | { 14 | text: "Development", 15 | items: [ 16 | { text: "Configuring the IDE", link: "/en/development/ide" }, 17 | { text: "Creating and building web application", link: "/en/development/building" }, 18 | { text: "Project structure", link: "/en/development/project-structure" }, 19 | { text: "Architectural patterns", link: "/en/development/architectural-patterns" }, 20 | { text: "How to use images and other resources", link: "/en/development/assets" }, 21 | { text: "Stores - Vuex, Pinia and Composition API", link: "/en/development/stores" }, 22 | { text: "Comparison of different reactive state management techniques", link: "/en/development/store-comparison" }, 23 | { text: "Testing", link: "/en/development/testing" }, 24 | { text: "Useful tips", link: "/en/development/misc" }, 25 | ], 26 | }, 27 | { 28 | text: "Backend", 29 | items: [ 30 | { text: "Authorization and Authentication", link: "/en/backend/auth" }, 31 | { text: "Protocols. To REST or not to REST?", link: "/en/backend/protocols" }, 32 | { text: "API service adapter", link: "/en/backend/api" }, 33 | { text: "Options to set up a backend", link: "/en/backend/backend" }, 34 | { text: "CORS", link: "/en/backend/cors" }, 35 | ], 36 | }, 37 | { 38 | text: "Deploy on server", 39 | items: [ 40 | { text: "CI/CD", link: "/en/deployment/ci-cd" }, 41 | { text: "Github Actions", link: "/en/deployment/github-actions" }, 42 | { text: "Site Hosting Options", link: "/en/deployment/hosting" }, 43 | // { text: "Docker", link: "/en/deployment/docker" }, 44 | ], 45 | }, 46 | { text: "Cheat-sheets", link: "/en/misc/cheat-sheets" }, 47 | { text: "Glossary", link: "/en/misc/glossary" }, 48 | { text: "Contribute to this FAQ", link: "/en/misc/contribute" }, 49 | ]; 50 | -------------------------------------------------------------------------------- /docs/.vitepress/config/sidebar.faq.ru.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { text: "Предисловие", link: "/ru/misc/introduction" }, 3 | { 4 | text: "Фронтенд", 5 | items: [ 6 | { text: "О фронтенд фреймворках", link: "/ru/frontend/about-frameworks" }, 7 | { text: "Как изучать Vue?", link: "/ru/frontend/learning" }, 8 | { text: "SPA, PWA, SSG, SSR и SEO", link: "/ru/frontend/spa-pwa-ssr-ssg" }, 9 | { text: "CSS и UI библиотеки", link: "/ru/frontend/css-ui-libs" }, 10 | { text: "Архитектура фронтенд приложений", link: "/ru/frontend/architecture" }, 11 | ], 12 | }, 13 | { 14 | text: "Разработка", 15 | items: [ 16 | { text: "Настройка IDE", link: "/ru/development/ide" }, 17 | { text: "Создание и сборка приложения", link: "/ru/development/building" }, 18 | { text: "Структура проекта", link: "/ru/development/project-structure" }, 19 | { text: "Архитектурные решения", link: "/ru/development/architectural-patterns" }, 20 | { text: "Как вставлять картинки и другие ресурсы", link: "/ru/development/assets" }, 21 | { text: "Сторы - Vuex, Pinia и Composition API", link: "/ru/development/stores" }, 22 | { text: "Сравнение state тактик", link: "/ru/development/store-comparison" }, 23 | { text: "Тестирование", link: "/ru/development/testing" }, 24 | { text: "Web components", link: "/ru/development/web-components" }, 25 | { text: "Полезные советы", link: "/ru/development/misc" }, 26 | ], 27 | }, 28 | { 29 | text: "Бэкенд", 30 | items: [ 31 | { text: "Авторизация и аутентификация", link: "/ru/backend/auth" }, 32 | { text: "Протоколы. To REST или не REST?", link: "/ru/backend/protocols" }, 33 | { text: "API сервис", link: "/ru/backend/api" }, 34 | { text: "Варианты сделать бэкенд", link: "/ru/backend/backend" }, 35 | { text: "CORS", link: "/ru/backend/cors" }, 36 | ], 37 | }, 38 | { 39 | text: "Деплой на сервере", 40 | items: [ 41 | { text: "CI/CD", link: "/ru/deployment/ci-cd" }, 42 | { text: "Github Actions", link: "/ru/deployment/github-actions" }, 43 | { text: "Варианты размещения сайта", link: "/ru/deployment/hosting" }, 44 | // { text: "Docker", link: "/ru/deployment/docker" }, 45 | ], 46 | }, 47 | { text: "Шпаргалки", link: "/ru/misc/cheat-sheets" }, 48 | { text: "Глоссарий", link: "/ru/misc/glossary" }, 49 | { text: "Дополнить этот FAQ", link: "/ru/misc/contribute" }, 50 | ]; 51 | -------------------------------------------------------------------------------- /docs/.vitepress/config/sidebar.release-timeline.en.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { text: "About", link: "/en/release-timeline/index" }, 3 | { 4 | text: "Installation", 5 | collapsed: false, 6 | items: [ 7 | { text: "In Vue 3 project", link: "/en/release-timeline/vue-3" }, 8 | { text: "In VitePress", link: "/en/release-timeline/vitepress" }, 9 | { text: "As micro-frontend", link: "/en/release-timeline/microfrontend" }, 10 | { text: "Web component", link: "/en/release-timeline/web-component" }, 11 | ], 12 | }, 13 | { text: "Configuration", link: "/en/release-timeline/config" }, 14 | { text: "Getting data", link: "/en/release-timeline/getting-data" }, 15 | { text: "Release Timeline", link: "/en/release-timeline/release-history" }, 16 | ]; 17 | -------------------------------------------------------------------------------- /docs/.vitepress/config/sidebar.release-timeline.ru.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { text: "О библиотеке", link: "/ru/release-timeline/index" }, 3 | { 4 | text: "Установка", 5 | collapsed: false, 6 | items: [ 7 | { text: "Во Vue 3 проект", link: "/ru/release-timeline/vue-3" }, 8 | { text: "В VitePress", link: "/ru/release-timeline/vitepress" }, 9 | { text: "Как микрофронтенд", link: "/ru/release-timeline/microfrontend" }, 10 | { text: "Web component", link: "/ru/release-timeline/web-component" }, 11 | ], 12 | }, 13 | { text: "Конфигурация", link: "/ru/release-timeline/config" }, 14 | { text: "Получение данных", link: "/ru/release-timeline/getting-data" }, 15 | { text: "История релизов", link: "/ru/release-timeline/release-history" }, 16 | ]; 17 | -------------------------------------------------------------------------------- /docs/.vitepress/config/sidebar.vue-webapp.en.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { text: "About", link: "/en/vue-webapp/" }, 3 | { text: "Getting started", link: "/en/vue-webapp/getting-started" }, 4 | { text: "Objectives", link: "/en/vue-webapp/objectives" }, 5 | { text: "Guidelines", link: "/en/vue-webapp/guidelines " }, 6 | { text: "Contribution", link: "/en/vue-webapp/contribution" }, 7 | { 8 | text: "Options", 9 | link: "/en/vue-webapp/options/index", 10 | items: [ 11 | { 12 | text: "App layouts", 13 | collapsed: false, 14 | items: [ 15 | { text: "MainLayout", link: "/en/vue-webapp/options/layout-main" }, 16 | { text: "OneColumnLayout", link: "/en/vue-webapp/options/layout-one-column" }, 17 | ], 18 | }, 19 | { 20 | text: "App components", 21 | collapsed: false, 22 | items: [ 23 | { text: "Header", link: "/en/vue-webapp/options/header" }, 24 | { text: "Footer", link: "/en/vue-webapp/options/footer" }, 25 | { text: "Navigation drawer", link: "/en/vue-webapp/options/drawer" }, 26 | { text: "Navbar", link: "/en/vue-webapp/options/navbar" }, 27 | { text: "BaseIcon", link: "/en/vue-webapp/options/baseIcon" }, 28 | ], 29 | }, 30 | { 31 | text: "Features", 32 | collapsed: false, 33 | items: [ 34 | { text: "Description", link: "/en/vue-webapp/options/description" }, 35 | { text: "Adaptability", link: "/en/vue-webapp/options/adaptability" }, 36 | { text: "Themes", link: "/en/vue-webapp/options/themes" }, 37 | { text: "Splash screen", link: "/en/vue-webapp/options/splash-screen" }, 38 | { text: "Google analytics", link: "/en/vue-webapp/options/google-analytics" }, 39 | { text: "Open graph", link: "/en/vue-webapp/options/open-graph" }, 40 | { text: "API layer", link: "/en/vue-webapp/options/api" }, 41 | { text: "PWA", link: "/en/vue-webapp/options/pwa" }, 42 | { text: "Github Pages deploy", link: "/en/vue-webapp/options/ga-gp" }, 43 | { text: "i18n", link: "/en/vue-webapp/options/i18n" }, 44 | ], 45 | }, 46 | ], 47 | }, 48 | ]; 49 | -------------------------------------------------------------------------------- /docs/.vitepress/config/sidebar.vue-webapp.ru.ts: -------------------------------------------------------------------------------- 1 | export default [ 2 | { text: "О приложении", link: "/ru/vue-webapp/" }, 3 | { text: "Установка", link: "/ru/vue-webapp/getting-started" }, 4 | { text: "Цели", link: "/ru/vue-webapp/objectives" }, 5 | { text: "Принципы", link: "/ru/vue-webapp/guidelines" }, 6 | { text: "Участие в проекте", link: "/ru/vue-webapp/contribution" }, 7 | { 8 | text: "Опции", 9 | link: "/ru/vue-webapp/options/index", 10 | items: [ 11 | { 12 | text: "Макеты приложения", 13 | collapsed: false, 14 | items: [ 15 | { text: "MainLayout", link: "/ru/vue-webapp/options/layout-main" }, 16 | { text: "OneColumnLayout", link: "/ru/vue-webapp/options/layout-one-column" }, 17 | ], 18 | }, 19 | { 20 | text: "Компоненты приложения", 21 | collapsed: false, 22 | items: [ 23 | { text: "Header", link: "/ru/vue-webapp/options/header" }, 24 | { text: "Footer", link: "/ru/vue-webapp/options/footer" }, 25 | { text: "Navigation drawer", link: "/ru/vue-webapp/options/drawer" }, 26 | { text: "Navbar", link: "/ru/vue-webapp/options/navbar" }, 27 | { text: "BaseIcon", link: "/ru/vue-webapp/options/baseIcon" }, 28 | ], 29 | }, 30 | { 31 | text: "Функциональность", 32 | collapsed: false, 33 | items: [ 34 | { text: "Описание", link: "/ru/vue-webapp/options/description" }, 35 | { text: "Адаптивность", link: "/ru/vue-webapp/options/adaptability" }, 36 | { text: "Themes", link: "/ru/vue-webapp/options/themes" }, 37 | { text: "Splash screen", link: "/ru/vue-webapp/options/splash-screen" }, 38 | { text: "Google analytics", link: "/ru/vue-webapp/options/google-analytics" }, 39 | { text: "Open graph", link: "/ru/vue-webapp/options/open-graph" }, 40 | { text: "API модуль", link: "/ru/vue-webapp/options/api" }, 41 | { text: "PWA", link: "/ru/vue-webapp/options/pwa" }, 42 | { text: "Github Pages deploy", link: "/ru/vue-webapp/options/ga-gp" }, 43 | { text: "i18n", link: "/ru/vue-webapp/options/i18n" }, 44 | ], 45 | }, 46 | ], 47 | }, 48 | ]; 49 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/custom-block.css: -------------------------------------------------------------------------------- 1 | .custom-block.details { 2 | margin: 2em 0; 3 | summary { 4 | font-size: 1.3em; 5 | padding-right: 24px; 6 | width: 100%; 7 | position: relative; 8 | cursor: pointer; 9 | list-style: none; 10 | outline: 0; 11 | margin-right: 1em; 12 | &::-webkit-details-marker { 13 | display: none; 14 | } 15 | &:after { 16 | content: "+"; 17 | color: var(--vp-custom-block-details-text); 18 | position: absolute; 19 | font-size: 2rem; 20 | line-height: 0; 21 | top: 50%; 22 | right: 0; 23 | font-weight: 200; 24 | transform-origin: center; 25 | transition: 300ms linear; 26 | } 27 | } 28 | &[open] { 29 | p { 30 | font-size: 1.2em; 31 | line-height: 1.6em; 32 | margin: 1.2em 0; 33 | } 34 | summary { 35 | margin-bottom: 1.3em; 36 | &:after { 37 | transform: rotate(45deg); 38 | right: -2px; 39 | top: calc(50% + 1px); 40 | } 41 | & ~ * { 42 | opacity: 1; 43 | animation: open 0.3s ease-in-out; 44 | } 45 | } 46 | ul, 47 | ol, 48 | blockquote p, 49 | pre code { 50 | font-size: 1.1em; 51 | } 52 | } 53 | } 54 | @media (max-width: 768px) { 55 | .custom-block.details[open] p { 56 | font-size: 1.1em; 57 | } 58 | } 59 | 60 | @keyframes open { 61 | 0% { 62 | opacity: 0; 63 | } 64 | 100% { 65 | opacity: 1; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/custom.css: -------------------------------------------------------------------------------- 1 | @import "./custom-block.css"; 2 | 3 | body { 4 | overflow-y: scroll; 5 | --vp-custom-block-code-font-size: 14px; 6 | :not(.dark) & { 7 | --vp-custom-block-details-text: #54545c; 8 | } 9 | .vp-doc { 10 | h1 { 11 | margin-bottom: 1em; 12 | } 13 | p img { 14 | margin: auto; 15 | } 16 | } 17 | .is-home { 18 | .main .text { 19 | line-height: 44px; 20 | font-size: 38px; 21 | } 22 | .has-image .main .name { 23 | font-size: 68px; 24 | margin-bottom: 30px; 25 | } 26 | } 27 | .social-links { 28 | a:last-child { 29 | width: unset; 30 | svg { 31 | width: 80px !important; 32 | } 33 | } 34 | } 35 | } 36 | 37 | .arty-crafty, .textbook, .articles { 38 | .VPNavBarTranslations, .VPMenu .group.translations { 39 | display: none; 40 | } 41 | } 42 | 43 | .arty-crafty { 44 | img:not(.logo) { 45 | border: 1px solid #ddd; 46 | } 47 | } 48 | 49 | .VPSidebarItem.level-0 h2.text { 50 | font-family: Office Code Pro,Source Code Pro,Menlo,monospace; 51 | text-transform: uppercase; 52 | letter-spacing: .07em; 53 | } -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import DefaultTheme from "vitepress/theme"; 2 | import "./custom.css"; 3 | import AppLayout from "./AppLayout.vue"; 4 | 5 | // DefaultTheme.enhanceApp = ({ app, router, siteData }) => { 6 | // console.log("app, router, siteData"); 7 | // console.log(app); 8 | // } 9 | // export default DefaultTheme; 10 | export default { 11 | extends: DefaultTheme, 12 | Layout: AppLayout, 13 | }; 14 | -------------------------------------------------------------------------------- /docs/assets/images/dynamic-rendering.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/assets/images/dynamic-rendering.png -------------------------------------------------------------------------------- /docs/assets/images/modular-architecture.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/assets/images/modular-architecture.webp -------------------------------------------------------------------------------- /docs/assets/images/spa-vs-mpa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/assets/images/spa-vs-mpa.png -------------------------------------------------------------------------------- /docs/en/assets/images/dynamic-rendering.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/en/assets/images/dynamic-rendering.png -------------------------------------------------------------------------------- /docs/en/assets/images/spa-vs-mpa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/en/assets/images/spa-vs-mpa.png -------------------------------------------------------------------------------- /docs/en/backend/protocols.md: -------------------------------------------------------------------------------- 1 | # Protocols. To REST or not to REST? 2 | 3 | ::: details REST, WebSockets, JSON-RPC 4 | 5 | For a beginner, of course, it's more convenient to start with `REST` - requests to the server in any way. 6 | 7 | For the more experienced, especially fullstackers, I suggest to take a look at `JSON-RPC`. 8 | 9 | `WebSockets` is convenient because it gives bidirectional communication (the server can send messages to the client), but requires special software on the backend. 10 | 11 | ::: 12 | 13 | ::: details Why JSON-RPC? 14 | 15 | After an experience with JSON-RPC, communication with back end is usually never the same again. 16 | 17 | It gives order, clarity, rigor and at the same time flexibility. It greatly simplifies and makes code understandable both on the frontend and backend. 18 | 19 | In addition, JSON-RPC is the de facto standard for Web 3.0 communications. 20 | 21 | A variant of TypeScript implementation of frontend api service on JSON-RPC - [here](https://github.com/vuesence/vue-webapp/blob/main/src/services/api/jsonrpc.ts). 22 | 23 | When using `JSON-RPC`, switching to `WebSockets` or other transport protocols will not cause any difficulties due to the unification of the message format. 24 | 25 | ::: 26 | 27 | ::: details How to organize reconnection of WebSocket connection on the front? 28 | 29 | You need an `Event bus`, which will work as a proxy for incoming messages. 30 | 31 | You can use [mitt](https://github.com/developit/mitt). 32 | 33 | ::: 34 | 35 | ::: details What is GraphQL? 36 | 37 | A complex thing, an attempt to translate SQL query language for client-server queries on the web. 38 | 39 | It has a rather specific use, mostly with third-party data providers via APIs. 40 | 41 | For your own fullstack application - 99% unnecessary solution. 42 | 43 | ::: 44 | -------------------------------------------------------------------------------- /docs/en/deployment/ci-cd.md: -------------------------------------------------------------------------------- 1 | # CI/CD 2 | 3 | ::: details What is CI/CD? 4 | 5 | CI/CD (Continuous Integration, Continuous Delivery) is a technology for automating the build, testing and deployment of a project under development. 6 | 7 | In other words, the process of transition of code lying in a repository into a working product on a cloud server, for example. 8 | 9 | CI/CD elements are useful not only for a devops engineer, but also for a simple front-end developer, allowing him after git commit/push code changes to get a working site, for example, on GitHub Pages without additional actions. 10 | 11 | Main tools for CI/CD: GitHub Actions, GitLab CI/CD, Jenkins, Trevis 12 | 13 | ::: 14 | -------------------------------------------------------------------------------- /docs/en/deployment/docker.md: -------------------------------------------------------------------------------- 1 | # Docker 2 | -------------------------------------------------------------------------------- /docs/en/deployment/hosting.md: -------------------------------------------------------------------------------- 1 | # Hosting 2 | 3 | ::: details Where to host a website? 4 | 5 | After building a frontend project, you get a set of `html/css/js/jpeg` and other static files that need to be hosted on some webserver for your website to be online. 6 | 7 | Hosting options with free plans: 8 | 9 | - [GitHub Pages](https://pages.github.com/) 10 | - [Netlify](https://netlify.com) 11 | - [Render](https://render.com/) 12 | - [Firebase](https://firebase.google.com/) 13 | - [Vercel](https://vercel.com/) 14 | - [Heroku](https://Heroku.com/) 15 | - [Amazon S3](https://aws.amazon.com/s3/) 16 | 17 | Also, many cloud providers (Amazon, Google, Oracle, Microsoft) provide free plans with the ability to get a virtual server on which you can install a webserver (Nginx, Apache) and your website yourself. In this case, the backend can also be placed on it. 18 | 19 | ::: 20 | 21 | ::: details Domain 22 | 23 | Buying a domain is now very easy and inexpensive (from $1 per year), so it is recommended to do so. GitHub Pages and other hosting providers allow you to connect a custom domain to your site. Subdomains are convenient for organizing development environments: 24 | 25 | - dev.website.com 26 | - dev-api.website.com 27 | - website.com 28 | - api.website.com 29 | - docs.website.com 30 | 31 | ::: 32 | 33 | ::: details SSL certificates 34 | 35 | Modern browsers require a website to be accessible via HTTPS protocol. This requires an SSL certificate for your domain. Hosting providers like Firebase or Github Pages will provide you with the certificate themselves. If you host your site yourself on a cloud server, you can generate the certificate using CertBot software. 36 | 37 | ::: 38 | -------------------------------------------------------------------------------- /docs/en/development/libraries.md: -------------------------------------------------------------------------------- 1 | # Tell me a handy library 2 | 3 | 4 | 5 | ::: details For working with dates 6 | `moment` is irretrievably obsolete. There's day.js and day-fnc.js. 7 | 8 | However, in 95% of cases the capabilities of the standard JavaScript Intl package are sufficient 9 | ::: 10 | 11 | ::: details For UI components 12 | 13 | There are quite a few CSS and UI libraries out there 14 | 15 | Here [in this article](https://habr.com/ru/articles/745012/) is a small overview of their heavyweight nature 16 | 17 | Quasar and PrimeVue look solid. 18 | 19 | ::: 20 | -------------------------------------------------------------------------------- /docs/en/development/testing.md: -------------------------------------------------------------------------------- 1 | # Testing 2 | 3 | ::: details Do I need testing on the frontend? 4 | 5 | There are several types of tests, among them are unit tests and integration (e2e) tests 6 | 7 | Unit testing in Vue is done by [Vitest](https://vitest.dev/), [Jest](https://jestjs.io/). 8 | 9 | You should be more careful with front-end testing, as writing and rewriting tests can often take time comparable to the development itself. At the same time, the usefulness of these tests will be highly questionable. Their expediency appears on large projects with a large number of developers. There unit tests also take time but reduce the probability that someone will mess something up. At the same time, unit tests are not the most necessary ingredient for quick MVP creation at a startup. 10 | 11 | Frontend development in this aspect is very different from backend development, where unit tests are really useful. 12 | 13 | Good article on this topic - [Unit Test Fetish](https://250bpm.com/blog:40/) 14 | 15 | ::: 16 | 17 | ::: details What are e2e tests? 18 | 19 | On the front end, especially for a web application that is already in production and needs to be updated from time to time, e2e tests are important. 20 | 21 | e2e (end-to-end) testing is a software testing process that simulates real user actions at the interface level. 22 | 23 | In this case, a browser will be launched (usually in headless mode - without UI), and it will use the scripts written to check the work of the site - the presence of elements on the page, the possibility of login, etc. 24 | 25 | The main tools for e2e testing are [Cypress](https://www.cypress.io/), [WebdriverIO](https://webdriver.io/). 26 | 27 | In CI/CD projects, running tests is one of the main moments along with linting and build. 28 | 29 | ::: 30 | -------------------------------------------------------------------------------- /docs/en/frontend/css-ui-libs.md: -------------------------------------------------------------------------------- 1 | # CSS and UI libraries 2 | 3 | ::: details What are CSS and UI libraries? 4 | 5 | CSS and UI libraries either provide their own or help you create custom UI components like Button or Select? which can speed up your development. 6 | 7 | CSS libraries do not contain JavaScript code and therefore have limitations for complex components like Select or Dropdown. 8 | 9 | There is a separate type of Headless-UI libraries that offer components without stylized visualization - only component logic and Accessibility requirements. The developer needs to add CSS styles himself. 10 | 11 | ::: 12 | 13 | ::: details Pros and cons of UI libraries? 14 | 15 | Pros: shortens the development, if you use it on the project as much as possible, brings a unified style to the application 16 | 17 | Cons: as any dependency can become obsolete (Vuetify 2 tragedy), adds weight to the final bundle. 18 | 19 | ::: 20 | 21 | ::: details How to reduce dependency on foreign libraries? 22 | 23 | Wrap up UI library components in your own custom components. 24 | 25 | ```vue 26 | 27 | 30 | ``` 31 | 32 | and use `BaseButton` in your code. This way it will be much easier for you to upgrade, replace the library or replace this component with a self-designed one. And even just change the styles of the component. 33 | 34 | ::: 35 | 36 | ::: details Layout and adaptability of pages by means of CSS and UI libraries 37 | 38 | Using the column system and other functionality of CSS and UI libraries like the popular Tailwind is convenient for small projects and sometimes speeds up layout, but very much worsens the quality of the code as a whole, including its maintainability and extensibility. It's as if the world went back to the days of IE6, when all styles and JavaScript were also located in tag attributes, and the whole evolution of CSS into a clear, convenient, beautiful hierarchical class model was for nothing, just like the division of the web into document (template), presentation layer (CSS styles) and logic (JavaScript). 39 | 40 | The web is full of articles why an approach like Tailwind is a bad thing. We can only note that with proper skill, layout on pure CSS3 is also fast and much more convenient and pleasant in terms of DX than through CSS and UI libraries. 41 | 42 | ::: tip Quote 43 | 44 | Good developers know the reasons why standards, patterns and good practices have become the way they are. 45 | 46 | Bad developers stick to whatever new trend that might save them some learning curve. 47 | 48 | ::: 49 | -------------------------------------------------------------------------------- /docs/en/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | # https://vitepress.dev/reference/default-theme-home-page 3 | layout: home 4 | 5 | hero: 6 | name: "Vue FAQ" 7 | text: "Vue JavaScript framework FAQ" 8 | tagline: Most frequently asked questions about Vue.js 9 | actions: 10 | - theme: brand 11 | text: Get Started 12 | link: /en/misc/introduction 13 | - theme: alt 14 | text: Why Vue? 15 | link: /en/frontend/about-frameworks 16 | image: 17 | src: /images/vue-faq-logo.webp 18 | alt: Vue FAQ 19 | 20 | features: 21 | - title: Frontend 22 | details: General issues of frontend development - architecture, design patterns, best practices are discussed 23 | - title: Vue 3 24 | details: Focuses on Vue 3, Composition API and the Vue ecosystem of recent years. 25 | - title: vue-webapp 26 | details: Scaffold your Vue 3 project with many prebuilt options 27 | - title: Nuxt-free 28 | details: Nuxt is a separate standalone framework that deserves its own FAQ 29 | --- 30 | -------------------------------------------------------------------------------- /docs/en/misc/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | 76 | -------------------------------------------------------------------------------- /docs/en/misc/cheat-sheets.md: -------------------------------------------------------------------------------- 1 | # Cheat Sheet 2 | 3 | 4 | 5 | ### Vue 6 | 7 | - Vue 3 Cheat Sheet 8 | 9 | ### JavaScript 10 | 11 | - JavaScript Cheat Sheet 12 | 13 | ### HTML 14 | 15 | - HTML5 Cheat Sheet 16 | 17 | ### CSS 18 | 19 | - FlexBox Cheat Sheet 20 | - FlexBox Cheat Sheet 2 21 | - Grid Cheat Sheet 22 | - Grid Cheat Sheet 2 23 | 24 | ### Typescript 25 | 26 | - TypeScript Types 27 | - TypeScript Interfaces 28 | - TypeScript Control Flow Analysis 29 | - TypeScript Classes 30 | 31 | ### Markdown 32 | 33 | - Markdown 34 | -------------------------------------------------------------------------------- /docs/en/misc/glossary.md: -------------------------------------------------------------------------------- 1 | # Glossary and abbreviations 2 | 3 | - DX (developer experience) - developer's experience, the convenience of working on the application. This includes everything - code quality, IDE usability, competent project architecture, commenting, documentation quality, using proven and best practices on the project, etc. 4 | - UX (user experience) - user's experience. Its general impression of the user's convenience in working with the site/application. 5 | - UI (user interface) - website/application design from the point of view of visual aesthetics and style. 6 | - SW (service worker) - Service Worker (PWA element) 7 | - AT (access token) - JWT authentication token 8 | - RT (refresh token) - JWT authentication token 9 | -------------------------------------------------------------------------------- /docs/en/misc/introduction.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | This FAQ (Frequently Asked Questions) is created on the most frequently touched topics in Reddit [r/vuejs/](https://www.reddit.com/r/vuejs/) and Telegram chat [@vuejs_ru](https://t.me/vuejs_ru). 4 | 5 | The level of questions and answers covers both beginners and experienced frontend developers. 6 | 7 | As answers are used both generally recognized, verified and objective information, and subjective opinion of the author. 8 | 9 | The increase in complexity does not come from the top down. The first questions and answers describe non-obvious points that may be interesting for experienced programmers. 10 | 11 | The main sources of information - official documentation of Vue 3 and Vite, the book [Vue.js 3 Design Patterns and Best Practices](https://www.oreilly.com/library/view/vuejs-3-design/9781803238074/), [r/vuejs/](https://www.reddit.com/r/vuejs/), [@vuejs_ru](https://t.me/vuejs_ru). 12 | 13 | Relevance of the information - 2022-2023 years. 14 | 15 | --- 16 | 17 | ### About the author: 18 | 19 | Ruslan Makarov - independent consultant, full-stack engineer with 20+ years of experience in SD, AWS Certified Solutions Architect, Sun Certified Java Developer. 20 | - Email: [ruslan.makarov@gmail.com](mailto:ruslan.makarov@gmail.com) 21 | - Twitter: [@vuefaq](https://twitter.com/vuefaq) 22 | -------------------------------------------------------------------------------- /docs/en/release-timeline/assets/images/rt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/en/release-timeline/assets/images/rt.jpg -------------------------------------------------------------------------------- /docs/en/release-timeline/getting-data.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: release-timeline 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Release timeline - visual component displaying GitHub release timeline 7 | - - meta 8 | - name: og:image 9 | content: /images/vue-faq-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/vue-faq-logo.png 13 | --- 14 | 15 | # Getting release, commit and pull requests data 16 | 17 | ## Retrieving data 18 | 19 | There are three ways to get data from releases, pull request and commits from GitHub 20 | 21 | 1. Dynamic. Direct request to GitHub REST API during page opening. 22 | 2. Request to GitHub REST API through a proxy 23 | 3. Request to GitHub REST API during project build, optimise and save data locally on the site. 24 | 25 | Currently the first and second option are directly implemented, there is an option to specify `url` for release requests, pull requests and commits. 26 | 27 | The first option is used by default. 28 | 29 | The second option is needed to reduce the size of the downloaded file, as 95% of the data in GitHub responses is not used in the application. 30 | 31 | The data format should be the same as GitHub's, but may contain only the required fields. 32 | 33 | The third option can also optimise data flows, but it makes a snapshot of releases and a pull requests at a certain point in time. When a new release comes out, the documentation will need to be rebuilt. In this case you also need to provide the correct url. The logic of the third option (receiving, filtering, saving data) should be implemented by the package user. 34 | -------------------------------------------------------------------------------- /docs/en/release-timeline/getting-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: release-timeline 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Release timeline - visual component displaying GitHub release timeline 7 | - - meta 8 | - name: og:image 9 | content: /images/vue-faq-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/vue-faq-logo.png 13 | --- 14 | 15 | # Installation 16 | 17 | ## Installation of the npm package 18 | 19 | ::: code-group 20 | ```bash [pnpm] 21 | pnpm add release-timeline 22 | ``` 23 | ```bash [yarn] 24 | pnpm add release-timeline 25 | ``` 26 | ```bash [npm] 27 | npm install release-timeline 28 | ``` 29 | ::: 30 | 31 | ## Usage in Vue project code 32 | 33 | In a Vue component: 34 | 35 | ```vue 36 | 45 | 46 | 47 | ``` 48 | 49 | Import of the `animated-background.css` is optional. CSS with starred sky takes 70Kb, in gzip format - 6.1Kb. 50 | 51 | ## Use in VitePress 52 | 53 | [Instructions](./vitepress.md) 54 | 55 | ## Use as web component 56 | 57 | ```html 58 | 59 | 60 | 61 | 62 | 63 | ``` 64 | 65 | Read more about connecting as [web component usage](./web-component.md) 66 | -------------------------------------------------------------------------------- /docs/en/release-timeline/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: release-timeline 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Release timeline - visual component displaying GitHub release timeline 7 | - - meta 8 | - name: og:image 9 | content: /images/vue-faq-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/vue-faq-logo.png 13 | --- 14 | 15 | # Release Timeline 16 | 17 | ## Release timeline visualization 18 | 19 | Visualize releases of any GitHub repository on a timeline, with information about commits and pull requests. 20 | 21 | Embeds in VitePress, can be a good replacement for `changelog` in the project's technical documentation, automating description of changes and making tracking them convenient for users. 22 | 23 | It can also be plugged into any HTML page as a Web component or micro-frontend. 24 | 25 | ![image](/en/release-timeline/assets/images/rt.jpg) 26 | 27 | The library is written using Vue 3, has no dependencies, takes 15Kb unpacked. Adapted to work in VitePress (switching between light and dark themes). Can be plugged in as a `web component` in non-Vue projects. 28 | 29 | Data on releases of a particular repository is taken via GitHub REST API. 30 | 31 | Public repositories are available immediately, private repositories require GitHub API token. 32 | 33 | ## GitHub 34 | 35 | - [GitHub](https://github.com/vuesence/release-timeline) 36 | 37 | ## Demo 38 | 39 | - [Demo](https://vuesence.github.io/release-timeline/) (you can specify any repository via the selection in the upper left corner) 40 | 41 | ## Credits 42 | 43 | [Parallax Star background in CSS](https://codepen.io/sarazond/pen/LYGbwj) 44 | -------------------------------------------------------------------------------- /docs/en/release-timeline/microfrontend.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: release-timeline 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Release timeline - visual component displaying GitHub release timeline 7 | - - meta 8 | - name: og:image 9 | content: /images/vue-faq-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/vue-faq-logo.png 13 | --- 14 | 15 | # Micro-frontend 16 | 17 | ## Usage 18 | 19 | Using `esm.sh` you can connect `release-timeline` as an ES module 20 | 21 | In the HTML page: 22 | 23 | ```html 24 | 25 | 26 | 27 | 37 | 38 | 39 |
40 | 41 | ``` 42 | 43 | ## Demo 44 | 45 | You can see how `release-timeline` works as a micro-frontend here - esm-demo 46 | 47 | It is just an html page, you can check out its code 48 | -------------------------------------------------------------------------------- /docs/en/release-timeline/release-history.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: release-timeline 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Release timeline - visual component displaying GitHub release timeline 7 | - - meta 8 | - name: og:image 9 | content: /images/vue-faq-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/vue-faq-logo.png 13 | --- 14 | 15 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/en/release-timeline/vitepress.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: release-timeline 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Release timeline - visual component displaying GitHub release timeline 7 | - - meta 8 | - name: og:image 9 | content: /images/vue-faq-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/vue-faq-logo.png 13 | --- 14 | 15 | # VitePress 16 | 17 | `release-timeline` fully supports VitePress, including changing light and dark themes and adapting to its styles. 18 | 19 | ## Installation 20 | 21 | ::: code-group 22 | ```bash [pnpm] 23 | pnpm add release-timeline 24 | ``` 25 | ```bash [yarn] 26 | pnpm add release-timeline 27 | ``` 28 | ```bash [npm] 29 | npm install release-timeline 30 | ``` 31 | ::: 32 | 33 | ## Usage 34 | 35 | In any markdown file: 36 | 37 | ```vue 38 | 47 | 48 | 49 | ``` 50 | 51 | ## CSS variables 52 | 53 | The `release-timeline` CSS variables are connected to the VitePress CSS variables in `vitepress.css`. Here are its contents: 54 | 55 | ```css 56 | :root { 57 | --rt-c-text-1: var(--vp-c-text-1); 58 | --rt-c-text-2: var(--vp-c-text-2); 59 | --rt-c-text-3: var(--vp-c-text-3); 60 | --rt-c-border: var(--vp-c-border); 61 | --rt-c-bg: var(--vp-c-bg); 62 | --rt-c-bg-alt: var(--vp-c-bg-alt); 63 | --rt-c-brand-1: var(--vp-c-brand-1); 64 | --rt-c-brand-2: var(--vp-c-brand-2); 65 | --rt-c-circle-bg: #888; 66 | --rt-font-family-base: var(--vp-font-family-base); 67 | } 68 | ``` 69 | -------------------------------------------------------------------------------- /docs/en/release-timeline/vue-3.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: release-timeline 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Release timeline - visual component displaying GitHub release timeline 7 | - - meta 8 | - name: og:image 9 | content: /images/vue-faq-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/vue-faq-logo.png 13 | --- 14 | 15 | # Vue 3 project 16 | 17 | ## Installation 18 | 19 | ::: code-group 20 | ```bash [pnpm] 21 | pnpm add release-timeline 22 | ``` 23 | ```bash [yarn] 24 | pnpm add release-timeline 25 | ``` 26 | ```bash [npm] 27 | npm install release-timeline 28 | ``` 29 | ::: 30 | 31 | ## Use in Vue component 32 | 33 | ```vue 34 | 43 | 44 | 45 | ``` 46 | 47 | Import `animated-background.css` is optional. CSS with starred sky takes 70Kb, in gzip format - 6.1Kb. 48 | -------------------------------------------------------------------------------- /docs/en/vue-webapp/contribution.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Project participation 15 | 16 | [create-vue-webapp](https://github.com/vuesence/create-vue-webapp) and [vue-webapp](https://github.com/vuesence/vue-webapp) are open source projects under the MIT license. 17 | 18 | Contributions are welcome. -------------------------------------------------------------------------------- /docs/en/vue-webapp/guidelines.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: vue-webapp 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Guidelines 15 | 16 | - Lightweight, efficient web application with modern UI/UX 17 | - Vue 3, Composition API, script setup syntax 18 | - Do not use third party libraries unnecessarily. The only necessary dependency is `vue-router`. 19 | - Use clean and efficient HTML5 and CSS3 for layout 20 | - Include specific functionality only when needed 21 | - High degree of customization 22 | 23 | 24 | ------ 25 | 26 | - Plugging in specific functionality, such as `i18n`, means not just adding that library to `package.json`, but a full-fledged minimal working integration - creating a corresponding composable function, multiple locales, and applying `t()` in a template for illustration with necessary comments in the code to facilitate later use and customization. 27 | 28 | - Integrating certain functionality that uses a third-party library (e.g. toaster or modal window) should be done through a wrapper, so that it would be easy for the developer to change the specific package that implements the functionality if desired. 29 | 30 | - The scaffolded web application uses **TypeScript**, but it is possible to continue developing the application in pure JavaScript. 31 | 32 | - Vite is used as the builder. 33 | 34 | - SCSS is used as the CSS preprocessor. 35 | 36 | - Antony Fu's [eslint-config](https://github.com/antfu/eslint-config) is used for linting and formatting in ESlint. 37 | 38 | - The result should be a Vue 3 application without not-needed dependencies, unless the user explicitly includes them in the framework. -------------------------------------------------------------------------------- /docs/en/vue-webapp/objectives.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: vue-webapp 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Objectives 15 | 16 | 1. Create a scaffolder of simple out-of-the-box SPA applications for a specific task in a few minutes, with the possibility of further customization and filling it with content. 17 | 2. Fine-tune the application using effective functional code blocks. 18 | 3. Collect and generalize the best techniques and practices for creating a modern reactive Vue application. 19 | 4. Enable novice developers to familiarize themselves with the Vue.js ecosystem with ready-made examples, learn front-end and Vue 3 best practices, from building application architecture to naming CSS classes. 20 | 5. Enable experienced developers to quickly and efficiently scaffold a ready to use web application and leverage reusable code blocks (boilerplates), especially those that cannot be distributed as NPM packages. 21 | 22 | This application should act as a website wireframe builder, with the ability to choose when scaffolding: 23 | - A global business website template (portfolio, blog, online store, etc.) 24 | - Variations of the general layout of the web application 25 | - Specific component options (header, footer, navigation drawer, etc.) 26 | - General style/design options 27 | - Specific functionality injected as functional fragments (API module, i18n, PWA, splash screen, Auth module, themes, etc.) 28 | - GitHub actions options with the ability to build and deploy to popular hosting solutions 29 | - Ability to connect/integrate popular libraries (including UI) if needed 30 | - Possibility to integrate with certain headless CRM and API services 31 | 32 | Separately, it is planned to create a web showcase, where the user, dynamically changing the parameters, will be able to view and test the available site layouts, themes/styling, components (header, footer, etc.) and functionality of future application, as well as their combination with each other. -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/adaptability.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Adaptability 15 | 16 | Adaptability is implemented with [useScreenWidth](https://github.com/vuesence/vue-webapp/blob/main/src/composables/useScreenWidth.ts) composable function via four CSS classes (`mobile`, `tablet`, `notebook` and `desktop`) dynamically set on the `body` element. 17 | 18 | The configuration parameters (upper breakpoint for each mode) for `useScreenWidth` are set in `App.vue`: 19 | 20 | ```vue 21 | 31 | ``` 32 | 33 | That composable function can be used in JavaScript code: 34 | 35 | ```js 36 | // can be 'mobile', 'tablet' 'notebook' or 'desktop' 37 | const { screenWidthFactor } = new useScreenWidth(); 38 | ``` 39 | 40 | and CSS classes in SCSS: 41 | 42 | ```scss 43 | .container { 44 | display: flex; 45 | flex-direction: row; 46 | .mobile &, .tablet & { 47 | flex-direction: column; 48 | } 49 | .box { 50 | border: 1px solid gray; 51 | } 52 | } 53 | ``` 54 | 55 | ```html 56 |
57 |
58 |
59 |
60 |
61 | ``` -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/api.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | # API module 14 | 15 | ## API (REST) 16 | 17 | Creates a transport client agnostic service layer for REST calls to the backend over HTTP(S). 18 | 19 | The HTTP transport client can be `fetch`, `axios` or a promise version of `XHR`, at the developer's choice. API calls in the application code will look as follows: 20 | 21 | ```js 22 | import { api } from "@/services/api"; 23 | 24 | const apiData = ref(); 25 | apiData.value = await api.utils.testRest(); 26 | ``` 27 | 28 | Each call is an asynchronous function that returns `Promise`. 29 | 30 | ```js 31 | // utils.ts 32 | import http from "./http"; 33 | 34 | const utils = { 35 | async testRest() { 36 | return http.get("https://jsonplaceholder.typicode.com/todos/1"); 37 | } 38 | } 39 | ``` 40 | 41 | The system of interceptors (`interceptors`) is also implemented. 42 | 43 | The abstraction of backend API access allows to easily switch to another transport (JSON-RPC, WebSockets, gRPC, GraphQL) without changing the code in the business logic of the application. 44 | 45 | 46 | ## JSON-RPC 47 | 48 | Sets up a JSON-RPC adapter to communicate with the backend. Calls to the backend API in the application code remain the same, but JSON-RPC is used instead of REST requests 49 | 50 | ```js 51 | // utils.ts 52 | import { jsonRpc } from "./jsonrpc"; 53 | 54 | const utils = { 55 | async testJsonRpc() { 56 | return jsonRpc({ 57 | method: "getBestBlockHash", 58 | params: {}, 59 | }, { uri: "https://seed-1.testnet.networks.dash.org:1443/" }); 60 | }, 61 | } 62 | ``` 63 | 64 | JSON-RPC adapter implements [JSON-RPC 2.0 specification](https://www.jsonrpc.org/) 65 | 66 | ------ 67 | 68 | API module initialization: 69 | 70 | ```js 71 | import utils from "./utils"; 72 | import { notificationInterceptor } from "./interceptors"; 73 | import jsonrpc from "./jsonrpc"; 74 | import http from "./http"; 75 | 76 | const api = { 77 | utils, 78 | http, 79 | init() { 80 | http.setOptions({ 81 | baseUrl: import.meta.env.VITE_API_URL, 82 | headers: { "Content-Type": "application/json" } 83 | }); 84 | jsonrpc.addResponseInterceptor(notificationInterceptor); 85 | }, 86 | }; 87 | 88 | export { api } 89 | export default api; 90 | ``` 91 | 92 | ::: tip 93 | The JSON-RPC protocol is very convenient and is the de facto standard for web 3.0. Recommended for use instead of REST 94 | ::: -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/baseIcon.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # BaseIcon 15 | 16 | Consists of the [BaseIcon](https://github.com/vuesence/vue-webapp/blob/main/src/components/ui/BaseIcon.vue) component and the [utils.ts](https://github.com/vuesence/vue-webapp/blob/main/src/utils/icons.ts) utility. 17 | 18 | Allows to use an icon component in the application with dynamic name attribute: 19 | 20 | ```vue 21 | 27 | 28 | 33 | ``` 34 | 35 | `utils.ts` when initialized uses `import.meta.glob` to read all files with extensions `.svg` and `.png` from the `@/assets/images/` directory and uses their names as icon identifiers for `BaseIcon`. -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/description.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Implementation details 15 | 16 | ## Code injections in the index.html 17 | 18 | To avoid bloating `index.html` injections of code fragments into it (Open graph, Google analytics, Splash screen, Service worker etc.) are done via [vite-plugin-html-injection](https://github.com/altrusl/vite-plugin-html-injection/) Vite plugin. 19 | 20 | The code snippets themselves are located in the `./src/utils/injections/` directory. The plugin configuration file `injection-config.ts` is also located there. 21 | 22 | ## CSS tricks 23 | 24 | A hack is applied in the application on large screen resolutions to prevent screen jumping when the main scrollbar appears/disappears 25 | 26 | ```css 27 | html { 28 | overflow-x: hidden; 29 | margin-right: calc(-1 * (100vw - 100%)) 30 | } 31 | ``` -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/drawer.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Navigation drawers 15 | 16 | There are currently two types of navigation drawers to choose from. 17 | 18 | ## SimpleDrawer 19 | 20 | ![image](/images/vue-webapp/drawer-simple.png) 21 | 22 | It is always on for `notebook` and `desktop` screen resolutions, and can be opened for `mobile` and `tablet` by clicking/tapping on the "hamburger" icon. 23 | 24 | ## TouchSlideoutDrawer 25 | 26 | ![image](/images/vue-webapp/drawer-touch.gif) 27 | 28 | Similar to SimpleDrawer, but is controlled by touch on touch screens. Adds a nice UX. 29 | 30 | Functionality is implemented with [useTouchSwipe](https://github.com/vuesence/vue-webapp/blob/main/src/composables/useTouchSwipe.ts) composable function and [TouchSlideoutDrawer](https://github.com/vuesence/vue-webapp/blob/main/src/components/drawers/TouchSlideoutDrawer.vue) component. 31 | 32 | 37 | -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/footer.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | # Footers 14 | 15 | The following types of footers are currently available: 16 | 17 | ## SimpleFooter 18 | 19 | ![image](/images/vue-webapp/footer-simple.png) 20 | 21 | ## RichFooter 22 | 23 | ![image](/images/vue-webapp/footer-rich.png) 24 | 25 | ## MantineSimpleFooter 26 | 27 | ![image](/images/vue-webapp/footer-simple-mantine.png) 28 | 29 | ## MantineRichFooter 30 | 31 | ![image](/images/vue-webapp/footer-rich-mantine.png) 32 | 33 | ## DistributedFooter 34 | 35 | ![image](/images/vue-webapp/footer-distributed.png) 36 | 37 | 42 | -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/ga-gp.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # GitHub Actions script to deploy to GitHub Pages 15 | 16 | ## Deployment 17 | 18 | Uses [JamesIves/github-pages-deploy-action](https://github.com/JamesIves/github-pages-deploy-action) GitHub Action to deploy a site to the `gh-pages` branch of the same GitHub repository, which automatically makes the website available at `https://youGitHubUsername.github.io/my-vue-webapp` (if your project and repository has name `my-vue-webapp`). 19 | 20 | - Create a branch in the repository called `gh-pages` 21 | - Go to the "Settings" section of your repository 22 | - Under "Code and automation" in the sidebar, click Pages. 23 | - Under "Build and deployment" under the "Source", select "Deploy from a branch". 24 | - Under "Build and deployment" under the "Branch" heading, use the branch drop-down menu and select the branch you want - `gh-pages`. 25 | 26 | More details: 27 | 28 | - [GitHub Actions](https://github.com/features/actions) 29 | - [GitHub Pages](https://docs.github.com/ru/pages/quickstart) 30 | 31 | ## Setting `base` in Vite config 32 | 33 | If you don't have a custom domain, you need to put the name of your repository as `base` in `vite.config.ts` so that the site can be accessed from the above link: 34 | 35 | ```js 36 | export default defineConfig({ 37 | base:"/my-vue-webapp/" 38 | }); 39 | ``` 40 | 41 | If you have a custom domain (like `yourname.com`), this parameter is not needed. -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/google-analytics.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | # Google analytics 14 | 15 | Adds **Google Tag** initialization code for `index.html`. 16 | 17 | ```html 18 | 19 | 20 | 26 | ``` 27 | 28 | You should replace the `id` value with your own. -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/header.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Headers 15 | 16 | All headers are adaptive. 17 | 18 | ## SimpleHeader 19 | 20 | ![image](/images/vue-webapp/header-simple.png) 21 | 22 | Simple `sticky` header 23 | 24 | ## MantineSimpleHeader 25 | 26 | ![image](/images/vue-webapp/header-simple-mantine.png) 27 | 28 | Simple `sticky` header in Mantine UI style 29 | 30 | ## MantineLayeredHeader 31 | 32 | ![image](/images/vue-webapp/header-layered-mantine.png) 33 | 34 | Layered `sticky` header in Mantine UI style 35 | 36 | ## SlidingHeader 37 | 38 | ![image](/images/vue-webapp/header-sliding.gif) 39 | 40 | Can contain two different headers, the second one appears after the user scrolls down the page 41 | 42 | ```vue-html 43 | 44 | 47 | 48 | 51 | 52 | ``` 53 | 54 | 59 | -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Options when creating an application 15 | 16 | ## Available options 17 | 18 | The following options are currently available for configuration: 19 | 20 | - Layout - application layout 21 | - Header - top part in the application template 22 | - Footer - bottom part of the application template 23 | - Drawer - navigation bar 24 | - Navbar - navigation menu (inside the drawer). 25 | - Github Pages deploy Workflow - GitHub Actions script for build and deploy application to GitHub Pages 26 | - PWA - addition of Service worker and Manifest to the application 27 | - API module - abstraction layer for communication with backend API 28 | - JSON-RPC - adapter for API module 29 | - Splash screen - splash screen during application startup to improve UX 30 | - Google analytics - code for integration of Google analytics 31 | - Open graph - meta tags for building snippets by social networks 32 | 33 | ## Available by default 34 | 35 | - Dark theme. All plugins support theme switching 36 | - BaseIcon - icon component with the ability to dynamically specify a name 37 | - BaseToggle - toggle component 38 | 39 | ## In development 40 | 41 | - Global Preloader 42 | - i18n - internationalization of the application using different variants of `i18n` libraries. 43 | 44 | ## Planned 45 | 46 | - Online showcase for dynamic testing of different variants of application parts and functionality 47 | - Expanding the number of variants of layout, header, footer and other components 48 | - Auth - module framework for authentication on JWT tokens, including different variants of registration and login forms. 49 | - Auth integration with popular service providers (Firebase and others). 50 | - GitHub Actions for application deployment to various services (Vercel, Heroku, Firesbase) and other useful CI/CD scripts. 51 | - Check on startup for application new version and reload to avoid browser cache issues 52 | - Themes - application themes (include both different color palettes and the ability to change other CSS parameters for deep customization of the templates and components) 53 | -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/layout-main.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # MainLayout 15 | 16 | Standard layout with header, footer and sidebar in `notebook` and `desktop` modes. In `tablet` and `mobile` modes the sidebar is hidden and moves in from the left when user clicks on the "hamburger" icon. 17 | 18 | ![image](/images/vue-webapp/layout-main.png) 19 | 20 | ## Routing 21 | 22 | Changing the content of the main panel is provided via `vue-router` [routes](https://github.com/vuesence/vue-webapp/blob/main/src/router/routes.ts). 23 | -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/layout-one-column.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # OneColumnLayout 15 | 16 | Similar to `MainLayout`, but without the sidebar in `notebook` and `desktop` modes. Can be used, for example, if all navigation is located in the header. In `tablet` and `mobile` modes, the sidebar also pops out when the "hamburger" icon is clicked. 17 | 18 | ![image](/images/vue-webapp/layout-one-column.png) 19 | 20 | In all layout cases, the maximum width of the layout is set by the CSS variable `--vwa-layout-max-width`. 21 | -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/navbar.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Navbar 15 | 16 | The `Navbar` is located inside the `NavigationDrawer` 17 | 18 | At the moment it is possible to choose from two variants: 19 | 20 | ## SimpleNavbar 21 | 22 | ![image](/images/vue-webapp/navbar-simple.png) 23 | 24 | ## MantineSimpleNavbar 25 | 26 | ![image](/images/vue-webapp/navbar-simple-mantine.png) 27 | 28 | 33 | -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/open-graph.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Google analytics 15 | 16 | Adds **Open graph** meta tags for `index.html`. 17 | 18 | ```html 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | ``` 34 | 35 | You should set your meta tags values. -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/pwa.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # PWA 15 | 16 | Simple Manifest and Service worker are integrated into the application and work right away, without customization. 17 | 18 | ## Manifest.json 19 | 20 | Allows to install the application on user home screen and run it in native mode (without a browser window). 21 | 22 | `manifest.json` must be edited to match your application data. For more information about the manifest file, see [web.dev](https://web.dev/learn/pwa/web-app-manifest). 23 | 24 | ```json 25 | { 26 | "description": "Acme Corporation webapp", 27 | "dir": "auto", 28 | "display": "standalone", 29 | "name": "Acme Inc.", 30 | "orientation": "any", 31 | "scope": "/", 32 | "short_name": "Acme", 33 | "start_url": "/", 34 | "categories": [ 35 | "it", 36 | "development", 37 | "education" 38 | ], 39 | "icons": [...] 40 | ``` 41 | 42 | ## Service worker 43 | 44 | Allows to make client-side caching manageable and greatly improve UX. 45 | 46 | This implementation of `service-worker.js` does not use third-party libraries like `Workbox`. 47 | 48 | The `Cache first` strategy is used for caching. Three separate caches are created for different types of resources: `assets` (js and css), `images` and `fonts`. Versioning is supported for each. 49 | 50 | With the release of a new version of the application you can change the value of `VERSION` in [service-worker.js](https://github.com/vuesence/create-vue-webapp/blob/main/src/template/public/service-worker.js). This will clear all cache in the client browser. -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/splash-screen.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Splash screen 15 | 16 | A splash screen during application startup instead of a blank screen can enhance application user experience and strengthen brand recognition. 17 | 18 | ![image](/images/vue-webapp/splash-screen.gif) 19 | 20 | The splash screen code is located entirely in the `index.html`. It is controlled by the CSS class `splash` on the `body` tag. 21 | 22 | The splash screen is removed in `App.vue / onMounted()` after all the resources needed to ignite the application have been loaded. 23 | 24 | 29 | -------------------------------------------------------------------------------- /docs/en/vue-webapp/options/themes.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Themes 15 | 16 | The application implements light and dark themes. All components support switching themes. 17 | 18 | Themes are controlled via CSS variables, which are defined in the [vars.css](https://github.com/vuesence/vue-webapp/blob/main/src/assets/styles/vars.css) file. The theme selected by the user is stored in `localStorage`. The [ThemeToggle](https://github.com/vuesence/vue-webapp/blob/main/src/components/ui/ThemeToggle.vue) component is responsible for theme switching. 19 | 20 | It is possible to customize themes and create new ones by overriding CSS variables, which is recommended to do in the [custom.scss](https://github.com/vuesence/vue-webapp/blob/main/src/assets/styles/custom.scss) file: 21 | 22 | ```css 23 | :root { 24 | --vwa-font-family-base: 'Roboto', sans-serif; 25 | --vwa-layout-max-width: 1280px; 26 | 27 | --vwa-c-border: #c2c2c4; 28 | --vwa-c-divider: #e2e2e3; 29 | --vwa-c-gutter: #e2e2e3; 30 | 31 | --vwa-c-text-1: rgba(60, 60, 67); 32 | --vwa-c-text-2: rgba(60, 60, 67, 0.78); 33 | --vwa-c-text-3: rgba(60, 60, 67, 0.56); 34 | } 35 | .dark { 36 | --vwa-c-text-1: rgba(255, 255, 245, 0.86); 37 | --vwa-c-text-2: rgba(235, 235, 245, 0.6); 38 | --vwa-c-text-3: rgba(235, 235, 245, 0.38); 39 | } 40 | 41 | /* ... etc */ 42 | 43 | ``` -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | # https://vitepress.dev/reference/default-theme-home-page 3 | layout: home 4 | 5 | hero: 6 | name: "Vue FAQ" 7 | text: "Vue JavaScript framework FAQ" 8 | tagline: Most frequently asked questions about Vue.js 9 | actions: 10 | - theme: brand 11 | text: Get Started 12 | link: /en/misc/introduction 13 | - theme: alt 14 | text: Why Vue? 15 | link: /en/frontend/about-frameworks 16 | - theme: alt alt-border 17 | text: Версия на русском языке 18 | link: /ru/ 19 | image: 20 | src: /images/vue-faq-logo.webp 21 | alt: Vue FAQ 22 | 23 | features: 24 | - title: Frontend 25 | details: General issues of frontend development - architecture, design patterns, best practices are discussed 26 | - title: Vue 3 27 | details: Focuses on Vue 3, Composition API and the Vue ecosystem of recent years. 28 | - title: Nuxt-free 29 | details: Nuxt is a separate standalone framework that deserves its own FAQ 30 | --- 31 | 32 | 42 | 43 | 51 | -------------------------------------------------------------------------------- /docs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/favicon.ico -------------------------------------------------------------------------------- /docs/public/files/Flex-Layout-Cheat-Sheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/files/Flex-Layout-Cheat-Sheet.pdf -------------------------------------------------------------------------------- /docs/public/files/FlexBox-Cheat-Sheets-in-2021.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/files/FlexBox-Cheat-Sheets-in-2021.pdf -------------------------------------------------------------------------------- /docs/public/files/Grid-Cheat-Sheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/files/Grid-Cheat-Sheet.pdf -------------------------------------------------------------------------------- /docs/public/files/Grid-Layout-Cheat-Sheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/files/Grid-Layout-Cheat-Sheet.pdf -------------------------------------------------------------------------------- /docs/public/files/HTML5-Cheat-Sheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/files/HTML5-Cheat-Sheet.pdf -------------------------------------------------------------------------------- /docs/public/files/JavaScript-Cheat-Sheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/files/JavaScript-Cheat-Sheet.pdf -------------------------------------------------------------------------------- /docs/public/files/Markdown.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/files/Markdown.pdf -------------------------------------------------------------------------------- /docs/public/files/TypeScript Classes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/files/TypeScript Classes.pdf -------------------------------------------------------------------------------- /docs/public/files/TypeScript Control Flow Analysis.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/files/TypeScript Control Flow Analysis.pdf -------------------------------------------------------------------------------- /docs/public/files/TypeScript Interfaces.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/files/TypeScript Interfaces.pdf -------------------------------------------------------------------------------- /docs/public/files/TypeScript Types.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/files/TypeScript Types.pdf -------------------------------------------------------------------------------- /docs/public/files/Vue-3-Cheat-Sheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/files/Vue-3-Cheat-Sheet.pdf -------------------------------------------------------------------------------- /docs/public/files/Vue_js_3_Design_Patterns_and_Best_Practices.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/files/Vue_js_3_Design_Patterns_and_Best_Practices.pdf -------------------------------------------------------------------------------- /docs/public/images/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/android-chrome-512x512.png -------------------------------------------------------------------------------- /docs/public/images/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/public/images/arty-crafty-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/arty-crafty-logo.png -------------------------------------------------------------------------------- /docs/public/images/book-face.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/book-face.jpg -------------------------------------------------------------------------------- /docs/public/images/faq/atomic-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/faq/atomic-design.jpg -------------------------------------------------------------------------------- /docs/public/images/faq/chrome-formatter-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/faq/chrome-formatter-1.jpg -------------------------------------------------------------------------------- /docs/public/images/faq/chrome-formatter-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/faq/chrome-formatter-2.jpg -------------------------------------------------------------------------------- /docs/public/images/faq/fsd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/faq/fsd.jpg -------------------------------------------------------------------------------- /docs/public/images/faq/microfronends.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/faq/microfronends.jpg -------------------------------------------------------------------------------- /docs/public/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/favicon-32x32.png -------------------------------------------------------------------------------- /docs/public/images/vue-faq-logo-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-faq-logo-bg.png -------------------------------------------------------------------------------- /docs/public/images/vue-faq-logo-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-faq-logo-small.png -------------------------------------------------------------------------------- /docs/public/images/vue-faq-logo-small.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-faq-logo-small.webp -------------------------------------------------------------------------------- /docs/public/images/vue-faq-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-faq-logo.png -------------------------------------------------------------------------------- /docs/public/images/vue-faq-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-faq-logo.webp -------------------------------------------------------------------------------- /docs/public/images/vue-webapp-logo-big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp-logo-big.png -------------------------------------------------------------------------------- /docs/public/images/vue-webapp-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp-logo.png -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/drawer-simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/drawer-simple.png -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/drawer-touch.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/drawer-touch.gif -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/footer-distributed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/footer-distributed.png -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/footer-rich-mantine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/footer-rich-mantine.png -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/footer-rich.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/footer-rich.png -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/footer-simple-mantine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/footer-simple-mantine.png -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/footer-simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/footer-simple.png -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/header-layered-mantine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/header-layered-mantine.png -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/header-simple-mantine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/header-simple-mantine.png -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/header-simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/header-simple.png -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/header-sliding.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/header-sliding.gif -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/layout-main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/layout-main.png -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/layout-one-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/layout-one-column.png -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/navbar-simple-mantine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/navbar-simple-mantine.png -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/navbar-simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/navbar-simple.png -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/splash-screen.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/splash-screen.gif -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/use-case.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/use-case.png -------------------------------------------------------------------------------- /docs/public/images/vue-webapp/webapp-start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/public/images/vue-webapp/webapp-start.png -------------------------------------------------------------------------------- /docs/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: Googlebot 2 | Disallow: /nogooglebot/ 3 | 4 | User-agent: * 5 | Allow: / 6 | 7 | Sitemap: https://vue-faq.org/sitemap.xml -------------------------------------------------------------------------------- /docs/ru/arty-crafty/analysis/research.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: arty-crafty 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Arty-Crafty - проект онлайн магазина 7 | - - meta 8 | - name: og:image 9 | content: /images/arty-crafty-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/arty-crafty-logo.png 13 | --- 14 | 15 | # Анализ рынка 16 | 17 | ## Изучение конкурентов 18 | 19 | Исследуем вебсайты других магазинов и маркетплейсов, чтобы изучить, как они выглядят и функционируют. 20 | 21 | ## Сайты-аналоги 22 | 23 | Погуглим "best marketplace". Мне выпало в том числе: 24 | 25 | - [alibris.com](https://www.alibris.com/) 26 | - [etsy.com](https://www.etsy.com/) 27 | - [walmart.com](https://www.walmart.com/) 28 | 29 | Для начала отмечаем, что для фронтенда разница между маркетплейсом и магазином - минимальна. Как функционально, так и в дизайне страницы. В случае маркетплейса на странице товара есть маленькая ссылка на магазин, и есть фильтрация по магазинам, которую можно представлять, как отдельную категорию для каждого магазина. Правда отображение товаров в этой категории отличается от обычных категорий. 30 | 31 | Делаем мы на первом этапе витрину, но в уме держим маркетплейс. Мы не должны принимать таких решений, которые бы в будущем заставили сильно рефакторить код. Но, очевидно, что мы можем ориентироваться в дизайне на простые магазины. Расширить потом до маркетплейса будет несложно. 32 | 33 | Самый удобный магазин/маркетплейс, с моей точки зрения, [Ozon](https://ozon.ru), что подтверждается его успешностью. Его структуру мы и будем копировать. 34 | 35 | ::: tip Совет 36 | Изучать похожие сайты полезно не только для вдохновения по дизайну, но и, например, при выборе наименования того или иного компонента - посмотрите через DevTools какие названия классов используются на аналогичном `html` блоке у конкурентов. 37 | ::: 38 | -------------------------------------------------------------------------------- /docs/ru/arty-crafty/analysis/tech-stack.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: arty-crafty 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Arty-Crafty - проект онлайн магазина 7 | - - meta 8 | - name: og:image 9 | content: /images/arty-crafty-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/arty-crafty-logo.png 13 | --- 14 | 15 | # Технический стек проекта 16 | 17 | Фронтенд должен писаться на Vue 3, Vite. Из обязательных библиотек - `vue-router`. Действует правило: если можем обойтись без какой-то зависимости - обходимся без нее. Вместо Pinia используется Composition API напрямую. 18 | 19 | Используем `TypeScript`, но в меру. Типизируем только основные сущности и интерфейсы. `TypeScript` должен облегчать работу разработчика, а не превращать её в кошмар. 20 | 21 | CSS3 лучше любого CSS фреймворка/библиотеки, поэтому используем его (SCSS). 22 | 23 | `ESlint` конфигурация от [Antony Fu](https://github.com/antfu/eslint-config). 24 | 25 | Насчет использования библиотек UI компонент - в идеале постараемся иметь только свои компоненты, однако для быстрого прототипирования мы можем задействовать какую-то библиотеку, оборачивая ее компоненты в свои обертки для последующего безболезненного перехода на свой UI kit. То же относится к VueUse. 26 | 27 | Для адаптивности мы устанавливаем на тэг `body` четыре глобальных класса - `mobile`, `tablet`, `notebook` и `desktop`, в зависимости от разрешения экрана, и используем их в стилях в компонентах. Это намного удобней прямой работы с CSS media query. 28 | -------------------------------------------------------------------------------- /docs/ru/arty-crafty/analysis/ui-design.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: arty-crafty 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Arty-Crafty - проект онлайн магазина 7 | - - meta 8 | - name: og:image 9 | content: /images/arty-crafty-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/arty-crafty-logo.png 13 | --- 14 | 15 | # UI дизайн 16 | 17 | ## Дизайн сайта 18 | 19 | Дизайн в плане визуального оформления сайта - довольно непростая вещь. Вернее, хороший дизайн. Плюс в том, что его всегда можно сделать в самую последнюю очередь. 20 | 21 | Пока будем работать над функционалом сайта (в том числе, адаптивностью), а со стилизацией - как будет желание. 22 | 23 | ## Творческие способности 24 | 25 | Если вы не сильно творчески одаренный человек, то создать сайт полностью самому вряд ли получится. Это примерно то же, что и написать хорошую картину. 26 | 27 | Но в отличие от картины, дизайн сайта можно перенять. Как целиком, так и по частям - главный лэйаут, функционал, типы виджетов, их компоновка, цветовые гаммы, UI компоненты, шрифт, эффекты и многое другое. Может показаться воровством, но представим, что идете вы по улице, и видите дом. Красивый. Рассматриваете кровлю, структуру штукатурки, отделку фундамента. Потом приходите к себе, закупаете стройматериалы, заказываете строительную бригаду, и делаете себе примерно так же, но своё. Воровство? 28 | -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/baas-adapters.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/baas-adapters.webp -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/codeium-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/codeium-1.jpg -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/codeium-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/codeium-2.jpg -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/codeium-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/codeium-3.jpg -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/db-categories-data.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/db-categories-data.webp -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/db-category-products-data.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/db-category-products-data.webp -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/db-products-data.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/db-products-data.webp -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/db-schema-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/db-schema-1.webp -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/divide-et-impera.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/divide-et-impera.webp -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/header-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/header-1.gif -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/hoppscotch.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/hoppscotch.webp -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/mobile-menu.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/mobile-menu.webp -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/oc-product-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/oc-product-table.png -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/package-diagram.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/package-diagram.jpg -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/path-1000-li.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/path-1000-li.jpg -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/product-category.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/product-category.jpg -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/product-table-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/product-table-1.png -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/project-setup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/project-setup.png -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/supabase-api-keys.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/supabase-api-keys.jpg -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/supabase-policies.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/supabase-policies.jpg -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/three-tier-architecture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/three-tier-architecture.png -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/toys.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/toys.jpg -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/use-case-online-shopping-example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/use-case-online-shopping-example.jpg -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/use-case.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/use-case.png -------------------------------------------------------------------------------- /docs/ru/arty-crafty/assets/images/website-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/arty-crafty/assets/images/website-1.gif -------------------------------------------------------------------------------- /docs/ru/arty-crafty/backend/hoppscotch.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: arty-crafty 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Arty-Crafty - проект онлайн магазина 7 | - - meta 8 | - name: og:image 9 | content: /images/arty-crafty-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/arty-crafty-logo.png 13 | --- 14 | 15 | # Hoppscotch 16 | 17 | ## Работа с API 18 | 19 | Для работы и тестирования API обычно используется инструмент типа `Postman`, умеющий делать REST запросы и всё остальное, с ним связанное. Однако, как это часто бывает с монополистом, `Postman` сильно отяжелел за последние годы и работать с ним не очень комфортно. 20 | 21 | Одной из удобных альтернатив является `Hopscotch`, в девичестве - `Postwoman`. Он работает из браузера или как PWA приложение, имеет весь необходимый нам функционал и написан на Vue. 22 | 23 | ![image](/ru/arty-crafty/assets/images/hoppscotch.webp) 24 | 25 | ## Endpoints 26 | 27 | Нам нужны три эндпойнта на текущем этапе: 28 | 29 | - список всех категорий 30 | - список товаров в определенной категории 31 | - подробная информация о товаре 32 | 33 | Создадим соответствующие запросы в Hoppscotch: 34 | 35 | ```sh 36 | curl --request GET \ 37 | --url 'https://client_id.supabase.co/rest/v1/categories?select=*' \ 38 | --header 'Authorization: Bearer $apiKey$' \ 39 | --header 'apikey: $apiKey$' 40 | 41 | curl --request GET \ 42 | --url 'https://client_id.supabase.co/rest/v1/categories?select=id,title,product(id,title,desc)&id=eq.2' \ 43 | --header 'Authorization: Bearer $apiKey$' \ 44 | --header 'apikey: $apiKey$' 45 | 46 | curl --request GET \ 47 | --url 'https://client_id.supabase.co/rest/v1/products?select=id,title,desc,data&id=eq.2' \ 48 | --header 'Authorization: Bearer $apiKey$' \ 49 | --header 'apikey: $apiKey$' 50 | ``` 51 | 52 | Второй запрос - это `LEFT JOIN` на таблицах `categories` и `products`. К сожалению документация Supabase не очень детально описывает join-ы, пришлось поэкспериментировать. 53 | -------------------------------------------------------------------------------- /docs/ru/arty-crafty/backend/supabase-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: arty-crafty 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Arty-Crafty - проект онлайн магазина 7 | - - meta 8 | - name: og:image 9 | content: /images/arty-crafty-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/arty-crafty-logo.png 13 | --- 14 | 15 | # Supabase REST API 16 | 17 | ## Supabase SDK 18 | 19 | Supabase автоматически генерит эндпойнты для доступа к нашим таблицам. Обращаться к ним можно либо через Supabase SDK. 20 | 21 | #### Установка: 22 | ```sh 23 | pnpm add @supabase/supabase-js 24 | ``` 25 | 26 | #### Использование: 27 | ```js 28 | import { createClient } from "@supabase/supabase-js"; 29 | 30 | // Create a single supabase client for interacting with your database 31 | const supabase = createClient("https://client_id.supabase.co", "public-anon-key"); 32 | 33 | const { data: product, error } = await supabase 34 | .from("products") 35 | .select("*"); 36 | 37 | const { data, error } = await supabase 38 | .from("products") 39 | .insert([ 40 | { some_column: "someValue", other_column: "otherValue" }, 41 | ]) 42 | .select(); 43 | 44 | const { error } = await supabase 45 | .from("products") 46 | .delete() 47 | .eq("some_column", "someValue"); 48 | ``` 49 | 50 | ## Supabase REST API 51 | 52 | Либо напрямую через HTTP запросы: 53 | 54 | ```sh 55 | curl 'https://client_id.supabase.co/rest/v1/products?select=*' \ 56 | -H "apikey: SUPABASE_CLIENT_ANON_KEY" \ 57 | -H "Authorization: Bearer SUPABASE_CLIENT_ANON_KEY" 58 | 59 | curl -X POST 'https://client_id.supabase.co/rest/v1/products' \ 60 | -H "apikey: SUPABASE_CLIENT_ANON_KEY" \ 61 | -H "Authorization: Bearer SUPABASE_CLIENT_ANON_KEY" \ 62 | -H "Content-Type: application/json" \ 63 | -H "Prefer: return=minimal" \ 64 | -d '{ "some_column": "someValue", "other_column": "otherValue" }' 65 | 66 | curl -X DELETE 'https://client_id.supabase.co/rest/v1/products?some_column=eq.someValue' \ 67 | -H "apikey: SUPABASE_CLIENT_ANON_KEY" \ 68 | -H "Authorization: Bearer SUPABASE_CLIENT_ANON_KEY" 69 | ``` 70 | 71 | Мы будем использовать второй способ, - опять же, чтобы не внедрять необязательные зависимости. Плюс, дебажить явные HTTP запросы намного проще. 72 | 73 | Доступ через REST API использует библиотеку [PostgREST](https://postgrest.org), написанную на `Haskell`. На её сайте можно ознакомиться с богатым синтаксисом возможных запросов. 74 | 75 | Таким образом, на данный момент мы используем Postgres базу данных и PostgREST библиотеку/сервер. От самой Supabase пока что только удобная админка для управления БД. 76 | -------------------------------------------------------------------------------- /docs/ru/arty-crafty/backend/supabase.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: arty-crafty 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Arty-Crafty - проект онлайн магазина 7 | - - meta 8 | - name: og:image 9 | content: /images/arty-crafty-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/arty-crafty-logo.png 13 | --- 14 | 15 | # Supabase 16 | 17 | ## Создание проекта 18 | 19 | Зарегистрироваться и создать проект на Supabase достаточно несложно. После регистрации предоставляется два API ключа. Один - рутовский `secret`, и второй - `public`, для обычного доступа к REST API. В дальнейшем будем говорить только о ключе `public`. 20 | 21 | ![image](/ru/arty-crafty/assets/images/supabase-api-keys.jpg) 22 | 23 | ## Безопасность и доступ 24 | 25 | Доступ к таблицам в базе данных Supabase регулируется ключом и политиками (policies). При отсутствий политик, зная ключ через REST API можно выполнять основные CRUD SQL запросы. Соответственно, если мы делаем запрос, скажем, к таблице `product` с фронтенда, то ключ будет в бандле приложения, и вытащить его и запустить другие запросы не составит труда. 26 | 27 | Соответственно, необходимо разрешить использование ключа для REST запросов только на чтение (select). Делается это созданием соответствующей политики у таблицы. 28 | 29 | ![image](/ru/arty-crafty/assets/images/supabase-policies.jpg) 30 | 31 | Этого вполне достаточно для варианта "Витрина", в котором не нужно размещать заказы, создавать пользователей и прочее. В дальнейшем, при необходимости записи в базу данных, придется использовать свой слой бэкенда либо иное решение. 32 | 33 | Если использовать сервис аутентификации Supabase, то возможно создавать политики для зарегистрированных пользователей - то есть, например, позволить работать со своим профилем, личным кабинетом, заказами. Но для лучшей безопасности лучше все-таки, всё это пропускать через свой бэкенд. 34 | -------------------------------------------------------------------------------- /docs/ru/arty-crafty/introduction/goals.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: arty-crafty 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Arty-Crafty - проект онлайн магазина 7 | - - meta 8 | - name: og:image 9 | content: /images/arty-crafty-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/arty-crafty-logo.png 13 | --- 14 | 15 | # Цели и задачи проекта 16 | 17 | ## Цели данного проекта: 18 | 19 | 1. Постепенное построение продукта: начиная с витрины с простым статичным бэкендом в форме json файлов и заканчивая полноценным маркетплейсом со сторонним headless e-commerce решением. 20 | 2. При разработке должны использоваться последние проверенные достижения Vue.js экосистемы и лучшие практики в разработке программного обеспечения. 21 | 3. Проект должен быть примером грамотной реализации проекта по разработке ПО, начиная с архитектуры и заканчивая кодом. 22 | 4. Программная система должна быть удобна для использования, кастомизации и развертывания для человека, не знакомого с Vue, - то есть, представлять из себя продукт для конечного пользователя. 23 | 24 | ## Нефункциональные требования (software quality attributes) 25 | 26 | 1. Высокий UX 27 | 2. Производительность 28 | 3. Безопасность 29 | 4. Функциональность 30 | 5. Расширяемость 31 | 6. Понятный задокументированный чистый код, использование лучших практик 32 | 33 | ## Общие функциональные требования 34 | 35 | 1. PWA 36 | 2. Глубоко настраиваемые темы. Как общие, так и для каждого магазина маркетплейса. 37 | 3. i18n (интернационализация) 38 | 39 | ## Этапы развития приложения (приблизительно) 40 | 41 | 1. Витрина (показ каталога категорий и товаров из них) 42 | 2. Бэкенд и база данных 43 | 3. Поиск по товарам, маркетплейс (отдельные магазины) 44 | 4. UI/UX 45 | 5. Интеграция с E-commerce headless решением 46 | 6. Аутентификация и авторизация 47 | 7. Корзина для покупок, оформление заказов, личный кабинет покупателя 48 | 8. Добавление различного функционала: методы оплаты, доставки, рейтинги товаров, отзывы покупателей, customer service 49 | 9. SEO оптимизация 50 | 10. Административная панель для магазинов маркетплейса 51 | 52 | Разработка будет вестись постепенно, по этапам, описанным выше. После каждого этапа должно получаться рабочее (продуктовое) приложение. Разбиение большой задачи на небольшие подзадачи и всего процесса стадии сильно упрощает управление проектом и повышает вероятность итогового положительного исхода. 53 | -------------------------------------------------------------------------------- /docs/ru/arty-crafty/introduction/repository.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: arty-crafty 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Arty-Crafty - проект онлайн магазина 7 | - - meta 8 | - name: og:image 9 | content: /images/arty-crafty-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/arty-crafty-logo.png 13 | --- 14 | 15 | # Репозиторий и сайт проекта 16 | 17 | Репозиторий - [https://github.com/vuesence/arty-crafty](https://github.com/vuesence/arty-crafty) 18 | 19 | Сайт (текущая dev версия) - [https://vuesence.github.io/arty-crafty/](https://vuesence.github.io/arty-crafty/) 20 | -------------------------------------------------------------------------------- /docs/ru/arty-crafty/showcase-data/api-service-adapter.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: arty-crafty 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Arty-Crafty - проект онлайн магазина 7 | - - meta 8 | - name: og:image 9 | content: /images/arty-crafty-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/arty-crafty-logo.png 13 | --- 14 | 15 | # Работа с API на фронтенде 16 | 17 | ## Supabase адаптер 18 | 19 | Теперь нужно реализовать такие же как в Hoppscotch запросы в коде нашего фронтенда. Для товаров категории и подробная информации о товаре это можно сделать сразу, заменив всего одну строку: 20 | 21 | ###### api/products.ts 22 | 23 | ```js 24 | const products = { 25 | async categoryProducts(categoryId) { 26 | // return http.get(`/arty-crafty/api/category-products-${categoryId}.json`); 27 | const data = await http.get(`${SB}/categories?select=id,title,products(id,title,summary)&id=eq.${categoryId}`); 28 | return data[0].products; 29 | }, 30 | }; 31 | ``` 32 | 33 | В `ProductCard` проставляем корректные пути к свойствам товара (`product.summary.price`) и категория показывается. Ранее `product.desc` бы переименован в базе данных в `product.summary`. 34 | 35 | Теперь нужно загрузить в самом начале старта приложения все категории товаров, чтобы построить каталог. 36 | 37 | ```js 38 | async categories() { 39 | return http.get(`${SB}/categories?select=id,title,data`); 40 | }, 41 | ``` 42 | 43 | Ну и запрос информации о товаре: 44 | 45 | ```js 46 | async product(id: number) { 47 | const data = await http.get(`${SB}/products?select=id,title,summary,data&id=eq.${id}`); 48 | return data[0] ?? null; 49 | }, 50 | ``` 51 | 52 | Как видно, вынос транспортной логики в отдельный сервис сильно облегчает работу при замене бэкенда и делает код в основном приложении чище и понятней. 53 | -------------------------------------------------------------------------------- /docs/ru/arty-crafty/showcase-data/mobile-menu.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: arty-crafty 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Arty-Crafty - проект онлайн магазина 7 | - - meta 8 | - name: og:image 9 | content: /images/arty-crafty-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/arty-crafty-logo.png 13 | --- 14 | 15 | # Мобильное меню, CSS 16 | 17 | ## IconButton 18 | 19 | В мобильном виде обычно на подобных сайтах есть нижнее меню. Кнопки с иконками тут сильно похожи на те, что используются в главном хедере, значит пора выделить их в отдельный компонент `BaseIconButton`. При создании базовых UI компонент есть искушение сделать его как можно универсальней, со множеством опций, но лучше делать самое необходимое с возможностью расширения позже. В нашем случае добавим только badge. 20 | 21 | ![image](/ru/arty-crafty/assets/images/mobile-menu.webp) 22 | 23 | Заменяем в `AppHeader` кнопки на `BaseIconButton`. 24 | 25 | ## SCSS => CSS 26 | 27 | От SCSS мы используем только nesting (вкладывание селекторов друг в друга). Эта удобная фунциональность уже часть современного CSS, поддерживается последними версиями всех браузеров, но общая поддержка около 90%. Через полгода-год уже должна быть достаточная поддержка браузерами, чтобы мы использовали чистый CSS. 28 | 29 | Перейдем на него уже сейчас, и будем использовать `postcss-nesting` пакет для преобразования CSS с nesting в простой CSS. Это позволит в будущем просто убрать этот пакет из проекта, не меняя код. В противном случае при переходе надо будет немного править каждый блок SCSS в каждом SFC. 30 | 31 | Итак, убираем из зависимостей пакет `sass`, добавляем `postcss-nesting`, в каждом SFC файле убираем `lang="scss"`, и заменяем двуслешные `// ...` комментарии SCSS на `/* ... */` комментарии CSS. Всё работает. 32 | 33 | Есть небольшая терпимая проблема с подсветкой CSS с nesting в VS Code, но есть и "плюс" - теперь по селектору из блока стилей можно по SHIFT+F12 попасть в нужное место в шаблоне. С SCSS это было нельзя. 34 | 35 | ## Tag и CMV 36 | 37 | Загружаем в репозиторий и ставим тэг - [`v0.4`](https://github.com/vuesence/arty-crafty/tree/v0.4) 38 | 39 | [Coding music video](https://youtu.be/Z1o7BgNuHDg) 40 | -------------------------------------------------------------------------------- /docs/ru/arty-crafty/showcase-data/product-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: arty-crafty 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Arty-Crafty - проект онлайн магазина 7 | - - meta 8 | - name: og:image 9 | content: /images/arty-crafty-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/arty-crafty-logo.png 13 | --- 14 | 15 | # Слайдер, ProductView 16 | 17 | ## embla-carousel 18 | 19 | На главную страницу для красоты поставили `embla-carousel` - это легкий js слайдер, многие опции которого управляются через CSS стили, что может быть непривычно, но намного эффективней прослойки из пропсов и дополнительных Vue компонент. Пока заполнили его картинками товаров, после надо будет адаптировать под него карточки товаров. 20 | 21 | ## ProductView 22 | 23 | Пришло время страницы товара. Она состоит из галереи картинок/видео. 24 | -------------------------------------------------------------------------------- /docs/ru/arty-crafty/showcase-data/typescript.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: arty-crafty 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Arty-Crafty - проект онлайн магазина 7 | - - meta 8 | - name: og:image 9 | content: /images/arty-crafty-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/arty-crafty-logo.png 13 | --- 14 | 15 | # TypeScript 16 | 17 | ## index.d.ts 18 | 19 | Пришло время добавить типы. У нас уже есть две основных сущности - `Product` и `ProductCategory`. Их определяем в `index.d.ts` файле: 20 | 21 | ```ts 22 | interface Product { 23 | id: number 24 | title: string 25 | summary?: any 26 | data?: any 27 | } 28 | interface ProductCategory { 29 | id: number 30 | title: string 31 | data?: any 32 | } 33 | ``` 34 | 35 | Содержимое `summary` и `data` будет еще меняться, поэтому пока оставляем их `any`. 36 | 37 | ## Типизация 38 | 39 | Добавляем типы в API сервис и в бизнес-логику: 40 | 41 | ```ts 42 | const products = { 43 | async product(id: number): Promise { 44 | const data = await http.get(`${SB}/products?select=id,title,summary,data&id=eq.${id}`); 45 | return data[0] ?? null; 46 | } 47 | }; 48 | // ... 49 | 50 | const product = ref(); 51 | product.value = await api.products.product(props.productId); 52 | ``` 53 | -------------------------------------------------------------------------------- /docs/ru/arty-crafty/showcase/product-category.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: arty-crafty 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Arty-Crafty - проект онлайн магазина 7 | - - meta 8 | - name: og:image 9 | content: /images/arty-crafty-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/arty-crafty-logo.png 13 | --- 14 | 15 | # Категория товаров 16 | 17 | ## Layout 18 | 19 | Страница категории товаров выглядит как идущие рядами и колонками карточки товаров. Число колонок зависит от ширины экрана. В мобильном варианте - только одна колонка на ширину устройства. 20 | 21 | Сверху страницы название категории, возможно её описание и breadcrumbs (путь к категории в каталоге). 22 | 23 | Карточки разместить можно с помощью `flexbox` (flex-wrap) и `grid`. Мне привычнее первый, поэтому использую его. Для самой карточки товара создаем компонент `ProductCard`. 24 | 25 | ![image](/ru/arty-crafty/assets/images/product-category.jpg) 26 | 27 | ## Данные и API 28 | 29 | Если посмотреть другие магазины, то на карточках товара обычно одна или несколько картинок, название, краткое описание, стоимость, дополнительная информация (рейтинг, скидка, вес, материал и т.п.) 30 | 31 | Данные будем получать по сети. Лежать они будут в json файлах в директории `public/api`. Создадим несколько файлов вроде `category-products-3.json`. 32 | 33 | Как может быть устроена схема REST API на бэкенде для серьезных магазинов можно посмотреть на примере [Magento WebAPI](https://developer.adobe.com/commerce/webapi/rest/quick-reference/). 34 | -------------------------------------------------------------------------------- /docs/ru/arty-crafty/showcase/project-setup.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: arty-crafty 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Arty-Crafty - проект онлайн магазина 7 | - - meta 8 | - name: og:image 9 | content: /images/arty-crafty-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/arty-crafty-logo.png 13 | --- 14 | 15 | # Создание проекта 16 | 17 | ## Репозиторий на GitHub 18 | 19 | Создаем репозиторий на GitHub, клонируем локально 20 | 21 | ```sh 22 | $ git clone https://github.com/vuesence/arty-crafty.git 23 | ``` 24 | 25 | ## vue-webapp 26 | 27 | Используем, естественно, [vue-webapp](/ru/vue-webapp/) для создания скелета проекта со следующими опциями: 28 | 29 | ```sh 30 | $ cd arty-crafty 31 | $ pnpm create vue-webapp . 32 | 33 | √ Project name: ... arty-crafty 34 | √ Add a Splash screen? ... yes 35 | √ Make it PWA (adds service worker and manifest)? ... yes 36 | √ Add Open Graph meta tags? ... yes 37 | √ Add Google Analytics code? ... no 38 | √ Add Github Action Workflow for publishing it on GitHub Pages? ... yes 39 | √ Select application layout » MainLayout 40 | √ Select navigation drawer » TouchSlideoutDrawer 41 | √ Select webapp navbar » MantineSimpleNavbar 42 | √ Select webapp header » MantineSimpleHeader 43 | √ Select webapp footer » MantineSimpleFooter 44 | √ Add light version of i18n? ... yes 45 | √ Add API layer (REST)? ... yes 46 | √ Add JSON-RPC adapter? ... no 47 | √ Current directory is not empty. Please choose how to proceed: » Ignore files and continue 48 | 49 | Scaffolding project in \Vuesence\arty-crafty... 50 | ``` 51 | 52 | Запускаем: 53 | 54 | ```sh 55 | $ pnpm i 56 | $ pnpm dev 57 | ``` 58 | 59 | Работает: 60 | 61 | ![image](/ru/arty-crafty/assets/images/project-setup.png) 62 | 63 | Теперь ставим `base: "/arty-crafty/"` в `vite.config.ts`. Также надо поставить этот префикс перед путями в инъекциях `sw.js` и `splash-screen.html`, и в путях к иконкам в `manifest.json`. При хостинге со своим доменом нужно будет этот префикс убрать. 64 | 65 | Загружаем все на GitHub. 66 | 67 | Далее настраиваем GitHub Pages и получаем наш сайт по адресу: [https://vuesence.github.io/arty-crafty/](https://vuesence.github.io/arty-crafty/) 68 | 69 | Сайт задеплоится сам автоматически из-за того, что у нас есть соответствующий GitHub Actions Workflow файл в проекте. Ветка `gh-pages` тоже создастся автоматически. 70 | 71 | Теперь закомментируем подключение `service-worker.js` в файле `sw.js` - во время разработки кэширование сильно мешает. Включим его уже в продакшне. 72 | 73 | 78 | -------------------------------------------------------------------------------- /docs/ru/backend/protocols.md: -------------------------------------------------------------------------------- 1 | # Протоколы. To REST или не REST? 2 | 3 | ::: details REST, WebSockets, JSON-RPC 4 | 5 | Для новичка, конечно, удобнее начинать с `REST` - запросы на сервер абы как. 6 | 7 | Для более опытных, особенно, фулстеков, предлагаю взглянуть на `JSON-RPC` 8 | 9 | `WebSockets` удобен тем, что дает двунаправленную связь (сервер может посылать сообщения на клиент), но требует специального программного обеспечения на бэкенде. 10 | 11 | ::: 12 | 13 | ::: details Почему JSON-RPC? 14 | 15 | После опыта с JSON-RPC общение с бэком обычно уже никогда не бывает прежним. 16 | 17 | Он дает порядок, четкость, строгость и вместе с тем гибкость. Сильно упрощает и делает понятным код как на фронте, так и на бэке. 18 | 19 | Кроме того, JSON-RPC - де-факто стандарт для Web 3.0 коммуникаций. 20 | 21 | Вот две мои статьи на эту тему - [Популяризация JSON-RPC (часть 1)](https://habr.com/ru/articles/709362/) и [Популяризация JSON-RPC (часть 2)](https://habr.com/ru/articles/710652/) 22 | 23 | Вариант TypeScript реализации фронтэнд api сервиса на JSON-RPC - [здесь](https://github.com/vuesence/vue-webapp/blob/main/src/services/api/jsonrpc.ts) 24 | 25 | При использовании `JSON-RPC` переход на `WebSockets` или другие транспортные протоколы не вызовет никаких трудностей из-за унификации формата сообщений. 26 | 27 | ::: 28 | 29 | ::: details Как организовать реконнект WebSocket соединения на фронте? 30 | 31 | Нужна шина, или `Еvent bus`, которая будет работать как прокси для приходящих сообщений. 32 | 33 | Можно использовать [mitt](https://github.com/developit/mitt). 34 | 35 | ::: 36 | 37 | ::: details Что такое GraphQL? 38 | 39 | Сложная штука, попытка перевести язык запросов SQL для клиент-серверных запросов в интернете. 40 | 41 | Имеет довольно специфичное применение, преимущественно у сторонних поставщиков данных через API. 42 | 43 | Для своего фулстек приложения - на 99% ненужное решение. 44 | 45 | ::: 46 | -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_1.01_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_1.01_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_10.01_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_10.01_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_10.02_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_10.02_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.01_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.01_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.02_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.02_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.03_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.03_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.04_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.04_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.05_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.05_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.06_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.06_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.07_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.07_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.08_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.08_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.09_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.09_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.10_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.10_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.11_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.11_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.12_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.12_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.13_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.13_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.14_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.14_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.15_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.15_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.16_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.16_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.17_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.17_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.18_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.18_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.19_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.19_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.20_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.20_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.21_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.21_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.22_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.22_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.23_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.23_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.24_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.24_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.25_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.25_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.26_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.26_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.27_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.27_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.28_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.28_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.29_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.29_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_11.30_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_11.30_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_2.01_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_2.01_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_2.02_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_2.02_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_2.03_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_2.03_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_2.04_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_2.04_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_2.05_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_2.05_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_2.06_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_2.06_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_2.07_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_2.07_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_2.08_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_2.08_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_3.01_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_3.01_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_3.02_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_3.02_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_3.03_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_3.03_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_3.04_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_3.04_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_3.05_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_3.05_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_3.06_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_3.06_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_4.01_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_4.01_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_4.02_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_4.02_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_4.03_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_4.03_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_4.04_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_4.04_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_4.05_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_4.05_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_4.06_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_4.06_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_4.07_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_4.07_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_5.01_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_5.01_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_5.02_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_5.02_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_5.03_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_5.03_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_5.04_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_5.04_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_5.05_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_5.05_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_5.06_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_5.06_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_5.07_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_5.07_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_5.08_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_5.08_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_6.01_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_6.01_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_6.02_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_6.02_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_6.03_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_6.03_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_6.04_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_6.04_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_6.05_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_6.05_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_6.06_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_6.06_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_6.07_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_6.07_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_6.08_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_6.08_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_7.01_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_7.01_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_7.02_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_7.02_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_7.03_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_7.03_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_7.04_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_7.04_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_7.05_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_7.05_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_7.06_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_7.06_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_7.07_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_7.07_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_8.01_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_8.01_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_8.02_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_8.02_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_8.03_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_8.03_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_8.04_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_8.04_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_8.05_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_8.05_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_8.06_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_8.06_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_8.07_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_8.07_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_8.08_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_8.08_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_9.01_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_9.01_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_9.02_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_9.02_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_9.03_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_9.03_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_9.04_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_9.04_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_9.05_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_9.05_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_9.06_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_9.06_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_9.07_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_9.07_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_9.08_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_9.08_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_9.09_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_9.09_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_9.10_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_9.10_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/Figure_9.11_B18602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/Figure_9.11_B18602.jpg -------------------------------------------------------------------------------- /docs/ru/book/images/book-face.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/book/images/book-face.jpg -------------------------------------------------------------------------------- /docs/ru/deployment/ci-cd.md: -------------------------------------------------------------------------------- 1 | # CI/CD 2 | 3 | ::: details Что такое CI/CD? 4 | 5 | CI/CD (Continuous Integration, Continuous Delivery — непрерывная интеграция и доставка) — это технология автоматизации билда, тестирования и развертывания разрабатываемого проекта. 6 | 7 | Другими словами, процесс перехода лежащего в репозитории кода в рабочий продукт на облачном сервере, например. 8 | 9 | Элементы CI/CD полезны не только девопс инженеру, но и простому фронтендеру, позволяя ему после `git commit/push` изменений кода получить рабочий сайт, например, на GitHub Pages без дополнительных действий. 10 | 11 | Основные инструменты для CI/CD: GitHub Actions, GitLab CI/CD, Jenkins, Trevis 12 | 13 | ::: 14 | -------------------------------------------------------------------------------- /docs/ru/deployment/docker.md: -------------------------------------------------------------------------------- 1 | # Docker 2 | -------------------------------------------------------------------------------- /docs/ru/deployment/hosting.md: -------------------------------------------------------------------------------- 1 | # Хостинг 2 | 3 | ::: details Где разместить сайт? 4 | 5 | После билда фронтенд проекта вы получаете набор `html/css/js/jpeg` и других статичных файлов, которые надо разместить на вебсервере, чтобы к вашему сайту был доступ. 6 | 7 | Варианты размещения с бесплатными планами: 8 | 9 | - [GitHub Pages](https://pages.github.com/) 10 | - [Netlify](https://netlify.com) 11 | - [Render](https://render.com/) 12 | - [Firebase](https://firebase.google.com/) 13 | - [Vercel](https://vercel.com/) 14 | - [Heroku](https://Heroku.com/) 15 | - [Amazon S3](https://aws.amazon.com/s3/) 16 | 17 | Также многие облачные провайдеры (Amazon, Google, Oracle, Microsoft) предоставляют бесплатные тарифы с возможностью получить виртуальный сервер, на котором можно установить вебсервер (Nginx, Apache) и захостить свой сайт самостоятельно. В этом случае на нем же можно разместить и бэкенд. 18 | 19 | ::: 20 | 21 | ::: details Домен 22 | 23 | Купить домен сейчас очень просто и недорого (от 200 рублей в год), в связи с чем рекомендуется это сделать. GitHub Pages и другие хостеры позволяют подключить кастомный домен к вашему сайту. Поддомены удобны для организации окружения разработки (environments): 24 | 25 | - dev.website.com 26 | - dev-api.website.com 27 | - website.com 28 | - api.website.com 29 | - docs.website.com 30 | 31 | ::: 32 | 33 | ::: details SSL сертификаты 34 | 35 | Современные браузеры требуют, чтобы сайт был доступен по HTTPS протоколу. Для этого для вашего домена необходим SSL сертификат. Хостинг провайдеры типа Firebase или Github Pages обеспечат вам сертификат сами. Если вы хостите свой сайт самостоятельно на облачном сервере, то можно сгенерировать сертификат с помощью программы CertBot. 36 | 37 | ::: 38 | -------------------------------------------------------------------------------- /docs/ru/development/libraries.md: -------------------------------------------------------------------------------- 1 | # Подскажите удобную библиотеку 2 | 3 | 4 | 5 | ::: details Для работы с датами 6 | `moment` безвозвратно устарел. Есть day.js и day-fnc.js 7 | 8 | Однако в 95% случаев хватает возможностей стандартного JavaScript Intl пакета 9 | ::: 10 | 11 | ::: details Для UI компонентов 12 | 13 | Существует достаточно много CSS и UI библиотек 14 | 15 | Вот [в этой статье](https://habr.com/ru/articles/745012/) есть небольшой обзор их тяжеловесности 16 | 17 | Quasar и PrimeVue выглядят солидно. 18 | 19 | ::: 20 | -------------------------------------------------------------------------------- /docs/ru/development/testing.md: -------------------------------------------------------------------------------- 1 | # Тестирование 2 | 3 | ::: details Нужно ли тестирование на фронтенде? 4 | 5 | Тесты бывают нескольких типов, среди них - unit тесты и интеграционные (e2e) теcты 6 | 7 | Unit тестированием во Vue занимаются [Vitest](https://vitest.dev/), [Jest](https://jestjs.io/) 8 | 9 | С тестированием на фронте нужно быть аккуратней, так как написание и переписывание тестов зачастую может занять время, сопоставимое с самой разработкой. В то же время, полезность этих тестов будет под большим вопросом. Их целесообразность проявляется на больших проектах с большим количеством разработчиков. Там unit тесты также отнимают время, но снижают вероятность, что кто-то что-то испортит. В то же время на стартапе unit тесты далеко не самый нужный ингредиент для быстрого создания MVP. 10 | 11 | Фронтенд разработка в этом аспекте очень сильно отличается от бэкенд разработки, где unit тесты действительно полезны. 12 | 13 | Хорошая статья на эту тему - [Unit Test Fetish](https://250bpm.com/blog:40/) 14 | 15 | ::: 16 | 17 | ::: details Что такое e2e тесты? 18 | 19 | На фронте, особенно для веб приложения, которое уже в продакшне и должно время от времени обновляться, важны e2e тесты. 20 | 21 | e2e (end-to-end) тестирование — это процесс тестирования программного обеспечения, который имитирует реальные действия пользователей на уровне интерфейса. 22 | 23 | При этом будет запущен браузер (обычно, в headless режиме - без UI), и он по написанным скриптам будет проверять работу сайта - наличие элементов на странице, возможность логина и т.п. 24 | 25 | Основные средства для e2e тестирования - [Cypress](https://www.cypress.io/), [WebdriverIO](https://webdriver.io/) 26 | 27 | При CI/CD проекта прогон тестов - один из основных моментов наряду с линтингом и билдом. 28 | 29 | ::: 30 | -------------------------------------------------------------------------------- /docs/ru/development/web-components.md: -------------------------------------------------------------------------------- 1 | # Web components 2 | 3 | ## Custom elements 4 | 5 | Созданный вам Vue компонент можно оформить: 6 | 7 | - как отдельное приложение 8 | - как библиотеку для подключения во Vue проектах 9 | - как web component для подключения в любой JavaScript фронтенд приложении или просто веб-странице 10 | 11 | Зачем нужен третий вариант? Чтобы людям, не знакомым с Vue можно было легко подключать ваш компонент у себя примерно в такой форме: 12 | 13 | ```html 14 | 15 | ``` 16 | 17 | Web component Custom element может принимать строковый пропсы и испускать `CustomEvent` события. 18 | 19 | Web components v Custom elements это давно стандарт HTML5 и поддерживается всеми основными браузерами. 20 | -------------------------------------------------------------------------------- /docs/ru/frontend/css-ui-libs.md: -------------------------------------------------------------------------------- 1 | # CSS и UI библиотеки 2 | 3 | ::: details Что такое CSS и UI библиотеки? 4 | 5 | CSS и UI библиотеки либо предоставляют свои, либо помогают создавать кастомные UI компоненты типа Button или Select? что может значительно ускорить разработку. 6 | 7 | CSS библиотеки не содержат JavaScript кода и, соответственно, имеют ограничения для сложных компонент типа Select или Dropdown. 8 | 9 | Есть отдельный тип Headless-UI библиотек, которые предлагают компоненты без стилизованной визуализации - только логику компонента и Accessibility требования. Разработчику нужно самому добавить CSS стили. 10 | 11 | ::: 12 | 13 | ::: details Плюсы и минусы UI библиотек? 14 | 15 | Плюсы: укоряет разработку, если пользоваться ей на проекте максимально, вносит в приложение единый стиль 16 | 17 | Минусы: как и любая зависимость может устареть (трагедия Vuetify 2), добавляет веса в итоговый бандл. 18 | 19 | В [этой статье](https://habr.com/ru/articles/745012/) хорошо сравниваются 10 Vue 3 UI библиотек. 20 | 21 | ::: 22 | 23 | ::: details Как снизить зависимость от чужих библиотек? 24 | 25 | Оборачивайте компоненты UI библиотеки в свои. 26 | 27 | ```vue 28 | 29 | 32 | ``` 33 | 34 | и используйте в своем коде `BaseButton`. Таким образом в дальнейшем вам будет намного проще проапгрейдиться, заменить библиотеку или заменить данный компонент на самописный. И даже просто изменить у компонента стили. 35 | 36 | ::: 37 | 38 | ::: details Лэйаут и адаптивность страниц средствами CSS и UI библиотек 39 | 40 | Использование колоночной системы и иного функционала CSS и UI библиотек типа распространенного Tailwind удобно для небольших проектов и иногда ускоряет верстку, однако очень сильно ухудшает качество кода в целом, включая его поддерживаемость и расширяемость. Как будто мир вновь вернулся во времена IE6, когда все стили и JavaScript также располагались в аттрибутах тэгов, и вся эволюция CSS в понятную, удобную, красивую иерарxичную модель классов была зря, как и разделение веба на документ (шаблон), презентационный слой (CSS стили) и логику (JavaScript). 41 | 42 | В интернете полно статей, почему подход подобный Tailwind это плохо. Можно отметить только, что при должном умении верстать на чистом CSS3 также быстро и намного удобней и приятней в плане DX, чем через средства CSS и UI библиотек. 43 | 44 | ::: tip Цитата 45 | 46 | Хорошие разработчики знают причины, по которым стандарты, паттерны и хорошие практики стали таковыми. 47 | 48 | Плохие разработчики придерживаются любой новой тенденции, которая может сэкономить им немного времени на обучение. 49 | 50 | ::: 51 | -------------------------------------------------------------------------------- /docs/ru/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | # https://vitepress.dev/reference/default-theme-home-page 3 | layout: home 4 | 5 | hero: 6 | name: "Vue FAQ" 7 | text: "Vue JavaScript framework FAQ" 8 | tagline: Наиболее часто задаваемые вопросы по Vue.js 9 | actions: 10 | - theme: brand 11 | text: Начать 12 | link: /ru/misc/introduction 13 | # - theme: alt 14 | # text: Почему Vue? 15 | # link: /frontend/about-frameworks 16 | - theme: alt 17 | text: Учебник 18 | link: /ru/book/ 19 | - theme: alt alt-border 20 | text: vue-webapp билдер 21 | link: /ru/vue-webapp/ 22 | image: 23 | src: /images/vue-faq-logo.webp 24 | alt: Vue FAQ 25 | 26 | features: 27 | - title: Frontend 28 | details: Рассматриваются общие вопросы фронтенд разработки - архитектура, шаблоны, лучшие практики 29 | - title: Vue 3 30 | details: Основное внимание уделено Vue 3, Composition API и экосистеме Vue последних лет 31 | - title: vue-webapp 32 | details: Стартер кит Vue 3 проекта с различными предустановленными опциями 33 | - title: Vue.js 3 Design Patterns and Best Practices 34 | details: Перевод на русский язык прекрасного учебника по Vue 3 автора Pablo Garaguso 35 | - title: Nuxt-free 36 | details: Nuxt - отдельный самостоятельный фреймворк, заслуживающий свой собственный FAQ 37 | # - title: Feature C 38 | # details: Lorem ipsum dolor sit amet, consectetur adipiscing elit 39 | --- 40 | 41 | 49 | -------------------------------------------------------------------------------- /docs/ru/misc/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/ru/misc/cheat-sheets.md: -------------------------------------------------------------------------------- 1 | # Шпаргалки (Cheat Sheet) 2 | 3 | 4 | 5 | ### Vue 6 | 7 | - Vue 3 Cheat Sheet 8 | 9 | ### JavaScript 10 | 11 | - JavaScript Cheat Sheet 12 | 13 | ### HTML 14 | 15 | - HTML5 Cheat Sheet 16 | 17 | ### CSS 18 | 19 | - FlexBox Cheat Sheet 20 | - FlexBox Cheat Sheet 2 21 | - Grid Cheat Sheet 22 | - Grid Cheat Sheet 2 23 | 24 | ### Typescript 25 | 26 | - TypeScript Types 27 | - TypeScript Interfaces 28 | - TypeScript Control Flow Analysis 29 | - TypeScript Classes 30 | 31 | ### Markdown 32 | 33 | - Markdown 34 | -------------------------------------------------------------------------------- /docs/ru/misc/glossary.md: -------------------------------------------------------------------------------- 1 | # Глоссарий и сокращения 2 | 3 | - DX (developer experience) - опыт разработчика, удобство его работы над приложением. Сюда входит всё - качество кода, удобство работы с IDE, грамотная архитектура проекта, комментирование, качество документации, использование на проекте проверенных и лучших практик и т.п. 4 | - UX (user experience) - опыт пользователя. Общее его впечатление от удобства работы с сайтом/приложением. 5 | - UI (user interface) - дизайн вебсайта/приложения с точки зрения визуальной эстетики и стиля 6 | - SW (service worker) - сервис воркер (элемент PWA) 7 | - AT (access token) - токен при JWT аутентификации 8 | - RT (refresh token) - токен при JWT аутентификации 9 | -------------------------------------------------------------------------------- /docs/ru/misc/introduction.md: -------------------------------------------------------------------------------- 1 | # Предисловие 2 | 3 | Данный FAQ (Frequently Asked Questions - Часто задаваемые вопросы) создан по наиболее часто затрагиваемым темам в Reddit [r/vuejs/](https://www.reddit.com/r/vuejs/) и Телеграм чате [@vuejs_ru](https://t.me/vuejs_ru) 4 | 5 | Уровень вопросов и ответов охватывает как начинающих так и опытных фронтэнд разработчиков. 6 | 7 | В качестве ответов используется как общепризнанная, проверенная и объективная информация, так и субъективное мнение составителя. 8 | 9 | Повышение сложности не идет сверху вниз. И в первых вопросах-ответах описываются неочевидные моменты, могущие быть интересными для опытных программистов. 10 | 11 | Основные источники информации - официальная документация Vue 3 и Vite, книга [Vue.js 3 Design Patterns and Best Practices](https://www.oreilly.com/library/view/vuejs-3-design/9781803238074/), [r/vuejs/](https://www.reddit.com/r/vuejs/), [@vuejs_ru](https://t.me/vuejs_ru) 12 | 13 | Актуальность информации - 2022-2023 года. 14 | 15 | ### У нас есть Телеграм канал 16 | 17 | В нем публикуются анонсы о новых материалах на данном ресурсе и другая интересная относящаяся к Vue.js информация: https://t.me/vuefaq 18 | -------------------------------------------------------------------------------- /docs/ru/release-timeline/assets/images/rt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/docs/ru/release-timeline/assets/images/rt.jpg -------------------------------------------------------------------------------- /docs/ru/release-timeline/getting-data.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: release-timeline 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Release timeline - visual component displaying GitHub release timeline 7 | - - meta 8 | - name: og:image 9 | content: /images/vue-faq-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/vue-faq-logo.png 13 | --- 14 | 15 | # Данные релизов, коммитов и пул риквестов 16 | 17 | ## Получение данных 18 | 19 | Есть три варианта получения данных с releases, pull requests и commits с GitHub-а 20 | 21 | 1. Динамическое. Прямой запрос к GitHub REST API во время открытия страницы. 22 | 2. Запрос к GitHub REST API через прокси 23 | 3. Запрос к GitHub REST API во время билда проекта, оптимизация и сохранение данных локально на сайте. 24 | 25 | На данный момент непосредственно реализованы первый и второй вариант, есть возможность указать `url` для запросов releases, pull requests и commits. По умолчанию используется первый. 26 | 27 | Второй вариант нужен для уменьшения размера загружаемого файла., так как 95% данных в ответах GitHub - не используется в программе. 28 | 29 | Формат данных при этом должен быть как у GitHub, но может содержать только нужные поля. 30 | 31 | Третий вариант также может оптимизировать потоки данных, но делает снэпшот релизов и пул риквестов на определенный момент времени. При выходе нового релиза потребуется пересобрать документацию. В данном случае также нужно указать корректный url. Реализовывать логику третьего варианта (получение, фильтрация, сохранение даннах) необходимо пользователю пакета. 32 | -------------------------------------------------------------------------------- /docs/ru/release-timeline/getting-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: release-timeline 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Release timeline - visual component displaying GitHub release timeline 7 | - - meta 8 | - name: og:image 9 | content: /images/vue-faq-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/vue-faq-logo.png 13 | --- 14 | 15 | # Установка 16 | 17 | ## Установка пакета 18 | 19 | ::: code-group 20 | ```bash [pnpm] 21 | pnpm add release-timeline 22 | ``` 23 | ```bash [yarn] 24 | pnpm add release-timeline 25 | ``` 26 | ```bash [npm] 27 | npm install release-timeline 28 | ``` 29 | ::: 30 | 31 | ## Использование в коде Vue проекта 32 | 33 | Во Vue компоненте: 34 | 35 | ```vue 36 | 45 | 46 | 47 | ``` 48 | 49 | Подключение `animated-background.css` опционально. CSS со звездным небом занимает 70Kb, в gzip формате - 6.1Кб. 50 | 51 | ## Использование в VitePress 52 | 53 | [Инструкция](./vitepress.md) 54 | 55 | ## Использование как web component 56 | 57 | ```html 58 | 59 | 60 | 61 | 62 | 63 | ``` 64 | 65 | Подробнее - о подключении как [web component](./web-component.md) 66 | -------------------------------------------------------------------------------- /docs/ru/release-timeline/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: release-timeline 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Release timeline - visual component displaying GitHub release timeline 7 | - - meta 8 | - name: og:image 9 | content: /images/vue-faq-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/vue-faq-logo.png 13 | --- 14 | 15 | # Release Timeline 16 | 17 | ## Визуализация релизов 18 | 19 | Визуализация релизов любого GitHub репозитория по временной шкале, с информацией о коммитах и пул риквестах. 20 | 21 | Встраивается в VitePress, может быть хорошей заменой `changelog`-а в технической документации проекта, автоматизируя фиксацию изменений и делая слежение за ними удобным для пользователей. 22 | 23 | Также может быть подключено в любой HTML странице как Web component или микрофронтенд. 24 | 25 | ![image](/ru/release-timeline/assets/images/rt.jpg) 26 | 27 | Библиотека написана с использованием Vue 3, не имеет зависимостей, занимает 15Кб в распакованном виде. Адаптирована для работы в VitePress (переключение светлой и темной тем). Может подключаться как `web component` в не Vue проектах. 28 | 29 | Данные по релизам определенного репозитория берутся через GitHub REST API. 30 | 31 | Public репозитории доступны сразу, для private репозиториев требуется использовать GitHub API токен. 32 | 33 | ## Репозиторий 34 | 35 | - [GitHub](https://github.com/vuesence/release-timeline) 36 | 37 | ## Demo 38 | 39 | - [Demo](https://vuesence.github.io/release-timeline/) (можно задать любой репозиторий через выбор в верхнем левом углу) 40 | 41 | ## Credits 42 | 43 | [Parallax Star background in CSS](https://codepen.io/sarazond/pen/LYGbwj) 44 | -------------------------------------------------------------------------------- /docs/ru/release-timeline/microfrontend.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: release-timeline 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Release timeline - visual component displaying GitHub release timeline 7 | - - meta 8 | - name: og:image 9 | content: /images/vue-faq-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/vue-faq-logo.png 13 | --- 14 | 15 | # Микрофронтенд 16 | 17 | ## Подключение 18 | 19 | С помощью `esm.sh` можно подключить `release-timeline` как ES module 20 | 21 | В HTML странице: 22 | 23 | ```html 24 | 25 | 26 | 27 | 37 | 38 | 39 |
40 | 41 | ``` 42 | ## Demo 43 | 44 | Посмотреть работу `release-timeline` как веб компонент можно тут - esm-demo 45 | Это просто html страница, можно посмотреть её код 46 | -------------------------------------------------------------------------------- /docs/ru/release-timeline/release-history.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: release-timeline 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Release timeline - visual component displaying GitHub release timeline 7 | - - meta 8 | - name: og:image 9 | content: /images/vue-faq-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/vue-faq-logo.png 13 | --- 14 | 15 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/ru/release-timeline/vitepress.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: release-timeline 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Release timeline - visual component displaying GitHub release timeline 7 | - - meta 8 | - name: og:image 9 | content: /images/vue-faq-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/vue-faq-logo.png 13 | --- 14 | 15 | # VitePress 16 | 17 | `release-timeline` полностью поддерживает VitePress, включая смену светлой и темной тем и адаптацию к его стилям. 18 | 19 | ## Установка пакета 20 | 21 | ::: code-group 22 | ```bash [pnpm] 23 | pnpm add release-timeline 24 | ``` 25 | ```bash [yarn] 26 | pnpm add release-timeline 27 | ``` 28 | ```bash [npm] 29 | npm install release-timeline 30 | ``` 31 | ::: 32 | 33 | ## Подключение 34 | 35 | Подключение в любом markdown файле: 36 | 37 | ```vue 38 | 47 | 48 | 49 | ``` 50 | 51 | ## CSS переменные 52 | 53 | CSS переменные `release-timeline` подключаются к CSS переменным VitePress в `vitepress.css`. Вот его содержимое: 54 | 55 | ```css 56 | :root { 57 | --rt-c-text-1: var(--vp-c-text-1); 58 | --rt-c-text-2: var(--vp-c-text-2); 59 | --rt-c-text-3: var(--vp-c-text-3); 60 | --rt-c-border: var(--vp-c-border); 61 | --rt-c-bg: var(--vp-c-bg); 62 | --rt-c-bg-alt: var(--vp-c-bg-alt); 63 | --rt-c-brand-1: var(--vp-c-brand-1); 64 | --rt-c-brand-2: var(--vp-c-brand-2); 65 | --rt-c-circle-bg: #888; 66 | --rt-font-family-base: var(--vp-font-family-base); 67 | } 68 | ``` 69 | -------------------------------------------------------------------------------- /docs/ru/release-timeline/vue-3.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageClass: release-timeline 3 | head: 4 | - - meta 5 | - name: og:site_name 6 | content: Release timeline - visual component displaying GitHub release timeline 7 | - - meta 8 | - name: og:image 9 | content: /images/vue-faq-logo.png 10 | - - meta 11 | - name: twitter:image 12 | content: /images/vue-faq-logo.png 13 | --- 14 | 15 | # Vue 3 проект 16 | 17 | ## Установка пакета 18 | 19 | ::: code-group 20 | ```bash [pnpm] 21 | pnpm add release-timeline 22 | ``` 23 | ```bash [yarn] 24 | pnpm add release-timeline 25 | ``` 26 | ```bash [npm] 27 | npm install release-timeline 28 | ``` 29 | ::: 30 | 31 | ## Использование во Vue компоненте 32 | 33 | ```vue 34 | 43 | 44 | 45 | ``` 46 | 47 | Подключение `animated-background.css` опционально. CSS со звездным небом занимает 70Kb, в gzip формате - 6.1Кб. 48 | -------------------------------------------------------------------------------- /docs/ru/vue-webapp/contribution.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Участие в проекте 15 | 16 | [create-vue-webapp](https://github.com/vuesence/create-vue-webapp) и [vue-webapp](https://github.com/vuesence/vue-webapp) являются open source проектами под лицензией MIT. 17 | 18 | Приглашаем к участию всех желающих. -------------------------------------------------------------------------------- /docs/ru/vue-webapp/guidelines.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Принципы 15 | 16 | - Лёгкое эффективное вебприложение с высоким современным UI/UX 17 | - Vue 3, Composition API, script setup синтаксис 18 | - Не использовать сторонние библиотеки без необходимости. Единственная обязательная зависимость - `vue-router` 19 | - Использование чистого и эффективного HTML5 и CSS3 для верстки 20 | - Подключение требуемого функционала только по необходимости 21 | - Высокая кастомизация 22 | 23 | ------ 24 | 25 | - Подключение определенной функциональности, например i18n, означает не просто добавление этой библиотеки в `package.json`, а полноценную минимальную работающую интеграцию - создание соответствующей composable функции, нескольких локалей, и применение t() в шаблоне для иллюстрации с необходимыми комментариями в коде для облегчения последующего использования и кастомизации. 26 | 27 | - Подключение определенной функциональности, использующей стороннюю библиотеку (например, тостер или модальное окно), делается через обёртку, чтобы потом разработчику при желании было легко поменять конкретный пакет, реализующий данный функционал. 28 | 29 | - Для веб приложения используется **TypeScript**, однако продолжать писать приложение можно на чистом JavaScript. 30 | 31 | - В качестве сборщика используется Vite. 32 | 33 | - В качестве CSS препроцессора используется SCSS. 34 | 35 | - Для линтинга и форматирования в ESlint используется [eslint-config](https://github.com/antfu/eslint-config) Antony Fu. 36 | 37 | - На "выходе" получается готовое Vue 3 приложение без зависимостей от каких-либо фреймворков/библиотек/пакетов, если только пользователь явно не включил их в каркас. -------------------------------------------------------------------------------- /docs/ru/vue-webapp/objectives.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Цели 15 | 16 | 1. Создание конструктора каркаса простого сразу работающего SPA приложения под конкретную задачу за пару минут, с возможностью его дальнейшей стилизации и наполнения контентом. 17 | 2. Тонкая кастомизация его с помощью небольших функциональных блоков кода. 18 | 3. Сбор и обобщение лучших техник и практик при создании современного реактивного фронтенда. 19 | 4. Дать возможность начинающим разработчикам на готовых примерах ознакомиться с экосистемой Vue.js, изучить лучшие практики фронтенда и Vue 3 от построения архитектуры приложения до наименования CSS классов. 20 | 5. Дать возможность опытным разработчикам быстро и эффективно создавать каркас готового веб приложения и использовать переиспользуемые блоки кода (boilerplate), особенно такие, которые не могут быть распространяемы как NPM пакеты. 21 | 22 | Данное приложение должно выполнять роль конструктора каркаса вебсайта, с возможностью выбора при создании: 23 | - Глобального бизнес-шаблона сайта (портфолио, блог, онлайн-магазин и.т.д) 24 | - Варианта общего лэйаута вебприложения 25 | - Вариантов конкретных компонент (header, footer, navigation drawer и т.д.) 26 | - Варианта общего стиля/дизайна 27 | - Отдельного функционала, инжектируемого как функциональные фрагменты (API модуль, i18n, PWA, splash screen, Auth модуль, themes и т.д. ) 28 | - Вариантов GitHub Actions с возможностью билда и деплоя на популярные хостинги 29 | - Возможности подключения/интеграции при желании распространенных библиотек (в том числе UI) 30 | - Возможности интеграции c определенными headless CRM и API сервисами 31 | 32 | Отдельно планируется создание веб-витрины, на которой пользователь, динамично меняя параметры, сможет посмотреть и протестировать доступные макеты сайта, темы/стилизации, компоненты (header, footer и т.д.) и функционал развертываемого приложения, а также их комбинацию друг с другом. -------------------------------------------------------------------------------- /docs/ru/vue-webapp/options/adaptability.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Адаптивность 15 | 16 | Адаптивность реализована с помощью [useScreenWidth](https://github.com/vuesence/vue-webapp/blob/main/src/composables/useScreenWidth.ts) composable функции через четыре класса (`mobile`, `tablet`, `notebook` и `desktop`), динамично устанавливающихся на тэг `body`. 17 | 18 | Конфигурационные параметры (верхний брейкпойнт для каждого режима) для `useScreenWidth` устанавливаются в `App.vue`: 19 | 20 | ```vue 21 | 31 | ``` 32 | 33 | В дальнейшем адаптивность можно использовать как в JavaScript коде: 34 | 35 | ```js 36 | // can be 'mobile', 'tablet' 'notebook' or 'desktop' 37 | const { screenWidthFactor } = new useScreenWidth(); 38 | ``` 39 | 40 | так и в SCSS: 41 | 42 | ```scss 43 | .container { 44 | display: flex; 45 | flex-direction: row; 46 | .mobile &, .tablet & { 47 | flex-direction: column; 48 | } 49 | .box { 50 | border: 1px solid gray; 51 | } 52 | } 53 | ``` 54 | 55 | ```html 56 |
57 |
58 |
59 |
60 |
61 | ``` -------------------------------------------------------------------------------- /docs/ru/vue-webapp/options/baseIcon.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # BaseIcon 15 | 16 | Состоит из компонента [BaseIcon](https://github.com/vuesence/vue-webapp/blob/main/src/components/ui/BaseIcon.vue) и утилиты [utils.ts](https://github.com/vuesence/vue-webapp/blob/main/src/utils/icons.ts). 17 | 18 | Позволяет использовать в приложении иконки с динамичным обращением к ним по имени: 19 | 20 | ```vue 21 | 27 | 28 | 33 | ``` 34 | 35 | `utils.ts` при инициализации с помощью `import.meta.glob` считывает из директории `@/assets/images/` все файлы с расширениями `.svg` и `.png` и использует их имена как идентификаторы иконок для `BaseIcon`. -------------------------------------------------------------------------------- /docs/ru/vue-webapp/options/description.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Детали реализации 15 | 16 | ## Инъекции кода в index.html 17 | 18 | Чтобы не раздувать `index.html` инъекции фрагментов кода в него (Open graph, Google analytics, Splash screen, Service worker) делаются через [vite-plugin-html-injection](https://github.com/altrusl/vite-plugin-html-injection/) Vite плагин. 19 | 20 | Сами фрагменты кода расположены в `./src/utils/injections/` директории. Там же находится конфигурационный файл плагина `injection-config.ts`. 21 | 22 | ## CSS tricks 23 | 24 | В приложении на больших разрешениях применен хак для недопущения прыгания экрана при появлении/исчезновении главного скролбара 25 | 26 | ```css 27 | html { 28 | overflow-x: hidden; 29 | margin-right: calc(-1 * (100vw - 100%)); 30 | } 31 | ``` -------------------------------------------------------------------------------- /docs/ru/vue-webapp/options/drawer.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Navigation drawers 15 | 16 | На данный момент можно выбрать из двух видов навигационных шторок. 17 | 18 | ## SimpleDrawer 19 | 20 | ![image](/images/vue-webapp/drawer-simple.png) 21 | 22 | Всегда открыт для разрешений экрана `notebook` и `desktop`, а для мобильных устройств и планшетов открывается по клику/нажатию на иконку "гамбургера". 23 | 24 | ## TouchSlideoutDrawer 25 | 26 | ![image](/images/vue-webapp/drawer-touch.gif) 27 | 28 | Аналогичен SimpleDrawer, но управляется с помощью прикосновений на сенсорных экранах. Добавляет приятный UX. 29 | 30 | Функциональность реализована с помощью [useTouchSwipe](https://github.com/vuesence/vue-webapp/blob/main/src/composables/useTouchSwipe.ts) composable функции и [TouchSlideoutDrawer](https://github.com/vuesence/vue-webapp/blob/main/src/components/drawers/TouchSlideoutDrawer.vue) компонента. 31 | 32 | 37 | -------------------------------------------------------------------------------- /docs/ru/vue-webapp/options/footer.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Footers 15 | 16 | На данный момент можно доступны следующие типы футеров: 17 | 18 | ## SimpleFooter 19 | 20 | ![image](/images/vue-webapp/footer-simple.png) 21 | 22 | ## RichFooter 23 | 24 | ![image](/images/vue-webapp/footer-rich.png) 25 | 26 | ## MantineSimpleFooter 27 | 28 | ![image](/images/vue-webapp/footer-simple-mantine.png) 29 | 30 | ## MantineRichFooter 31 | 32 | ![image](/images/vue-webapp/footer-rich-mantine.png) 33 | 34 | ## DistributedFooter 35 | 36 | ![image](/images/vue-webapp/footer-distributed.png) 37 | 38 | 43 | -------------------------------------------------------------------------------- /docs/ru/vue-webapp/options/ga-gp.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Github Actions сценарий для развертывания на Github Pages 15 | 16 | ## Deployment 17 | 18 | Использует [JamesIves/github-pages-deploy-action](https://github.com/JamesIves/github-pages-deploy-action) Github Action для размещения сайта на ветке `gh-pages` того же репозитория, что автоматически делает сайт доступный по адресу `https://youGitHubUsername.github.io/my-vue-webapp` (если ваш проект и репозиторий называется `my-vue-webapp`). 19 | 20 | - Создайте в репозитории ветку с названием `gh-pages` 21 | - Перейдите в раздел "Settings" вашего репозитория 22 | - В разделе "Code and automation" на боковой панели нажмите Pages. 23 | - В разделе "Build and deployment" в пункте "Source" выберите "Deploy from a branch". 24 | - В разделе "Build and deployment" под заголовком "Branch" воспользуйтесь раскрывающимся меню ветки и выберите нужную ветку - `gh-pages`. 25 | 26 | Более подробно: 27 | 28 | - [GitHub Actions](https://github.com/features/actions) 29 | - [GitHub Pages](https://docs.github.com/ru/pages/quickstart) 30 | 31 | ## Настройка `base` в Vite конфиге 32 | 33 | Если у вас не кастомный домен, то в `vite.config.ts` необходимо прописать название вашего репозитория в качестве `base`, чтобы сайт был доступен по вышеуказанной ссылке: 34 | 35 | ```js 36 | export default defineConfig({ 37 | base: "/my-vue-webapp/", 38 | }); 39 | ``` 40 | 41 | Если у вас кастомный домен (типа `yourname.com`), то этот параметр не нужен. -------------------------------------------------------------------------------- /docs/ru/vue-webapp/options/google-analytics.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Google analytics 15 | 16 | Добавляет код инициализации **Google Tag** для `index.html`. 17 | 18 | ```html 19 | 20 | 21 | 27 | ``` 28 | 29 | Необходимо заменить значение `id` на ваше. -------------------------------------------------------------------------------- /docs/ru/vue-webapp/options/header.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Headers 15 | 16 | Все хедеры адаптивны. 17 | 18 | ## SimpleHeader 19 | 20 | ![image](/images/vue-webapp/header-simple.png) 21 | 22 | Простой `sticky` header 23 | 24 | ## MantineSimpleHeader 25 | 26 | ![image](/images/vue-webapp/header-simple-mantine.png) 27 | 28 | Простой `sticky` header в стиле Mantine UI 29 | 30 | ## MantineLayeredHeader 31 | 32 | ![image](/images/vue-webapp/header-layered-mantine.png) 33 | 34 | `sticky` header с уровнями в стиле Mantine UI 35 | 36 | ## SlidingHeader 37 | 38 | ![image](/images/vue-webapp/header-sliding.gif) 39 | 40 | Может содержать два разных header-а, второй появляется после того, как пользователь проскроллит страницу вниз 41 | 42 | ```vue-html 43 | 44 | 47 | 48 | 51 | 52 | ``` 53 | 54 | 59 | -------------------------------------------------------------------------------- /docs/ru/vue-webapp/options/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Опции при создании приложения 15 | 16 | ## Доступные опции 17 | 18 | На данный момент доступно конфигурирование следующих опций: 19 | 20 | - Layout - макет приложения 21 | - Header - верхняя часть в макете приложения 22 | - Footer - нижняя часть в макете приложения 23 | - Drawer - навигационная шторка 24 | - Navbar - навигационное меню (внутри шторки) 25 | - Github Pages deploy Workflow - GitHub Actions сценарий для билда и деплоя приложения на GitHub Pages 26 | - PWA - добавление Service worker и Манифеста к приложению 27 | - API модуль - абстрактный слой для связи с бэкенд API 28 | - JSON-RPC - адаптер для API модуля 29 | - Splash screen - экран-заставка во время старта приложения для улучшения UX 30 | - Google analytics - код для подключения статистики 31 | - Open graph - мета тэги для построения сниппетов соцсетями 32 | 33 | ## Доступно по умолчанию 34 | 35 | - Dark theme - темная тема. Все подключаемые компоненты поддерживают переключение тем 36 | - BaseIcon - компонент иконки с возможностью динамичного указания имени 37 | - BaseToggle - компонент переключателя 38 | 39 | ## В разработке 40 | 41 | - Глобальный прелоадер 42 | - i18n - интернационализация приложения с помощью различных вариантов `i18n` библиотек. 43 | 44 | ## В планах 45 | 46 | - Онлайн витрина для динамичного тестирования различных вариантов частей приложения и функционала 47 | - Расширение числа вариантов layout, header, footer и других компонент 48 | - Auth - каркас модуля для аутентификации на JWT токенах, включая различные варианты форм регистрации и логина 49 | - Интеграция Auth с популярными сервис провайдерами (Firebase и др.) 50 | - GitHub Actions для деплоя приложения на различные сервисы (Vercel, Heroku, Firesbase) и другие полезные CI/CD сценарии. 51 | - Проверка при старте на свою новую версию и перезагрузка для избежания проблем с кэшем браузера 52 | - Themes - темы приложения (включают в себя как разные цветовые палитры, так и возможность менять другие CSS параметры для глубокой кастомизации шаблона и компонентов) 53 | -------------------------------------------------------------------------------- /docs/ru/vue-webapp/options/layout-main.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # MainLayout 15 | 16 | Стандартный макет с хедером, футером и сайдбаром в `notebook` и `desktop` режимах. В `tablet` и `mobile` режимах сайдбар выезжает слева при нажатии на "гамбургер" иконку. 17 | 18 | ![image](/images/vue-webapp/layout-main.png) 19 | 20 | `AppSidebar` виден в режимах `notebook` и `desktop`, и скрывается в `tablet` и `mobile` 21 | 22 | ## Routing 23 | 24 | Смена содержимого центральной панели обеспечивается через [маршруты](https://github.com/vuesence/vue-webapp/blob/main/src/router/routes.ts) `vue-router` 25 | -------------------------------------------------------------------------------- /docs/ru/vue-webapp/options/layout-one-column.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # OneColumnLayout 15 | 16 | Аналогичен `MainLayout`, но без сайдбара в `notebook` и `desktop` режимах. Может применяться, например, если вся навигация помещается в хедер. В `tablet` и `mobile` режимах сайдбар также выезжает при нажатии на "гамбургер" иконку. 17 | 18 | ![image](/images/vue-webapp/layout-one-column.png) 19 | 20 | В обоих случаях максимальная ширина лэйаута устанавливается CSS переменной `--vwa-layout-max-width`. 21 | -------------------------------------------------------------------------------- /docs/ru/vue-webapp/options/navbar.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Navbar 15 | 16 | `Navbar` находится внутри `NavigationDrawer` 17 | 18 | На данный момент можно выбрать из двух видов: 19 | 20 | ## SimpleNavbar 21 | 22 | ![image](/images/vue-webapp/navbar-simple.png) 23 | 24 | ## MantineSimpleNavbar 25 | 26 | ![image](/images/vue-webapp/navbar-simple-mantine.png) 27 | 28 | 33 | -------------------------------------------------------------------------------- /docs/ru/vue-webapp/options/open-graph.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Google analytics 15 | 16 | Добавляет мета тэги **Open graph** для `index.html`. 17 | 18 | ```html 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | ``` 35 | 36 | Необходимо проставить нужные значения. -------------------------------------------------------------------------------- /docs/ru/vue-webapp/options/pwa.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # PWA 15 | 16 | В приложение интегрируются простые Manifest и Service worker и работают сразу без настройки. 17 | 18 | ## manifest.json 19 | 20 | Позволяет устанавливать приложение на домашний экран и запускать его в режиме, похожем на нативный (без окна браузера). 21 | 22 | `manifest.json` должен быть отредактирован в соответствии с данными вашего приложения. Подробней о файле манифеста - [web.dev](https://web.dev/learn/pwa/web-app-manifest). 23 | 24 | ```json 25 | { 26 | "description": "Acme Corporation webapp", 27 | "dir": "auto", 28 | "display": "standalone", 29 | "name": "Acme Inc.", 30 | "orientation": "any", 31 | "scope": "/", 32 | "short_name": "Acme", 33 | "start_url": "/", 34 | "categories": [ 35 | "it", 36 | "development", 37 | "education" 38 | ], 39 | "icons": [...] 40 | ``` 41 | 42 | ## Service worker 43 | 44 | Позволяет сделать управляемым кэширование на стороне клиента и сильно улучшить пользовательский опыт. 45 | 46 | Для данной реализации `service-worker.js` не используются сторонние библиотеки типа `Workbox`. 47 | 48 | Для кэширования используется стратегия `Cache first`. Создаётся три отдельных кэша для разных типов ресурсов: `assets` (js и css), `images` и `fonts`. Для каждого поддерживается версионность. 49 | 50 | При выпуске новой версии приложения можно изменять значение `VERSION` в [service-worker.js](https://github.com/vuesence/create-vue-webapp/blob/main/src/template/public/service-worker.js). Это очистит весь кэш в браузере клиента. -------------------------------------------------------------------------------- /docs/ru/vue-webapp/options/splash-screen.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Splash screen 15 | 16 | Заставка при старте приложения вместо пустого экрана может повысить восприятие вашего приложения пользователями (UX) и укрепить узнаваемость вашего бренда. 17 | 18 | ![image](/images/vue-webapp/splash-screen.gif) 19 | 20 | Код заставки находится полностью в `index.html`. Контролируется CSS классом `splash` на `body`. 21 | 22 | Убирается заставка в `App.vue / onMounted()` после загрузки всей необходимых для начала работы приложения ресурсов. 23 | 24 | 29 | -------------------------------------------------------------------------------- /docs/ru/vue-webapp/options/themes.md: -------------------------------------------------------------------------------- 1 | --- 2 | head: 3 | - - meta 4 | - name: og:site_name 5 | content: Vue webapp builder 6 | - - meta 7 | - name: og:image 8 | content: /images/vue-webapp-logo.png 9 | - - meta 10 | - name: twitter:image 11 | content: /images/vue-webapp-logo.png 12 | --- 13 | 14 | # Темы 15 | 16 | В приложении реализовано переключение светлой и тёмной тем. Все компоненты поддерживают переключение тем. 17 | 18 | Темы управляются через CSS переменные, которые определены в файле [vars.css](https://github.com/vuesence/vue-webapp/blob/main/src/assets/styles/vars.css). Выбранная пользователем тема запоминается в localStorage. За переключение тем отвечает компонент [ThemeToggle](https://github.com/vuesence/vue-webapp/blob/main/src/components/ui/ThemeToggle.vue) 19 | 20 | Возможна кастомизация темы и создание новых через переопределение CSS переменных, что рекомендуется делать в файле [custom.scss](https://github.com/vuesence/vue-webapp/blob/main/src/assets/styles/custom.scss): 21 | 22 | ```css 23 | :root { 24 | --vwa-font-family-base: 'Roboto', sans-serif; 25 | --vwa-layout-max-width: 1280px; 26 | 27 | --vwa-c-border: #c2c2c4; 28 | --vwa-c-divider: #e2e2e3; 29 | --vwa-c-gutter: #e2e2e3; 30 | 31 | --vwa-c-text-1: rgba(60, 60, 67); 32 | --vwa-c-text-2: rgba(60, 60, 67, 0.78); 33 | --vwa-c-text-3: rgba(60, 60, 67, 0.56); 34 | } 35 | .dark { 36 | --vwa-c-text-1: rgba(255, 255, 245, 0.86); 37 | --vwa-c-text-2: rgba(235, 235, 245, 0.6); 38 | --vwa-c-text-3: rgba(235, 235, 245, 0.38); 39 | } 40 | 41 | /* ... etc */ 42 | 43 | ``` -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import antfu from "@antfu/eslint-config"; 2 | 3 | export default antfu({ 4 | ignores: [".vscode/settings.json", ".vscode/settings.json/**", "src/assets/locales/*.json", "src/assets/locales/*.json/**"], 5 | rules: { 6 | "ts/semi": "off", 7 | "curly": ["error", "all"], 8 | "no-console": "off", 9 | "no-alert": "off", 10 | "vue/html-self-closing": "off", 11 | "style/semi": ["error", "always"], 12 | "style/indent": 2, // 4, or 'tab' 13 | "style/quotes": [ 14 | "error", 15 | "double", 16 | ], 17 | "style/brace-style": ["error", "1tbs", { allowSingleLine: true }], 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-faq", 3 | "type": "module", 4 | "version": "1.2.0", 5 | "private": true, 6 | "scripts": { 7 | "dev": "vitepress dev docs", 8 | "build": "vitepress build docs", 9 | "preview": "vitepress preview docs" 10 | }, 11 | "dependencies": { 12 | "release-timeline": "^0.6.0", 13 | "vue": "^3.5.13", 14 | "vue3-toastify": "^0.1.14" 15 | }, 16 | "devDependencies": { 17 | "@sxzz/eslint-config": "^4.6.0", 18 | "@vitejs/plugin-vue": "^5.2.4", 19 | "eslint": "^9.26.0", 20 | "typescript": "^5.8.3", 21 | "vite": "^6.3.5", 22 | "vitepress": "^1.6.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/arty-crafty-logo.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/src/arty-crafty-logo.xcf -------------------------------------------------------------------------------- /src/mermaid-diagrams.txt: -------------------------------------------------------------------------------- 1 | ```mermaid 2 | flowchart TD 3 | subgraph Frontend 4 | id1(Application code) --> id2(API layer) 5 | id2(API layer) --> Adapter:Supabase 6 | id2(API layer) --> Adapter:Firebase 7 | id2(API layer) --> Adapter:CloudServer 8 | end 9 | subgraph BaaS 10 | Adapter:Supabase --> id3(Supabase API) --> id10[("Supabase 11 | SQL DB")] 12 | Adapter:Firebase --> id4(Firebase API) --> id11[("Firebase 13 | NoSQL DB")] 14 | end 15 | subgraph "Proprietary backend" 16 | 17 | Adapter:CloudServer --> id5(Backend API) --> id12[(In-house DB)] 18 | end 19 | ``` -------------------------------------------------------------------------------- /src/qa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/src/qa.png -------------------------------------------------------------------------------- /src/vue-transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/src/vue-transparent.png -------------------------------------------------------------------------------- /src/vue-transparent.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuesence/vue-faq/e7a40522797eb2b3914ba4bf2c2119b27f02ddbd/src/vue-transparent.psd -------------------------------------------------------------------------------- /translate-book.js: -------------------------------------------------------------------------------- 1 | import fs from "fs"; 2 | 3 | const fileNames = []; 4 | const text = []; 5 | 6 | // const dir = "misc/"; 7 | const inputDir = "./src/html/1/"; 8 | const outputDir = "./src/html/2/"; 9 | // const dir = "development/"; 10 | // const dir = "deployment/"; 11 | // const dir = "backend/"; 12 | 13 | processDir(); 14 | 15 | function processDir(dir) { 16 | // fs.readdirSync("./src/html/en/").forEach((file) => { 17 | fs.readdirSync(inputDir).forEach((file) => { 18 | // if (file.endsWith(".html")) { 19 | if (file.endsWith(".html")) { 20 | // console.log(file); 21 | fileNames.push(file); 22 | const data = fs.readFileSync(inputDir + file, "utf8"); 23 | // const data = fs.readFileSync("./src/html/en/" + file, "utf8"); 24 | // console.log(data); 25 | text.push(data); 26 | } 27 | }); 28 | console.log(fileNames); 29 | // console.log(text); 30 | 31 | // fileNames.forEach((fn) => fs.copyFileSync(dir + fn, dir + fn + ".txt")); 32 | 33 | // process.exit(); 34 | const raw = JSON.stringify({ 35 | // text: ["Привет"], 36 | text, 37 | source_lang: "EN", 38 | target_lang: "RU", 39 | }); 40 | 41 | const myHeaders = new Headers(); 42 | myHeaders.append("Authorization", "DeepL-Auth-Key 11b71328-09dd-14fb-073c-d0f468e550b21:fx"); 43 | myHeaders.append("Content-Type", "application/json"); 44 | 45 | const requestOptions = { 46 | method: "POST", 47 | headers: myHeaders, 48 | body: raw, 49 | redirect: "follow", 50 | }; 51 | 52 | fetch("https://api-free.deepl.com/v2/translate", requestOptions) 53 | .then((response) => response.json()) 54 | .then((result) => { 55 | for (let i = 0; i < result.translations.length; i++) { 56 | const data = result.translations[i].text; 57 | fs.writeFileSync(outputDir + fileNames[i], data); 58 | // fs.writeFileSync("./src/html/html-ru/" + fileNames[i], data); 59 | } 60 | // console.log(result); 61 | }) 62 | .catch((error) => console.log("error", error)); 63 | } 64 | -------------------------------------------------------------------------------- /translate.cmd: -------------------------------------------------------------------------------- 1 | node translate-book.js -------------------------------------------------------------------------------- /translate.js: -------------------------------------------------------------------------------- 1 | import fs from "fs"; 2 | 3 | const fileNames = []; 4 | const text = []; 5 | 6 | // const dir = "misc/"; 7 | const dir = "frontend/"; 8 | // const dir = "development/"; 9 | // const dir = "deployment/"; 10 | // const dir = "backend/"; 11 | 12 | processDir(dir); 13 | 14 | function processDir(dir) { 15 | fs.readdirSync("./docs/" + dir).forEach((file) => { 16 | if (file.endsWith(".md")) { 17 | // console.log(file); 18 | fileNames.push(file); 19 | const data = fs.readFileSync("./docs/" + dir + file, "utf8"); 20 | // console.log(data); 21 | text.push(data); 22 | } 23 | }); 24 | console.log(fileNames); 25 | // console.log(text); 26 | 27 | // fileNames.forEach((fn) => fs.copyFileSync(dir + fn, dir + fn + ".txt")); 28 | 29 | // process.exit(); 30 | const raw = JSON.stringify({ 31 | // text: ["Привет"], 32 | text, 33 | source_lang: "RU", 34 | target_lang: "EN", 35 | }); 36 | 37 | const myHeaders = new Headers(); 38 | myHeaders.append("Authorization", "DeepL-Auth-Key 11b71328-09dd-14fb-073c-d0f468e550b2:fx"); 39 | myHeaders.append("Content-Type", "application/json"); 40 | 41 | const requestOptions = { 42 | method: "POST", 43 | headers: myHeaders, 44 | body: raw, 45 | redirect: "follow", 46 | }; 47 | 48 | fetch("https://api-free.deepl.com/v2/translate", requestOptions) 49 | .then((response) => response.json()) 50 | .then((result) => { 51 | for (let i = 0; i < result.translations.length; i++) { 52 | const data = result.translations[i].text; 53 | fs.writeFileSync("./docs/en/" + dir + fileNames[i], data); 54 | } 55 | // console.log(result); 56 | }) 57 | .catch((error) => console.log("error", error)); 58 | } 59 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "preserve", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import vue from "@vitejs/plugin-vue"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | }); 8 | --------------------------------------------------------------------------------