Home>Article>Web Front-end> 6 practical Vue3 related ecology (summary sharing)

6 practical Vue3 related ecology (summary sharing)

青灯夜游
青灯夜游 Original
2022-10-19 17:00:46 2613browse

This article will help you organize and share some practicalvuerelated 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/

6 practical Vue3 related ecology (summary sharing)

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/

6 practical Vue3 related ecology (summary sharing)

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 orautocomplete 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

6 practical Vue3 related ecology (summary sharing)

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/

6 practical Vue3 related ecology (summary sharing)

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/

6 practical Vue3 related ecology (summary sharing)

##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

6 practical Vue3 related ecology (summary sharing)

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn