6个实用的Vue3相关生态(总结分享)

云婷酱_2626

云婷酱_2626

2022-10-19

6344人浏览

原创

本篇文章带大家整理分享一些实用的vue相关生态,希望对大家有所帮助!

1、Vue 插件库

Vue 插件库收集了最新最全的Vue插件和提供各种Vue插件的详细使用方法,支持在线预览,Vue 插件下载。(学习视频分享:vue视频教程)

官方地址:https://www.vue365.cn/

1.png

vue插件库 旨在为Web和移动应用程序开发人员提供最新的免费Vue.js组件和插件。

2、Pinia

轻量级状态管理库,API 设计更接近Vuex 5的提案,也是Vue核心团队推荐的状态管理库,同时支持 Vue2 和 Vue3。

官方地址:https://pinia.vuejs.org/

2.png

特性

Pinia具有以下几点特性:

  • 直观,像定义components一样地定义 store

  • 完整的Typescript支持

  • 去除 mutations,只有 state,getters,actions

  • actions支持同步和异步

  • Vue Devtools支持Pinia,提供更好的开发体验

  • 能够构建多个 stores ,并实现自动地代码拆分

  • 极其轻量(1kb),甚至感觉不到它的存在

使用 Pinia 获得可很多好处:

  • 开发工具支持

    • 跟踪动作、突变的时间表
    • 商店出现在使用它们的组件中
    • 时间旅行和更容易的调试
  • 热模块更换

    • 在不重新加载页面的情况下修改您的商店
    • 在开发时保持任何现有状态
  • 插件:使用插件扩展 Pinia 功能

  • 为 JS 用户提供适当的 TypeScript 支持或自动完成功能

  • 服务器端渲染支持

3、Nuxt Modules

由Nuxt团队和社区创建, 了解我们的模块列表,以增强您的Nuxt项目。

  • 官方地址:https://modules.nuxtjs.org/

  • github地址:https://github.com/nuxt/modules

3.png

4、Nuxt 3

轻量级应用框架,可用来创建服务端渲染 (SSR) 应用

官方地址:https://v3.nuxtjs.org/

中文文档:https://www.nuxtjs.org.cn/

4.png

整合vite + vue3 + composition api + ts、CLI、DevTools、Nuxt Kit表明,这是一个体系完备的通用开发框架,能提供良好的代码组织、极高的开发效率、开发体验和服务端渲染/静态网站生成(SSR/SSG)能力,这才是硬核!

Nuxt 3新特性

Nuxt 3 的重构精简了内核,并且让速度更快,开发体验更好。

  • 更轻量

    以现代浏览器为目标的情况下,服务器部署和客户端产物最多可达 75 倍的减小。

  • 更快

    用动态服务端代码分割来优化冷启动,由 nitro 提供能力。

  • Hybrid

    增量静态生成和其他高级模式现在都成为可能。

  • Suspense

    导航前后皆任何组件中获取数据。

  • Composition API

    vue3-ant-design-vue-component-skill
    vue3-ant-design-vue-component-skill

    封装基于 Vue 3 + Ant Design Vue 的通用业务组件,提供标准化模板与最佳实践。

    下载

    使用 Composition API 和 Nuxt 3 的 composables 实现真正的可复用性。

  • Nuxt CLI

    全新的零依赖体验,助您轻松搭建项目和集成模块。

  • Nuxt Devtools

    更多的信息和快速修复,在浏览器中高效工作。

  • Nuxt Kit

    全新的基于 TypeScript 和跨版本兼容的模块开发。

  • Webpack 5

    更快的构建速度和更小的构建产物,并且零配置。

  • Vite

    用 Vite 作为你的打包器,体验轻量级的快速 HMR。

  • Vue3

    Vue3 会成为您下一个应用的坚实基础。

  • TypeScript

    由原生 TypeScript 和 ESM 构成 —— 没有额外的步骤。

5、vuepress

vuepress是一个基于vue的静态网站生成器,可以用来写文档的。

官方地址:https://v2.vuepress.vuejs.org/zh/

5.png

vuepress 是 Vuejs 官方提供的一个是Vue驱动的静态网站生成器,基于Markdown语法生成网页。简单的说它就是一个快速建设文档站点的工具,在简单配置好功能后,需要做的事情就剩下写好一个个 Markdown 文档,并且可以将其发布到github。

特性(features)

  • 内置 markdown 扩展,针对技术文档进行了优化

  • 能够利用内嵌在 markdown 文件中的 Vue 代码

  • 以 Vue 驱动的自定义主题系统

  • PWA 支持

  • Google Analytics 集成

  • 一个默认主题:

    • 响应式布局

    • 可选的主页

    • 简单、开箱即用、基于标题的搜索功能

    • 可定制的导航栏和侧边栏

    • 自动生成的 GitHub 链接和页面编辑链接

6、VueUse

强大的 Vue 组合实用程序集合,是一个基于 Composition API 实现的基本 Vue 组合实用函数的集合。

官方地址:https://vueuse.org/

github地址:https://github.com/vueuse/vueuse

6.png

VueUse 借助 vue-demi 的强大功能,可以在一个包中同时适用于 Vue2 和 Vue3!

Vue 3 Demo:

  • 使用 vite:https://github.com/vueuse/vueuse-vite-starter

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

Vue 2 Demo:Vue CLI

  • 使用 Vue CLI:https://github.com/vueuse/vueuse-vue2-example

另外,要注意库的版本:

从 v6.0 版本起,vue3 需要 vue >= v3.2;vue2 需要依赖 @vue/composition-api>@vue/composition >= v1.1

【相关视频教程推荐:vuejs入门教程、web前端入门】

前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

vue3

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

2026.02.13

292

17

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

2026.02.25

500

17

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

2026.03.13

371

19

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

2026.06.03

266

29

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

2026.06.16

598

8

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4276

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

1315

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1718

5

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

2023.08.17

9823

11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习

Vue3.x 核心篇--十天技能课堂
Vue3.x 核心篇--十天技能课堂

共30课时 | 2.4万人学习

Vue3.x新特性篇--十天基础课堂
Vue3.x新特性篇--十天基础课堂

共20课时 | 1.7万人学习