<\/p>\n\n\n\n
yarn global add @vue\/cli\n# OR\nnpm install -g @vue\/cli<\/pre>\n\n\n\nNeues Projekt erstellen<\/p>\n\n\n\n
vue create my-project\n# OR\nvue ui<\/pre>\n\n\n\nInstallation mit Vite<\/h3>\n\n\n\n
Vite<\/h2>\n\n\n\n
Vite<\/a> ist ein Build-Tool f\u00fcr die Webentwicklung, das aufgrund seines nativen ES-Modul-Importansatzes eine blitzschnelle Bereitstellung von Code erm\u00f6glicht.<\/p>\n\n\n\n
Installation mit npm:<\/p>\n\n\n\n
npm init @vitejs\/app <project-name>\ncd <project-name>\nnpm install\nnpm run dev<\/pre>\n\n\n\nOder mit Yarn<\/p>\n\n\n\n
$ yarn create @vitejs\/app <project-name>\n$ cd <project-name>\n$ yarn\n$ yarn dev<\/pre>\n\n\n\nWenn der Projektname Leerzeichen ehth\u00e4lt, kann es zu Fehlern kommen. Dann hilft das nachfolgende Kommando<\/p>\n\n\n\n
$ create-vite-app <project-name><\/pre>\n\n\n\nVue Frameworks<\/h2>\n\n\n\n
Description<\/strong>:<\/p>\n\n\n\n
Group<\/strong><\/th> Link Text<\/strong><\/th> URL<\/strong><\/th> Description<\/strong><\/th> Details<\/strong><\/th> Advantages<\/strong><\/th> <\/th><\/tr><\/thead> UI Framework<\/td> Vuetify<\/td> https:\/\/next.vuetifyjs.com\/<\/a><\/td> Material design component framework for Vue 3.<\/td> Rich in features and components.<\/td> Highly customizable, extensive components, material design.<\/td> <\/td><\/tr> UI Framework<\/td> Quasar<\/td> https:\/\/quasar.dev\/<\/a><\/td> Build responsive websites, mobile, and desktop apps using a single codebase with Vue 3.<\/td> All-in-one framework for web, mobile, and desktop apps.<\/td> Cross-platform, fast development, rich ecosystem.<\/td> <\/td><\/tr> UI Framework<\/td> Element Plus<\/td> https:\/\/element-plus.org\/<\/a><\/td> Enterprise-ready UI component library for Vue 3.<\/td> Popular in the Chinese market, enterprise-friendly.<\/td> Well-documented, easy to use, comprehensive components.<\/td> <\/td><\/tr> UI Framework<\/td> Naive UI<\/td> https:\/\/www.naiveui.com\/<\/a><\/td> Minimalistic and customizable component library for Vue 3.<\/td> Lightweight and easy to integrate.<\/td> Customizable, lightweight, modern.<\/td> <\/td><\/tr> UI Framework<\/td> PrimeVue<\/td> https:\/\/primefaces.org\/primevue\/<\/a><\/td> Rich set of customizable UI components for Vue 3.<\/td> Comes with many pre-built themes and components.<\/td> Wide variety of components, responsive, many themes.<\/td> <\/td><\/tr> UI Framework<\/td> Ant Design Vue<\/td> https:\/\/2x.antdv.com\/<\/a><\/td> Vue 3 implementation of the Ant Design UI library.<\/td> Well-suited for professional and enterprise-grade apps.<\/td> Clean, professional design, extensive components.<\/td> <\/td><\/tr> UI Framework<\/td> BootstrapVue 3<\/td> https:\/\/bootstrap-vue.org\/<\/a><\/td> Bootstrap-based Vue 3 components.<\/td> Based on Bootstrap for familiarity.<\/td> Bootstrap ecosystem, responsive, familiar grid system.<\/td> Lacks some modern UI components compared to newer libraries.<\/td><\/tr> Routing<\/td> Vue Router<\/td> https:\/\/router.vuejs.org\/<\/a><\/td> Official Vue 3 router for single-page applications.<\/td> Powerful and flexible routing.<\/td> Seamless integration with Vue 3, dynamic routing, nested routes.<\/td> Requires setup for advanced features (SSR, lazy loading).<\/td><\/tr> State Management<\/td> Pinia<\/td> https:\/\/pinia.vuejs.org\/<\/a><\/td> Lightweight, intuitive state management library for Vue 3.<\/td> Vuex alternative with Composition API support.<\/td> Simple API, modular, Composition API support, easy to learn.<\/td> Limited ecosystem compared to Vuex.<\/td><\/tr> State Management<\/td> Vuex<\/td> https:\/\/vuex.vuejs.org\/<\/a><\/td> Official state management library for Vue.js, compatible with Vue 3.<\/td> Centralized state management for Vue apps.<\/td> Well-supported, battle-tested, great for large apps.<\/td> Can be complex for small applications, more boilerplate.<\/td><\/tr> Build Tool<\/td> Vite<\/td> https:\/\/vitejs.dev\/<\/a><\/td> Fast build tool with native support for Vue 3.<\/td> Modern alternative to Webpack, optimized for Vue 3.<\/td> Super fast builds, modern JavaScript support, HMR.<\/td> Still evolving, lacks plugins compared to Webpack.<\/td><\/tr> Build Tool<\/td> Vue CLI<\/td> https:\/\/cli.vuejs.org\/<\/a><\/td> CLI to scaffold and manage Vue.js applications, supports Vue 3.<\/td> Long-standing, mature build tool.<\/td> Easy to use, integrates well with Vue ecosystem, powerful plugins.<\/td> Slower build times compared to Vite.<\/td><\/tr> Dev Tools<\/td> Vue Devtools<\/td> https:\/\/devtools.vuejs.org\/<\/a><\/td> Browser extension for debugging Vue.js applications.<\/td> Essential for Vue development.<\/td> Powerful debugging, time-travel debugging, component inspection.<\/td> Can slow down large apps in development mode.<\/td><\/tr> Meta Framework<\/td> Nuxt 3<\/td> https:\/\/v3.nuxtjs.org\/<\/a><\/td> Vue 3 meta-framework for SSR and static site generation.<\/td> Built on Vue 3, optimized for server-side rendering.<\/td> SSR, static site generation, auto-routing, great SEO support.<\/td> More complex setup, slower build times than SPAs.<\/td><\/tr> Utility Library<\/td> VueUse<\/td> https:\/\/vueuse.org\/<\/a><\/td> Collection of essential Vue 3 composition utilities.<\/td> Focused on utility functions for the Composition API.<\/td> Makes Vue Composition API easier, reusable functions.<\/td> Only useful for Composition API users, lacks official support.<\/td><\/tr> Data Fetching<\/td> Apollo Vue<\/td> https:\/\/apollo.vuejs.org\/<\/a><\/td> A Vue 3 integration for building GraphQL-powered applications.<\/td> Full-featured GraphQL client for Vue 3.<\/td> Great GraphQL support, works well with Vue, powerful querying.<\/td> Heavyweight, more setup required for small projects.<\/td><\/tr> Data Fetching<\/td> Vue Query<\/td> https:\/\/vue-query.vercel.app\/<\/a><\/td> Data-fetching and state management library, similar to React Query, for Vue 3.<\/td> Simplifies API data-fetching and caching.<\/td> Easy API, great for handling remote data, caching, and synchronization.<\/td> Less support for large data models compared to Vuex.<\/td><\/tr> Validation<\/td> Vuelidate<\/td> https:\/\/vuelidate-next.netlify.app\/<\/a><\/td> Validation library for Vue 3 with support for the Composition API.<\/td> Composition API-based validation.<\/td> Lightweight, easy to integrate, simple to use.<\/td> Not as feature-rich as some alternatives (like VeeValidate).<\/td><\/tr> Form Handling<\/td> FormKit<\/td> https:\/\/formkit.com\/<\/a><\/td> Robust form management and validation for Vue 3.<\/td> Advanced form management with full validation support.<\/td> Extensive features for forms, great validation handling.<\/td> Overkill for simple forms, can increase bundle size.<\/td><\/tr> UI Framework<\/td> Ionic Vue<\/td> https:\/\/ionicframework.com\/docs\/vue\/<\/a><\/td> Build cross-platform mobile apps with Vue 3 and Ionic.<\/td> Optimized for mobile development.<\/td> Cross-platform, mobile-first components, easy PWA integration.<\/td> Can feel bloated for web-only applications.<\/td><\/tr> UI Framework<\/td> Vue 3 Material<\/td> https:\/\/vuematerial.io\/<\/a><\/td> Material Design 3 component library for Vue 3.<\/td> Material Design components for Vue 3.<\/td> Simple to use, clean material design.<\/td> Fewer components compared to other material design libraries like Vuetify.<\/td><\/tr> UI Framework<\/td> Vuestic UI<\/td> https:\/\/vuestic.dev\/<\/a><\/td> UI library for building accessible, fully customizable interfaces with Vue 3.<\/td> Focused on accessibility and customization.<\/td> Highly customizable, lightweight, accessible out of the box.<\/td> Smaller community and ecosystem.<\/td><\/tr> UI Framework<\/td> DevExtreme Vue<\/td> https:\/\/js.devexpress.com\/Overview\/Vue\/<\/a><\/td> Enterprise-ready Vue 3 components for data-heavy applications.<\/td> Optimized for enterprise and data-heavy apps.<\/td> Great data components, enterprise-grade, responsive.<\/td> Commercial product, steeper learning curve.<\/td><\/tr> Testing<\/td> Vue Test Utils<\/td> https:\/\/test-utils.vuejs.org\/<\/a><\/td> Official unit testing library for Vue components.<\/td> Built for Vue component testing.<\/td> Official testing library, well-supported, integrates with Jest and Mocha.<\/td> Can be challenging for complex components.<\/td><\/tr> Testing<\/td> Cypress<\/td> https:\/\/www.cypress.io\/<\/a><\/td> End-to-end testing framework for web applications, supports Vue 3.<\/td> Easy-to-use end-to-end testing tool.<\/td> Real browser testing, powerful debugging tools, great for Vue 3 apps.<\/td> Requires real browser setup, slower than unit testing.<\/td><\/tr> Testing<\/td> Jest<\/td> https:\/\/jestjs.io\/<\/a><\/td> JavaScript testing framework with Vue 3 support via vue-jest<\/code>.<\/td>Popular testing framework in JavaScript.<\/td> Fast, easy to configure, great Vue 3 support.<\/td> Configuration required for Vue 3 with vue-jest<\/code>.<\/td><\/tr>Animation<\/td> GSAP Vue 3<\/td> https:\/\/greensock.com\/docs\/v3\/Installation?ref=platforms<\/a><\/td> Vue 3 integration for creating animations with GSAP (GreenSock Animation Platform).<\/td> Leading animation library with Vue 3 integration.<\/td> High-performance animations, extensive feature set, works well with Vue 3.<\/td> Can add to the complexity and size of your app if overused.<\/td><\/tr> Data Visualization<\/td> Vue Chart 3<\/td> https:\/\/vuechartjs.org\/<\/a><\/td> Charting library for Vue 3 built on Chart.js.<\/td> Chart.js integration for Vue 3.<\/td> Easy to use, lightweight, built on the popular Chart.js.<\/td> Limited to what Chart.js supports, not as flexible as some other charting libraries.<\/td><\/tr> Testing<\/td> Vitest<\/td> https:\/\/vitest<\/a><\/td> <\/td> <\/td> <\/td> <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":"
Allgemeines Installation Installation mit der vue-cli Neues Projekt erstellen Installation mit Vite Vite Vite ist ein Build-Tool f\u00fcr die Webentwicklung, das aufgrund seines nativen ES-Modul-Importansatzes eine blitzschnelle Bereitstellung von Code erm\u00f6glicht. Installation mit npm: Oder mit Yarn Wenn der Projektname Leerzeichen ehth\u00e4lt, kann es zu Fehlern kommen. Dann hilft das nachfolgende Kommando Vue Frameworks Description: Group Link Text URL Description Details Advantages UI Framework Vuetify https:\/\/next.vuetifyjs.com\/ Material design component framework for Vue 3. Rich in features and components. Highly customizable, extensive components, material design. UI Framework Quasar https:\/\/quasar.dev\/ Build responsive websites, mobile, and desktop apps using a single codebase with Vue […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[103,86],"tags":[],"class_list":["post-7979","post","type-post","status-publish","format-standard","hentry","category-vue","category-web-framework"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/7979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=7979"}],"version-history":[{"count":2,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/7979\/revisions"}],"predecessor-version":[{"id":10295,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/7979\/revisions\/10295"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=7979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=7979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=7979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}