前端模块化规范通常来说，一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD、UMD以及ES6的模块系统。 AMD / CMD / CommonJs 是JS模块化开发的标准规范，目前对应的实现是 RequireJs / SeaJs / nodeJs 简介CommonJS CommonJS用同步的方式加载模块。在服务端，模块文件都存放在本地磁盘，读取非常快，所以这样做不会有问题。但是在浏览器端，限于网络原因，更合理的方案是使用异步加载。 NodeJS 是 CommonJS 规范的主要实践者 有4个重要的环境变量为模块化实现提供支持 module exports 12345678910// 定义模块math.jsvar total = 10;function add(a, b) { return a + b;}// 需要向外暴露的函数、变量module.exports = { add: add, total: to ...

nrmnrm（npm registry manager）是npm的镜像管理工具 能帮助你在加载国外的资源太慢时快速切换npm源 安装npm install -g nrm，全局安装nrm 使用查看所有源1nrm ls 显示类似以下信息 1234567* npm ---------- https://registry.npmjs.org/ yarn --------- https://registry.yarnpkg.com/ tencent ------ https://mirrors.tencent.com/npm/ cnpm --------- https://r.cnpmjs.org/ taobao ------- https://registry.npmmirror.com/ npmMirror ---- https://skimdb.npmjs.com/registry/ huawei ------- https://repo.huaweicloud.com/repository/npm/ 其中 * 号表示当前使用的源。 切换源相比 npm config set ...

我的 Vue3 文档内置标签component 动态组件 根据 currentTabComponent 的值判断是否要渲染组件 1<component v-bind:is="currentTabComponent"></component> keep-alive 每次切换新标签的时候，Vue 都会创建一个新的 currentTabComponent 实例。 1234<!-- 失活的组件将会被缓存！--><keep-alive> <component v-bind:is="currentTabComponent"></component></keep-alive> slot⭐ 子组件的占位符 在父组件引用的中 写入的内容 会被 插进子组件内 并渲染回父组件 12345678910<!-- 父组件 --><Button> <div>这是默认插槽的内容</div></Button><!- ...

PostCSSPostCSS中文网 处理CSS代码的工具，通过一系列的插件来实现最新的CSS特性 插件介绍Autoprefixer 兼容各种浏览器特有的前缀 1box-sizing: border-box; 12-webkit-box-sizing-moz-box-sizing PostCSS-Preset-Env 使用最新的CSS特性，转移为主流浏览器支持的版本 1234567.box{ background: #000000; &:hover{ background: #000000; }} 123.box:hover{ background: #000000;} Autoprefixer 兼容各种浏览器特有的前缀 1box-sizing: border-box; 12-webkit-box-sizing-moz-box-sizing

Monorepo架构策略 更高效的代码共享和管理 为什么使用项目不断膨胀 -> 构建速度↓↓↓ -> 包体积↑↑↑ -> 性能越来越慢 比如说想开发一个组件库，我在开发时需要启动 单组件测试、页面预览 两个服务，也就是需要在两个或多个项目中复用内部组件和逻辑，这时候我们就需要Monorepo架构来优化项目。 简要概述项目结构 (以我的组件库项目为例) 123456789101112131415161718192021root├── node_modules/├── ......│├── packages│ ├── components（组件实现）│ ├── node_modules/│ ├── ......│ └── package.json│ ├── docs（项目一：组件库页面）│ ├── node_modules/│ ├── ......│ └── package.json│ └── play（项目二：组件测试页面）│ ├── node_modules/│ ...

Plugins 开发插件 | Vue.js 前言Vue3中，一个插件通常是一个对象 通常我们开发的插件通过全局导出 1export default myPlugin 从而在项目的入口文件中使用 1app.use(myPlugin) 基础开发plugins/MyButton.vue123<template> <button>我的按钮</button></template> index.ts123456import MyButton from './MyButton.vue'export default{ install:(app,options)=>{ app.component('myButton', MyButton) }} main.js123import MyButton from './plugins/MyButton.ts'create(App).use(MyButton).m ...

npm发布准备工作下载nrm 详情见文章 打开npm官网 npm | Home 我们需要先注册一个账号 主流程转换npm源 1nrm use npm 连接npm账号 1npm login 确认账号登录状态 1npm whoami cd到你需要发布的包/构建产物 比如说我的组件库项目产物位于packages\core 1cd .\packages\core\ 至此，先确认我们即将发布的包 packages\core\package.json 123456{ "name": "veyra", "version": "1.0.0", "description": "使用 Vue3 + Ts 构建的组件库", ...} 名称 不能和他人已发布过的包名重名 版本 如果是初次发布 “version”: “1.0.0” 即可 若是自己已发布过的包要更新版本 (如”1.0.1”) 详情请看到文章最后“关于版本号” 在确认 ...

项目结构1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012 ...

Tooltip 文字组件 导出的类型1. TooltipProps 描述: Tooltip 组件的 props 配置。 字段: content?: string提示框显示的内容文本。 trigger?: 'hover' | 'click' | 'contextmenu'触发方式（默认 'hover'）。 placement?: PlacementPopper.js 的定位策略（如 'bottom'）。 manual?: boolean是否手动控制显示（默认 false）。 disabled?: boolean是否禁用组件（默认 false）。 popperOptions?: Partial<Options>Popper.js 的配置选项。 transition?: string过渡动画名称（默认 'fade'）。 showTimeout?: number显示延迟（默认 0）。 hideTimeout?: number隐藏延迟（默认 200）。 2. TooltipEmi ...