vue3.0 setup 模块化 使用例子

原创 已于 2022-09-14 10:55:30 修改 · 1.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue3.0 #setup 模块化开发 #import 导入

于 2021-05-11 14:51:12 首次发布
本文介绍如何使用Vue 3的组合API setup进行模块化开发，通过将不同tab页的代码拆分到独立的JS文件中，实现代码的清晰划分与高效协同开发。

一、模块化开发

因为vue3.0 添加了一个组合api setup,这个方法对我来说最大的用处就是一个vue的页面可以通过import导入的方式来模块化开发，在vue2.0的时候一个vue页面有几个tab页，每个页面下面又有子tab页，如：

这样下来就把所有的代都往一个页面来塞，开发下来几千行甚至一万多行代码，维护起来不但不方便，和同事合作开发更加麻烦，每次提交代码的时候都要用compare来合并。

但是现在可以用，组合api setup来处理这个问题：把每一个tab页的代码分开放在对应的js文件里，可以用import引入来开发，当和同事协同开的时候，A同事去维护tab1页面

B同事去维护tab2页面等等，代码界线清晰又没冲突，主页面index.vue代码如下：

tab1.js 

  ================================================

Vue3 - Pinia 模块化（详细教程）
🏆 前端领域优质创作者
11-30 7636
Vue3引入pinia并模块化，如何在vue3+TS的项目中使用pinia进行模块化状态举个例子啊，在复杂的大型项目中呢，因为项目复杂所以数据必然多，如果不模块化管理，状态管理的数据可能都堆成山了。所以呢，咱们必须将这些数据进行模块化管理，最简单的是啥呢，比如用户相关的数据放在一个文件里，而系统相关的放在另一个文件里，这就是最简单的模块化。我们要聊的Pinia模块化也是同理，咱们来实际操作一把。最后总结一下，其实Vue2中Vuex同样也可以模块化管理，Vuex是重量级的，更加适合大型项目。
关于Vue3开发中模块化的常见问题和最佳解决方案
繁若华尘的博客
02-19 853
Vue3 的模块化核心在于组合式 API + 合理的架构设计。通过将逻辑拆分为高内聚、低耦合的模块（组件、Composables、Stores），结合 TypeScript 和构建工具优化，可显著提升代码质量和维护效率。始终遵循“单一职责原则”，避免过早抽象，根据项目规模逐步优化模块化结构。
Vue3大型应用架构实战：模块化、状态管理与工程化设计
桂月二二博客
04-14 1774
【代码】Vue3大型应用架构实战：模块化、状态管理与工程化设计。
FastEndpoints客户端生成终极指南：如何自动生成TypeScript和C客户端代码
最新发布
gitblog_01059的博客
12-07 844
🚀 想要快速为你的ASP.NET Core API项目生成类型安全的客户端代码吗？FastEndpoints客户端生成功能正是你需要的解决方案！这个强大的工具能够自动从你的Swagger文档生成C#和TypeScript客户端，让前后端协作更加高效顺畅。本文将为你展示如何利用FastEndpoints的客户端代码生成功能，大幅提升开发效率。 ## 🔥 什么是FastEndpoints客户端生
3.Vue模块化
海里寻因的博客
11-05 2106
模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块（方便代码的重用，从而提升开发效率，并且方便后期的维护） 服务器端模块化规范 CommonJS: 模块分为单文件模块与包 模块成员导出：module.exports和exports 模块成员导入：require('模块标识符‘) ES6模块化的基本语法： 默认导出与导入： 默认导出语法：export default 默认导出的成员 //当前文件模块m1.js //
vue3使用模块化的 vueX
w1234567465的博客
05-03 2379
一、检查自己项目中是否有vuex，没有的话下载安装。 我的目录结构： 二、写一个user.js，并导出。 三、写入口模块index.js。 导入createStore和自己写的模块，刚才我写的是user，然后把自己写模块注入到modules中 四、main.js中引入入口index.js，并且使用。 主要语句： import store from './store‘ app.use(store) import { createApp } from 'vue' import App from './Ap
VUE3.0(一)：vue3.0简介
chengcheng9876的博客
03-22 8342
VUE3.0(一)：vue3.0简介
vue3.0和vue2.0的区别详细讲解
aaa123aaasqw的博客
07-04 2271
vue经历从2.0到3.0更新之后,简⽽⾔之就是变得更轻更快,使⽤起来更加⽅便,下面这篇文章主要给大家介绍了关于vue3.0和vue2.0区别的相关资料,需要的朋友可以参考下Vue 3.0是一个用于构建用户界面的JavaScript框架。相比于Vue 2.x，Vue 3.0在性能、体积和开发体验上都有了很大的提升。
你准备好迎接vue3.0了吗
10-15
而在Vue3.0中，这些功能被提取到一个名为`setup`的函数中，这使得代码组织更加模块化，更容易复用和组合。在`setup`函数中，你可以定义变量、函数，并通过`return`语句将所需内容暴露给模板。 在数据绑定方面，Vue...
vue3.0的优化
weixin_47450807的博客
03-14 2710
一、写在前面 Vue.js 从 1.x 到 2.0 版本，最大的升级就是引入了虚拟 DOM 的概念，它为后续做服务端渲染以及跨端框架 Weex 提供了基础。Vue.js 2.x 发展了很久，现在周边的生态设施都已经非常完善了，而且对于 Vue.js 用户而言，它几乎满足了我们日常开发的所有需求。你可能觉得 Vue.js 2.x 已经足够优秀，但是在 Vue.js 作者尤小右的眼中它还不够完美。在迭代 2.x 版本的过程中，小右发现了很多需要解决的痛点，比如源码自身的维护性，数据量大后带来的渲染和更新的性能问
Vue 3.0 前瞻Vue Function API新特性体验
12-12
Vue Function API 通过将组件的定义转换为纯 JavaScript 函数，提供了更清晰、更模块化的组件结构。 Vue 2.x 中，开发者通常会使用 mixin、函数式组件和 slots 来实现组件间的共享逻辑。然而，这些方法在处理复杂...
Vue-模块化（三）
YYZ_Obsessiveness的博客
10-16 316
常见的模块化规范 CommonJS：Node AMD CMD ES6的Modules /* CommonJS模块化的写法 */ //CommonJS的导出 module.exports = { flag:true, sum(a,b){ return a+b; } } //CommonJs的导入(解构写法) let {flag,sum} = require('./xxx.js'); /* ES6模块化的写法。export/import */ //export 第一种写法 export le.
vue3使用vuex的示例(模块化功能)
qq_42750608的博客
11-11 1204
vue3使用vuex的示例(模块化功能)
Vite与Vue 3项目的模块化与组件库开发
偏执的小男孩儿
04-28 708
Vite与Vue 3项目的模块化与组件库开发
vue3 路由模块化 SSR
随风潜入夜，不白头
07-18 745
沙拉嘿！我的骚不是你理解的骚，我之所以那么菜，还不是自由给的爱，充实而自由，我的自由，就是孤而由己，与影随行，形影不想理，沉默而不语，忽而吟唱，忽而蹦跶，岂乃现阶段之无奈，唉！ 翻看一下vuejs3的文档，让我发现一个愉悦的写法： 当然，你的路由比较少的话，就当我没说，OK！ 如果多的话，就可以省略不少代码的，灵活灵用才是一个程序员的基本操作嘛，相信懂得都懂！ const pages = import.meta.glob("./views/*.vue") const routes = Obje
详解Vue3模块化拆分以及遇到的问题与最佳解决方案
繁若华尘的博客
02-12 686
分层架构原则视图层：处理 UI 渲染业务逻辑层：通过 Composables 实现数据层：对接 API 和状态管理模块设计规范单一职责原则（SRP）明确的输入输出接口版本化模块发布文档驱动开发| 属性 | 类型 | 说明 || users | Ref<User[]> | 用户列表 || fetchUsers | Function | 加载用户数据 |测试策略// 模块单元测试test('正确加载用户数据', async () => {})})
【源码&库】跟着 Vue3 学习前端模块化
qq_33733799的博客
03-07 1331
通过分析vue源码的的scripts配置，我们了解到vue是通过nodejs的execa包，对rollup的命令进行了封装，从而实现了对rollup的命令和配置动态化；execa是基于的封装，可以让我们更加方便的执行命令，vue利用这个特性，使用多线程的方式，同时执行多个rollup命令，从而加快了打包速度；rollup的配置文件是通过来进行配置的，而vue通过各种参数的封装，实现了对rollup配置的动态化，从而实现了对不同的打包方案的适配；考虑到vue可能会在不同的环境下运行，vue通过配置。
Vue3的setup系列篇之defineEmits和defineProps使用方式
weixin_44072254的博客
05-21 614
defineEmits：触发事件（函数，等价于 $emit)defineProps：父组件传过来的值进行类型验证。
Vue 3 （2） 模块化开发入门教程（ESM方式）
Theodore_1022的博客
05-25 649
本文将带你使用 Vue 3 的 ES Module 模块化方式编写一个简单的响应式页面，彻底告别传统的全局 Vue 对象写法，为构建现代前端应用打下基础。
深入解析Vue3.0 Function API：兼容性与设计理念
Vue3.0的组合API允许开发者将状态和逻辑分割到可复用的函数中，这增强了代码的模块化和可维护性。通过`setup()`函数返回的对象，可以轻松地将数据和方法暴露给模板。 Vue3.0 Function API带来了更高效、更灵活的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值