Vue的模块化开发

最新推荐文章于 2023-07-25 22:04:41 发布
最新推荐文章于 2023-07-25 22:04:41 发布
阅读量668 收藏
点赞数 1
文章标签： javascript vue.js node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chil_G/article/details/120258762
版权
随着客户端功能复杂度增加，代码量急剧增长，模块化成为管理代码的重要手段。文章讨论了传统方式下变量重名导致的问题，以及闭包解决重名但降低代码复用性的矛盾。提出使用模块作为出口，通过在匿名函数内定义对象并暴露所需属性和方法来解决这一问题，使得在main.js等其他文件中能更方便地使用特定模块的成员。
摘要由CSDN通过智能技术生成

一、为什么需要模块化

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

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

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

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

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

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

解决方案：

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

最低0.47元/天 解锁文章
Chil_G
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue模块化开发
m0_51636525的博客
11-03 4387
1.
Vue模块化开发
wuyuecai的博客
03-12 2130
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：将项目打包
Vue.js—模块化开发
weixin_44768794的博客
03-31 238
模块化开发初识前端模块化1.1 使用模块作为出口1.2 CommonJsES6模块化的导入和导出2.1 export指令2.2 import导入指令 初识前端模块化 ■ 在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。 □ 那个时候的代码是怎么写的呢？直接将代码写在1.1 使用模块作为出口 var ModuleA = (function(){ var obj = {} obj.flag = true obj.sum = function(in
vue-multipage vue 模块化开发打包
11-23
在大型项目中，为了更好地管理代码，提高可维护性和复用性，开发者通常会选择模块化开发。Vue-multipage 就是针对Vue.js 应用的多页面模块化构建工具。它结合了Webpack等现代前端构建工具，使得在Vue.js应用中实现多...
vue 搭建后台系统模块化开发详解
10-17
Vue.js 模块化开发是现代前端开发中的一个重要实践，它可以帮助我们构建可维护性更强、结构更清晰的后台管理系统。在本篇“Vue 搭建后台系统模块化开发详解”中，我们将深入探讨如何利用 Vue.js 搭建一个模块化的...
vue开发直线vue开发工具
最新发布
06-05
beeline-vue-devtools-main，从这个文件名来看，可能是"蜜蜂线Vue开发工具"的主要模块或核心部分。"蜜蜂线"可能是一种形象化的命名，暗示了这款工具能像蜜蜂一样精准、高效地协助开发者工作。Vue DevTools 是一个...
vite+vue3使用模块化批量发布Mockjs接口
03-29
综上所述，"vite+vue3使用模块化批量发布Mockjs接口"是一个全面的前端开发流程，涉及到Vite的配置、Vue3的组件开发以及Mockjs的接口模拟，旨在提供一个高效、便捷的开发环境，同时保持代码的清晰结构和良好的可维护...
Vue 模块化开发（构建项目&常用工具）
博客
06-04 3596
一、模块化开发——构建项目 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学习之模块化开发
q370786406的博客
09-08 302
为什么使用模块化 JavaScript原始功能 js作为一种脚本语言，做一些简单的表单验证和动画实现，代码中使用常用的模块化规范 CommonJS 、AMD、CMD、Modules（ES6） 模块化的核心：导入和导出 CommonJS规范 导入： module.exports = { flag : true, test(a, b){ retur a+b; } } 导出： //CommonJS模块 let { test, demo, flag } = require('moduteA')
Vue实战中的模块化开发
郭育培的博客
11-30 2851
最近从APP开发转向了Web后台管理平台的开发，在经受了半年多的APP开发的折磨之后终于迎来了春天，再也不用自己梳理业务、绘制原型、设置。 使用的技术：Vue 使用的UI库：若依 api: axios 虽然这种后台管理系统都比较简单，多数页面都是重复重复再重复，但是在开发过程中如果用心去写，去总结还是会有很多收获的。 ...
vue-vuex的模块化开发
置酒天晴的博客
11-11 439
身为小白的我就不具体介绍vuex模块化的因为所以了，单纯是自己看会舒服很多。 接下来就给大家奉上小弟修改过很多次的vuex模块化思路。 以下便是项目结构 丨- store     丨- modules         丨- item.js 丨- index.js 丨- type.js index.js 为 vuex 的入口，负责暴露vuex import Vue from 'vue'
vue 模块化开发
qq_45464015的博客
01-14 354
vue 模块化开发
vue怎么进行模块化开发
m0_73481765的博客
07-25 503
在上面的示例中，我们先引入了Vue.js与两个组件ComponentA和ComponentB。这就是使用Vue.js进行模块化开发的基本步骤。创建Vue实例：在JavaScript中，使用Vue构造函数创建一个Vue实例进行模块化开发。创建组件：使用Vue.component注册组件，创建组件模板、组件方法等。注册组件：使用Vue.component注册第五步中导入的组件。最后，我们创建了一个Vue实例，并将组件使用在模板中。导入组件：在另一个组件中导入我们创建的组件。模板中使用组件：在模板中使用组件。
vue模块化开发理解
08-31
- *3* [Vue模块化开发](https://blog.csdn.net/qq_43460335/article/details/123964102)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值