Vue的模块化开发

最新推荐文章于 2025-07-31 19:00:00 发布
原创 最新推荐文章于 2025-07-31 19:00:00 发布 · 814 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
随着客户端功能复杂度增加，代码量急剧增长，模块化成为管理代码的重要手段。文章讨论了传统方式下变量重名导致的问题，以及闭包解决重名但降低代码复用性的矛盾。提出使用模块作为出口，通过在匿名函数内定义对象并暴露所需属性和方法来解决这一问题，使得在main.js等其他文件中能更方便地使用特定模块的成员。

一、为什么需要模块化

客户端需要完成的事情越来越多，代码量也是与日俱增。 为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护。 但是这种维护方式，依然不能避免一些灾难性的问题。

 比如小明和小丽在不同的JS文件中都定义了flag变量名称，但是布尔值却不同

小明在页面中运行的时候发现布尔值和自己初始设置的不一样

那这个时候我们可能会使用我们闭包的函数思想去解决这个问题。

但是闭包解决了变量的重名问题却大大降低了我们代码的可复用性

如果我们希望在main.js文件中，用到flag，应该如何处理呢？ 显然，另外一个文件中不容易使用，因为flag是一个局部变量

解决方案：

使用模块作为出口：我们可以使用将需要暴露到外面的变量，使用一个模块作为出口

 我们在匿名函数内部，定义一个对象。 给对象添加各种需要暴露到外面的属性和方法(不需要暴露的直接定义即可)。 最后将这个对象返回，并且在外面使用了一个MoudleA接收。

那么我们在man.js中怎么使用呢？

我们只需要使用属于自己模块的属性和方法即可

