Vue3 | Einstieg

by Ralph VUE, Web Framework

Inhaltsverzeichnis

Allgemeines

Installation

Installation mit der vue-cli

yarn global add @vue/cli
# OR
npm install -g @vue/cli

Neues Projekt erstellen

vue create my-project
# OR
vue ui

Installation mit Vite

Vite

Vite ist ein Build-Tool für die Webentwicklung, das aufgrund seines nativen ES-Modul-Importansatzes eine blitzschnelle Bereitstellung von Code ermöglicht.

Installation mit npm:

npm init @vitejs/app <project-name>
cd <project-name>
npm install
npm run dev

Oder mit Yarn

$ yarn create @vitejs/app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

Wenn der Projektname Leerzeichen ehthält, kann es zu Fehlern kommen. Dann hilft das nachfolgende Kommando

$ create-vite-app <project-name>

Vue Frameworks

Description:

GroupLink TextURLDescriptionDetailsAdvantages
UI FrameworkVuetifyhttps://next.vuetifyjs.com/Material design component framework for Vue 3.Rich in features and components.Highly customizable, extensive components, material design.
UI FrameworkQuasarhttps://quasar.dev/Build responsive websites, mobile, and desktop apps using a single codebase with Vue 3.All-in-one framework for web, mobile, and desktop apps.Cross-platform, fast development, rich ecosystem.
UI FrameworkElement Plushttps://element-plus.org/Enterprise-ready UI component library for Vue 3.Popular in the Chinese market, enterprise-friendly.Well-documented, easy to use, comprehensive components.
UI FrameworkNaive UIhttps://www.naiveui.com/Minimalistic and customizable component library for Vue 3.Lightweight and easy to integrate.Customizable, lightweight, modern.
UI FrameworkPrimeVuehttps://primefaces.org/primevue/Rich set of customizable UI components for Vue 3.Comes with many pre-built themes and components.Wide variety of components, responsive, many themes.
UI FrameworkAnt Design Vuehttps://2x.antdv.com/Vue 3 implementation of the Ant Design UI library.Well-suited for professional and enterprise-grade apps.Clean, professional design, extensive components.
UI FrameworkBootstrapVue 3https://bootstrap-vue.org/Bootstrap-based Vue 3 components.Based on Bootstrap for familiarity.Bootstrap ecosystem, responsive, familiar grid system.Lacks some modern UI components compared to newer libraries.
RoutingVue Routerhttps://router.vuejs.org/Official Vue 3 router for single-page applications.Powerful and flexible routing.Seamless integration with Vue 3, dynamic routing, nested routes.Requires setup for advanced features (SSR, lazy loading).
State ManagementPiniahttps://pinia.vuejs.org/Lightweight, intuitive state management library for Vue 3.Vuex alternative with Composition API support.Simple API, modular, Composition API support, easy to learn.Limited ecosystem compared to Vuex.
State ManagementVuexhttps://vuex.vuejs.org/Official state management library for Vue.js, compatible with Vue 3.Centralized state management for Vue apps.Well-supported, battle-tested, great for large apps.Can be complex for small applications, more boilerplate.
Build ToolVitehttps://vitejs.dev/Fast build tool with native support for Vue 3.Modern alternative to Webpack, optimized for Vue 3.Super fast builds, modern JavaScript support, HMR.Still evolving, lacks plugins compared to Webpack.
Build ToolVue CLIhttps://cli.vuejs.org/CLI to scaffold and manage Vue.js applications, supports Vue 3.Long-standing, mature build tool.Easy to use, integrates well with Vue ecosystem, powerful plugins.Slower build times compared to Vite.
Dev ToolsVue Devtoolshttps://devtools.vuejs.org/Browser extension for debugging Vue.js applications.Essential for Vue development.Powerful debugging, time-travel debugging, component inspection.Can slow down large apps in development mode.
Meta FrameworkNuxt 3https://v3.nuxtjs.org/Vue 3 meta-framework for SSR and static site generation.Built on Vue 3, optimized for server-side rendering.SSR, static site generation, auto-routing, great SEO support.More complex setup, slower build times than SPAs.
Utility LibraryVueUsehttps://vueuse.org/Collection of essential Vue 3 composition utilities.Focused on utility functions for the Composition API.Makes Vue Composition API easier, reusable functions.Only useful for Composition API users, lacks official support.
Data FetchingApollo Vuehttps://apollo.vuejs.org/A Vue 3 integration for building GraphQL-powered applications.Full-featured GraphQL client for Vue 3.Great GraphQL support, works well with Vue, powerful querying.Heavyweight, more setup required for small projects.
Data FetchingVue Queryhttps://vue-query.vercel.app/Data-fetching and state management library, similar to React Query, for Vue 3.Simplifies API data-fetching and caching.Easy API, great for handling remote data, caching, and synchronization.Less support for large data models compared to Vuex.
ValidationVuelidatehttps://vuelidate-next.netlify.app/Validation library for Vue 3 with support for the Composition API.Composition API-based validation.Lightweight, easy to integrate, simple to use.Not as feature-rich as some alternatives (like VeeValidate).
Form HandlingFormKithttps://formkit.com/Robust form management and validation for Vue 3.Advanced form management with full validation support.Extensive features for forms, great validation handling.Overkill for simple forms, can increase bundle size.
UI FrameworkIonic Vuehttps://ionicframework.com/docs/vue/Build cross-platform mobile apps with Vue 3 and Ionic.Optimized for mobile development.Cross-platform, mobile-first components, easy PWA integration.Can feel bloated for web-only applications.
UI FrameworkVue 3 Materialhttps://vuematerial.io/Material Design 3 component library for Vue 3.Material Design components for Vue 3.Simple to use, clean material design.Fewer components compared to other material design libraries like Vuetify.
UI FrameworkVuestic UIhttps://vuestic.dev/UI library for building accessible, fully customizable interfaces with Vue 3.Focused on accessibility and customization.Highly customizable, lightweight, accessible out of the box.Smaller community and ecosystem.
UI FrameworkDevExtreme Vuehttps://js.devexpress.com/Overview/Vue/Enterprise-ready Vue 3 components for data-heavy applications.Optimized for enterprise and data-heavy apps.Great data components, enterprise-grade, responsive.Commercial product, steeper learning curve.
TestingVue Test Utilshttps://test-utils.vuejs.org/Official unit testing library for Vue components.Built for Vue component testing.Official testing library, well-supported, integrates with Jest and Mocha.Can be challenging for complex components.
TestingCypresshttps://www.cypress.io/End-to-end testing framework for web applications, supports Vue 3.Easy-to-use end-to-end testing tool.Real browser testing, powerful debugging tools, great for Vue 3 apps.Requires real browser setup, slower than unit testing.
TestingJesthttps://jestjs.io/JavaScript testing framework with Vue 3 support via vue-jest.Popular testing framework in JavaScript.Fast, easy to configure, great Vue 3 support.Configuration required for Vue 3 with vue-jest.
AnimationGSAP Vue 3https://greensock.com/docs/v3/Installation?ref=platformsVue 3 integration for creating animations with GSAP (GreenSock Animation Platform).Leading animation library with Vue 3 integration.High-performance animations, extensive feature set, works well with Vue 3.Can add to the complexity and size of your app if overused.
Data VisualizationVue Chart 3https://vuechartjs.org/Charting library for Vue 3 built on Chart.js.Chart.js integration for Vue 3.Easy to use, lightweight, built on the popular Chart.js.Limited to what Chart.js supports, not as flexible as some other charting libraries.
TestingVitesthttps://vitest