BlogMind

什么是CI/CD？CI/CD 是一种现代软件开发实践，它包含两个主要概念：持续集成（Continuous Integration）和持续交付/部署（Continuous Delivery/Deployment）。 持续集成（CI）持续集成是指开发人员频繁地将代码集成到主干分支的过程。 CI 的主要步骤123456789101112131415161718192021222324# .gitlab-ci.yml CI配置示例stages: - lint # 代码检查 - test # 单元测试 - build # 构建lint-job: stage: lint script: - npm install - npm run linttest-job: stage: test script: - npm run testbuild-job: stage: build script: - npm run build artifacts: paths: - dist/ ...

如何部署和使用公司组件库？本文介绍如何部署和使用公司内部组件库，包括发布流程、使用方式和最佳实践。 1. 组件库发布1.1 发布准备1234567891011121314// package.json{ "name": "@company/vue-components", "version": "1.0.0", "private": true, "files": ["dist"], "main": "./dist/index.umd.js", "module": "./dist/index.es.js", "types": "./dist/types/index.d.ts", "scripts": { "build": "vite buil ...

如何开发公司基建组件库？组件库是前端基础建设中的重要一环，一个好的组件库可以提高开发效率、统一用户体验。本文将介绍如何基于 Vue 3 开发一个企业级组件库。 1. 项目初始化1.1 技术选型12345678910111213{ "dependencies": { "vue": "^3.3.0", "typescript": "^4.9.0", "sass": "^1.69.0" }, "devDependencies": { "vite": "^5.0.0", "vitest": "^1.0.0", "vue-tsc": "^1.8.0", "@vitejs/plugin-vue": "^5. ...

引言人工智能(AI)正以前所未有的速度发展，从ChatGPT到DALL-E，从自动驾驶到智能医疗，AI技术正在重塑我们的生活方式和工作模式。作为21世纪最具革命性的技术之一，AI就像一把双刃剑，既能创造巨大价值，也可能带来意想不到的挑战。本文将深入分析AI发展的方方面面，帮助我们以更理性的态度看待AI技术的发展。 AI发展的积极影响1. 效率提升 工作自动化 自动处理重复性文档工作，提高办公效率 智能客服24小时在线，提升服务质量 工业自动化生产，提高产能和精确度 决策优化 大数据分析辅助决策，降低决策风险 预测模型提供决策参考，提高准确率 实时数据处理，支持快速响应 资源配置 智能调度系统优化物流配送 能源使用智能管理，降低资源浪费 智能算法优化人力资源分配 2. 创新突破 医疗健康 AI辅助诊断提高疾病识别准确率 药物研发周期大幅缩短 个性化治疗方案制定 远程医疗服务普及 科研进展 加速科学计算和模拟 发现新材料和新物质 气候变化预测更准确 空间探索取得新突破 产品创新 智能产品快速迭代 个性化定制更便捷 新产品研发周期缩短 用户体验持续优化 ...

一、axios的使用关于axios的基本使用，上篇文章已经有所涉及，这里再稍微回顾下： 发送请求 1234567891011121314import axios from 'axios';axios(config) // 直接传入配置axios(url[, config]) // 传入url和配置axios[method](url[, option]) // 直接调用请求方式方法，传入url和配置axios[method](url[, data[, option]]) // 直接调用请求方式方法，传入data、url和配置axios.request(option) // 调用 request 方法const axiosInstance = axios.create(config)// axiosInstance 也具有以上 axios 的能力axios.all([axiosInstance1, axiosInstance2]).then(axios.spread(response1, response2))// 调用 all 和传入 spread 回调 请求 ...

1. 基本原理双向绑定主要包含两个方向的数据同步： 数据层（Model）到视图层（View）的绑定 视图层（View）到数据层（Model）的绑定 2. 实现机制主要通过三个重要部分实现： 数据劫持（Observer） 1234567891011121314151617181920// 通过 Object.defineProperty 实现数据劫持function defineReactive(obj, key, val) { const dep = new Dep(); Object.defineProperty(obj, key, { get() { // 依赖收集 if (Dep.target) { dep.addDep(Dep.target); } return val; }, set(newVal) { if (newVal === val) return; val = newVal; // ...

一、设计目标不以解决实际业务痛点的更新都是耍流氓，下面我们来列举一下Vue3之前我们或许会面临的问题 随着功能的增长，复杂组件的代码变得越来越难以维护 缺少一种比较「干净」的在多个组件之间提取和复用逻辑的机制 类型推断不够友好 bundle的时间太久了 而 Vue3 经过长达两三年时间的筹备，做了哪些事情？ 我们从结果反推 更小 更快 TypeScript支持 API设计一致性 提高自身可维护性 开放更多底层功能 一句话概述，就是更小更快更友好了 更小Vue3移除一些不常用的 API 引入tree-shaking，可以将无用模块“剪辑”，仅打包需要的，使打包的整体体积变小了 更快主要体现在编译方面： diff算法优化 静态提升 事件监听缓存 SSR优化 下篇文章我们会进一步介绍 更友好vue3在兼顾vue2的options API的同时还推出了composition API，大大增加了代码的逻辑组织和代码复用能力 这里代码简单演示下： 存在一个获取鼠标位置的函数 12345678910111213141516import { toRefs, reacti ...

开始之前Composition API 可以说是Vue3的最大特点，那么为什么要推出Composition Api，解决了什么问题？ 通常使用Vue2开发的项目，普遍会存在以下问题： 代码的可读性随着组件变大而变差 每一种代码复用的方式，都存在缺点 TypeScript支持有限 以上通过使用Composition Api都能迎刃而解 正文一、Options ApiOptions API，即大家常说的选项API，即以vue为后缀的文件，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑 如下图： 可以看到Options代码编写方式，如果是组件状态，则写在data属性上，如果是方法，则写在methods属性上… 用组件的选项 (data、computed、methods、watch) 组织逻辑在大多数情况下都有效 然而，当组件变得复杂，导致对应属性的列表也会增长，这可能会导致组件难以阅读和理解 二、Composition Api在 Vue3 Composition API 中，组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放 ...

一、组件设计组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式 现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同 这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可 这样，下次开发相同界面程序时就可以写更少的代码，意义着更高的开发效率，更少的 Bug 和更少的程序体积 二、需求分析实现一个Modal组件，首先确定需要完成的内容： 遮罩层 标题内容 主体内容 确定和取消按钮 主体内容需要灵活，所以可以是字符串，也可以是一段 html 代码 特点是它们在当前vue实例之外独立存在，通常挂载于body之上 除了通过引入import的形式，我们还可通过API的形式进行组件的调用 还可以包括配置全局样式、国际化、与typeScript结合 三、实现流程首先看看大致流程： 目录结构 组件内容 实现 API 形式 事件处理 其他完善 目录结构Modal组件相关的目录结构 12345678910111213├── plugins│ └── modal│ ...

一、组件是什么回顾以前对组件的定义： 组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件 组件的优势 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级 二、插件是什么插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种： 添加全局方法或者属性。如: vue-custom-element 添加全局资源：指令/过滤器/过渡等。如 vue-touch 通过全局混入来添加一些组件选项。如 vue-router 添加 Vue 实例方法，通过把它们添加到 Vue ...