标签
#javascript #vue.js #node.js
Chil_G
关注
分布式电商项目十六：Vue的模块化开发
LastYHM的博客
06-01 1399
了解完了Vue的基本组件，我们开始了解Vue的模块化开发，之后的页面开发我们也使用Vue的模块化开发功能。
泛微OAe9-自定义资源看板
小松鼠的博客
06-12 1775
OA中，有一个很好用的功能：会议室预约。对于一间设立的会议室，同一时间段内，肯定会有不同的人预约同一间会议室，并且，在资源看板里，能看清各个时间段会议室的占用情况，可是会议室资源是有限的，显然不可能让多个人在同一时间段内预约同一间会议室，如会议室已占用，其他人再次申请时，应当拒绝预约。
Vue实战中的模块化开发
郭育培的博客
11-30 3024
最近从APP开发转向了Web后台管理平台的开发，在经受了半年多的APP开发的折磨之后终于迎来了春天，再也不用自己梳理业务、绘制原型、设置。 使用的技术：Vue 使用的UI库：若依 api: axios 虽然这种后台管理系统都比较简单，多数页面都是重复重复再重复，但是在开发过程中如果用心去写，去总结还是会有很多收获的。 ...
古月居ros2入门21讲里面7.节点：机器人的工作细胞，报错：QSocketNotifier: Can only be used with threads started...如何解决？
最新发布
**My Coding Family**
07-31 1781
🏆本文收录于 《全栈Bug调优(实战版)》 专栏，该专栏专注于分享我在真实项目开发中遇到的各类疑难Bug及其深层成因，并系统提供高效、可复现的解决思路和实操方案。无论你是刚入行的新手开发者，还是拥有多年项目经验的资深工程师，本专栏都将为你提供一条系统化、高质量的问题排查与优化路径，助力你加速成长，攻克技术壁垒，迈向技术价值最大化与职业发展的更高峰🚀！
Vue 模块化开发（构建项目&常用工具）
博客
06-04 4189
一、模块化开发——构建项目 1、全局安装 webpack (cmd窗口输入如下命令,后面不再说明) npm install webpack -g 2、全局安装 Vue 脚手架 npm install -g @vue/cli-init 3、初始化 Vue 项目 在项目文件夹下，输入如下命令，并按照提示完成操作，可以默认全部回车。 //vue 脚手架使用 webpack 模板初始化一个名为 appname 的项目 vue init webpack appname 4、启动 vue 项目.
【Vue.js 知识量化】组件化开发 + 前端模块化
萌宅鹿的技术小屋
07-19 1981
Vue.js 组件化开发组件化认识组件化注册组件全局组件和局部组件父子组件 视频：王红元老师的Vue 内容概述： 认识组件化 注册组件 组件其他补充 组件数据存放 父子组件通信 父级向子级传递 子级向父级传递 插槽slot 组件化 认识组件化 我们将一个完整的页面分成很多个组件： 每个组件都用于实现页面的一个功能块 而每一个组件又可以进行细分 Vue 组件化思想： 组件化是 Vue.js 中的重要思想，它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用 任何的应用都
VUE 入门及应用 ( 模块化 )
yuanchun的知识整理
09-18 1748
VUE 入门及应用 ( 二 ) 模块化 内部API
Vue模块化开发
wuyuecai的博客
03-12 2479
1、npm install webpack -g 全局安装 webpack2、npm install -g @vue/cli-init 全局安装 vue 脚手架3、初始化 vue 项目； vue init webpack appname：vue 脚手架使用 webpack 模板初始化一个 appname 项目4、启动 vue 项目； 项目的 package.json 中有 scripts，代表我们能运行的命令 npm start = npm run dev：启动项目 npm run build：将项目打包
Vuejs 模块化开发
baidu_41388533的博客
10-04 209
Vuejs 模块化开发 参考：最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibili 目录 Vuejs 模块化开发 JavaScript原始功能 匿名函数的解决方案 使用模块作为出口 CommonJS（了解） export基本使用 导出函数或类 export default import使用 JavaScript原始功能 匿名函数的解决方案 我们可以使用匿名函数来解决方面的重名问题 在aaa.js文件中，我们使用匿名函数 但是如果我们希望在ma.
vue模块化开发
m0_51636525的博客
11-03 4706
1.
WEB前端：vuejs全家桶（35）：模块化开发：vue-router模块化、自定义组件添加事件
weixin_43731793的博客
11-09 316
一、模块化开发 vue init webpack-simple vue-cli-demo cd vue-cli-demo cnpm install npm run dev 1. vue-router模块化 安装vue-router cnpm install vue-router -S 1.1 编辑main.js 使用vue-router、App.vue 1.2 编辑App.vue 编辑模...
vuejs学习五：v-slot插槽、模块化开发、webpack、vue格式文件
qq_28471889的博客
02-15 420
v-slot插槽、模块化开发、webpack、vue格式文件 1 v-slot 目的是为了让组件的扩展性提高 1.1 简单使用 插槽就是复用性组件的预留空间。组件抽取共性保留不同 使用slot标签定义一个插槽 slot中写的东西为该插槽默认值 <slot>插槽默认值</slot> 使用组件时在中间添加的内容会替换插槽。 <body> <div id...
vue怎么进行模块化开发
m0_73481765的博客
07-25 639
在上面的示例中，我们先引入了Vue.js与两个组件ComponentA和ComponentB。这就是使用Vue.js进行模块化开发的基本步骤。创建Vue实例：在JavaScript中，使用Vue构造函数创建一个Vue实例进行模块化开发。创建组件：使用Vue.component注册组件，创建组件模板、组件方法等。注册组件：使用Vue.component注册第五步中导入的组件。最后，我们创建了一个Vue实例，并将组件使用在模板中。导入组件：在另一个组件中导入我们创建的组件。模板中使用组件：在模板中使用组件。
vue 模块化开发_1
qq_33330414的博客
09-04 322
idea VUE 模块化开发前序工作1.安装 nodejs2.idea安装插件3.idea内搭建项目 1.安装 nodejs ps：前后端分离必备环境 下载地址 http://nodejs.cn/download/ 安装完成后打开cmd 输入node -v 或 npm -v 查看是否安装成功 2.idea安装插件 安装vue.js插件 idea > file > set...
Vue模块化开发的理解
gklcsdn的博客
11-15 977
Vue模块化是指在Vue.js开发中，将代码按功能拆分成多个独立的模块，以提高代码的可维护性、可读性和复用性。
前端-vue-模块化的开发
qq_20667511的博客
08-30 518
vue模块化的开发安装环境安装截图安装可能存在的问题模块构建vue-demo项目vue init webpack 项目名 安装环境 首先得保证你本地已经有了 node 和 npm 的环境 然后安装 npm install webpack -g npm install -g @vue/cli-init 初始化项目操作 vue init webpack appname 安装截图 安装可能存在的问题 其中，当执行 npm install -g @vue/cli-init 可能存在以下的问题 npm WAR
使用 vue 模块化开发
yh604005215的博客
05-11 1519
一、使用 vue/cli 脚手架搭建项目 之前的博客有简介 二、了解单文件组件 使用 vue/cli 脚手架搭建项目之后就可以使用 .vue 后缀的文件，我们称它为 单文件组件。 单文件组件的优点 1.可以在 vscode 中安装 vetur 插件解决 Vue.componen 没有代码高亮，在HTML编辑多行的时候不方便的缺点。 2. 可以实现作用域样式，只需要在单文件组件的 style 标签上设置 scoped 属性。 3. 可以使用现代化的 ESM 模块化更好的进行模块化开发。 一个单文件组件的组成
《Vue入门到精通系列之二》--- 组件化开发与前端模块化
热门推荐
白大锅的博客，毕设WangLoveBai_999
03-04 1万+
最全、最详细Vue入门到精通系列文章，持续更新中
[Vue] 模块化开发
m0_47652477的博客
05-12 804
重点中的重点，懂得都懂第一章 模块化开发介绍1.1 为什么需要模块化开发1.1.1 JavaScript的原始功能1.1.2 CommonJS规范(了解)1.2 ES6的module (常用)1.2.1 export和import的使用1.2.2 export default的使用第二章 Webpack2.1 Webpack介绍前端模块化打包webpack和 grunt/gulp的对比2.2 webpack安装2.3 webpack的基本使用2.4 webpack的配置2.4.1 webpack.con
ubuntu-20.04.4-desktop-amd64的光盘镜像文件
ubuntu-20.04.4-desktop-amd64的光盘镜像文件，是ubuntu官方的原版系统ISO镜像
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值