6 practical Vue3 related ecology (summary sharing)

This article will help you organize and share some practical vue related ecology. I hope it will be helpful to everyone!

1. Vue plug-in library

Vue plug-in library collects the latest and most complete Vue plug-ins and provides detailed usage methods of various Vue plug-ins. , supports online preview and Vue plug-in download. (Learning video sharing: vue video tutorial)

Official address: https://www.vue365.cn/

vue The plugin library aims to provide web and mobile application developers with the latest free Vue.js components and plugins.

2, Pinia

Lightweight state management library, the API design is closer to the Vuex 5 proposal, and is also the state recommended by the Vue core team Management library, supporting both Vue2 and Vue3.

Official address: https://pinia.vuejs.org/

Features

Pinia has the following Several features:

• Intuitive, define store just like defining components

• Complete Typescript support

• Remove mutations, only state, getters, actions

• actions support synchronous and asynchronous

• Vue Devtools supports Pinia, providing better Development experience

• Able to build multiple stores and realize automatic code split

• Extremely lightweight (1kb), you can’t even feel it Its existence

There are many benefits to using Pinia:

• Development tool support

  • Track timelines for actions, mutations
  • Stores appear in components that use them
  • Time travel and easier debugging

• hotmodulechange

  • Modify your store without reloading the page
  • Keep any existing state while developing

• Plugins: Use plugins to extend Pinia functionality

• Provide JS users with proper TypeScript support or autocomplete functionality

• Server-side rendering support

3, Nuxt Modules

Created by the Nuxt team and community, learn about us A list of modules to enhance your Nuxt projects.

• Official address: https://modules.nuxtjs.org/

• github address: https://github.com/nuxt/ modules

4、Nuxt 3

is a lightweight application framework that can be used to create Server-side rendering (SSR) application

Official address: https://v3.nuxtjs.org/

Chinese documentation: https://www.nuxtjs.org.cn/

Integrating vue vue3 composition api ts, CLI, DevTools, and Nuxt Kit shows that this is a complete general development framework that can provide good code organization, extremely high development efficiency, Development experience and server-side rendering/static website generation (SSR/SSG) capabilities, this is the core!

New features of Nuxt 3

The refactoring of Nuxt 3 streamlines the kernel, makes it faster, and provides a better development experience.

• More lightweight

  Server deployment and client-side production can be reduced by up to 75x when targeting modern browsers.

• Faster

  Optimize cold starts with dynamic server-side code splitting, powered by nitro.

• Hybrid

  Incremental static generation and other advanced patterns are now possible.

• Suspense

  Get data from any component before and after navigation.

• Composition API

  Achieve true reusability using the Composition API and Nuxt 3’s composables.

• Nuxt CLI

  A new zero-dependency experience to help you easily build projects and integrate modules.

• Nuxt Devtools

  More information and quick fixes to work efficiently in the browser.

• Nuxt Kit

  New module development based on TypeScript and cross-version compatible.

• Webpack 5

  Faster builds and smaller build artifacts, with zero configuration.

• Vite

  Use Vite as your packager to experience lightweight and fast HMR.

• Vue3

  Vue3 will be a solid foundation for your next application.

• TypeScript

  Constructed from native TypeScript and ESM - no extra steps.

5, vuepress

vuepress is a static website generator based on vue, which can be used to write documents .

Official address: https://v2.vuepress.vuejs.org/zh/

##vuepress is a Vue-driven static website generator officially provided by Vuejs , generate web pages based on Markdown syntax. Simply put, it is a tool for quickly building a documentation site. After simply configuring the function, all that is left to do is to write each Markdown document and publish it to github.

Features

• Built-in markdown extension, optimized for technical documentation

• Ability to utilize Vue code embedded in markdown files

• Vue-driven custom theme system

• PWA support

• Google Analytics Integration

• A default theme:
  • Responsive layout

  • Optional home page

  • Simple, out-of-the-box, title-based search functionality

  • Customizable navigation bar and side Sidebar

  • Automatically generated GitHub link and page editing link

6, VueUse

The powerful Vue composition utility collection is a collection of basic Vue composition utility functions implemented based on the Composition API.

Official address: https://vueuse.org/

github address: https://github.com/vueuse/vueuse

VueUse uses the powerful functions of vue-demi to apply to both Vue2 and Vue3 in one package!

Vue 3 Demo:

• Use vite: https://github.com/vueuse/vueuse-vite-starter

• Using Webpack: https://github.com/vueuse/vueuse-vue3-example

##Vue 2 Demo: Vue CLI

Using Vue CLI: https://github.com/vueuse/vueuse-vue2-example

Also, please note Library version:

From version v6.0 onwards, vue3 requires vue >= v3.2; vue2 needs to depend on

@vue/composition-api>@vue/composition >= v1.1

[Related video tutorial recommendations:

vuejs entry tutorial

, web front-end entry]

The above is the detailed content of 6 practical Vue3 related ecology (summary sharing). For more information, please follow other related articles on the PHP Chinese website!