45.vue模块化

已于 2022-03-09 18:13:23 修改
阅读量277 收藏
点赞数
分类专栏： 从头开始学编程 文章标签： vue
于 2020-11-30 11:37:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40594696/article/details/110193921
版权
本文探讨了前端代码中模块化的重要性，旨在解决全局变量冲突和代码复用的问题。文章介绍了模块化的必要性，并详细讲解了CommonJS、AMD、CMD以及ES6 Modules等常见的模块化规范。特别是对ES6的导入导出机制进行了深入解析，包括type='module'的使用，export用于导出模块，import用于导入模块。
摘要由CSDN通过智能技术生成

目录

一、为什么需要模块化

二、常见的模块化规范

三、ES的导入导出

一、为什么需要模块化

以前的前端代码有两个问题：

（1）.全局变量会被不同的地方赋值。比如我创建一个全局flag，值为true，我要用的时候发现为false，原来公司同事把我这个在他那边变了false，就很困扰。针对全局变量被不同赋值，我们通过匿名内部类

（2）虽然上面问题解决了，又有新问题：我匿名内部类的代码我想复用又不行了。解决方案：运用面向对象思想进行模块化开发

二、常见的模块化规范

既然要用模块化了，肯定要遵循规范，常见规范：

  • CommonJS
  • AMD
  • CMD
  • ES6的Modules

三、ES的导入导出

1.type="module"

2.export：导出

了解本专栏 订阅专栏 解锁全文 超级会员免费看
鹏哥哥啊Aaaa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue模块化开发
m0_51636525的博客
11-03 4384
1.
Vue模块化（一）
GODYEARS的博客
06-17 222
核心为：导入、导出 CommonJs： 1.导出 module.exports = { flag:true, test(a, b) { return a + b } demo(a, b) { return a * b } } 2.导入 let { test, demo, flag} = require('modu.js') //modu.js为文件路径 ...
Vue模块化
qq_46258465的博客
08-27 276
Vue模块化 1 模块化思想 有很多模块化思想 commo js AMD CMD ES6 … 模块化不仅可以帮助我们解决作用域问题，代码管理，提高代码质量等问题还可以减少我们在开发过程中出现的"冲突"。 2 模块间的访问 2.1 {}式导入引用 2.1.1 导入 import {flag,num1} from "./01模块间的访问b"; if (flag){ console.log(num1); } 2.1.2导出 let num1=100; let flag=true; e
3.Vue模块化
海里寻因的博客
11-05 1978
模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块（方便代码的重用，从而提升开发效率，并且方便后期的维护） 服务器端模块化规范 CommonJS: 模块分为单文件模块与包 模块成员导出：module.exports和exports 模块成员导入：require('模块标识符‘) ES6模块化的基本语法： 默认导出与导入： 默认导出语法：export default 默认导出的成员 //当前文件模块m1.js //
Vue-模块化
张锦的博客
04-23 4188
记录学习的点点滴滴
vue-multipage vue 模块化开发打包
11-23
Vue-multipage 就是针对Vue.js 应用的多页面模块化构建工具。它结合了Webpack等现代前端构建工具，使得在Vue.js应用中实现多页面开发变得更为简单。 Webpack 是一个模块打包器，它能够将JavaScript、CSS、图片等...
Vue路由模块化配置的完整步骤
10-16
Vue 路由模块化配置是提升 Vue 应用可维护性和组织性的关键步骤，尤其在大型项目中，路由管理的模块化变得至关重要。本文将详细介绍如何实现Vue路由的模块化配置，分为两种方案（Plan A 和 Plan B），并提供实际的...
vue.js和vue.min.js
06-13
Vue.js还有其他版本，如vue.common.js（适用于CommonJS环境，如Node.js）和vue.esm.js（ES模块化版本，适合现代浏览器）。选择哪个版本取决于你的项目需求和所使用的构建工具。 5. 结合构建工具： 在大型项目中，...
Com.Vue学习内容
最新发布
01-25
再者，Vue支持模块化，允许开发者按照自己的需求定制开发。最后，Vue社区活跃，有大量的学习资源和开源项目。 总的来说，Vue是一种功能强大且易于使用的JavaScript框架，无论是构建单页应用还是创建各种UI组件，都...
vue 搭建后台系统模块化开发详解
10-17
Vue.js 模块化开发是现代前端开发中的一个重要实践，它可以帮助我们构建可维护性更强、结构更清晰的后台管理系统。在本篇“Vue 搭建后台系统模块化开发详解”中，我们将深入探讨如何利用 Vue.js 搭建一个模块化的...
VUE 入门及应用 ( 模块化 )
yuanchun的知识整理
09-18 1333
VUE 入门及应用 ( 二 ) 模块化 内部API
vue模块化
weixin_45179978的博客
11-21 254
vue模块化模块化开发不使用模块化带来的问题CommonJSes6的模块化的导出和导入export的基本使用：export default导出统一全部导出 模块化开发 不使用模块化带来的问题 初始模块化思想： CommonJS es6的模块化的导出和导入 export的基本使用： export default导出 统一全部导出 ...
前端基础（Vue的模块化开发）
MRJJ_9的博客
08-19 953
Vue项目搭建、模块化开发
Vue笔记：Vue模块化
qq_43005779的博客
06-17 470
webpack中使用Vue的配置过程 安装Vue的三种方式 1、直接下载应用 2、CDN引入 3、npm 配置 1、用npm安装vue npm install --save vue 2、在main.js中引入vue import Vue from 'vue' const app=new Vue({ el:'#app', data:{ message:'hello world' } }) 3、配置webpack.js module.export={ resolve:{ a
Vue | 简单模块化
GC怪兽的Blog
02-27 289
// 项目结构 ├── index.html ├── button-success.js └── app.js index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&amp
Vue-模块化（三）
YYZ_Obsessiveness的博客
10-16 230
常见的模块化规范 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.
Vue - 模块化开发
qq_33962481的博客
08-06 205
文章目录一、 一、
Vue模块化管理
贪睡的小聪
05-14 5708
Vue模块化管理 一般vue文件: <!-- 渲染模板 --> <template> <div></div> </template> <!-- 脚本执行代码 --> <script> export default{ name:'', data(){ r...
Webpack与Vue模块化开发与实战指南
Webpack的核心理念是模块化开发，不仅支持JavaScript，还包括CSS、图片和JSON等资源，将其视为模块进行管理和打包。 在项目开发中，直接将所有文件上传到服务器并不适用，因为服务器可能不支持这些未经处理的原始...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鹏哥哥啊Aaaa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值