bus_lupe的博客

原创 29、引入全局样式和安装配置Axios跨域代理转发

npm安装@nuxtjs/axios包含了axios和@nuxtjs/proxy代理转发。

原创 27、Nuxt.js项目整合ElementUI组件库

【代码】27、Nuxt.js项目整合ElementUI组件库。

原创 25、介绍项目使用的技术栈和创建项目

原创 22、什么是中间件和权限拦截中间件实操

【代码】22、什么是中间件和权限拦截中间件实操。

原创 21、嵌套路由实战操作

1、创建内嵌子路由，你需要添加一个vue文件，同时添加一个与该文件同名的目录用来存放子视图组件。2、在父组件（.vue）内增加用于显示子视图内容。

原创 20、动态路由_下滑线为前缀的目录

【代码】20、动态路由_下滑线为前缀的目录。

原创 19、动态路由_下划线为前缀的文件

【代码】19、动态路由_下划线为前缀的文件。

原创 18、基础路由和nuxt-link路由跳转

目前 < nuxt-link> 的作用和 < router-link> 一致，推荐阅读 Vue 路由文档 来了解它的使用方法。Nuxt.js依据pages目录结构自动生成vue-router模块的路由配置，不需要我们去额外的配置路由。nuxt-link 组件用于在页面中添加链接至别的页面。

原创 15、Nuxt.js代理转发解决跨域问题

【代码】15、Nuxt.js代理转发解决跨域问题。

原创 14、$axios异步加载数据asyncData

没有账号直接输入账号、密码登录会自动创建，没有修改密码的入口需要保存好账号密码。

原创 13、插件同时注入到Context、Vue实例

【代码】13、插件同时注入到Context、Vue实例。

原创 【无标题】

【代码】【无标题】

原创 11、插件注入到vue实例中

【代码】11、插件注入到vue实例中。

原创 10、设置视图组件的Head页面头部标签信息

【代码】10、设置视图组件的Head页面头部标签信息。

原创 9、定义错误页

在layouts目录下新建error.vue，可以通过layout函数使用布局文件，通过props: [“error”]能拿到错误信息对象。

原创 8.自定义组件布局和详解Context上下文

如果布局文件是在某个目录下比如layouts/blog/index.vue，在使用的时候则需要返回"blog/index"2、在页面中的layout函数里，返回刚才新建布局文件的名字blog就可以使用了。1、在项目的目录下新建layout文件夹，并新建一个blog.vue布局文件。layout布局运行在服务端。

原创 脚手架开发流程详解

带params的options: --path /Users/sam/Desktop/vue-test。options全称：–version、–help。options简写：-V、-h。示例：vue 的帮助信息。

原创 vite中使用css的各种功能

vite中使用css的各种功能

原创 Vite 创建vue3项目

【代码】Vite 创建vue3项目。

原创 “use strict“； var _interopRequireDefault = require(“@babel/runtime/helpers/interopRequireDefault“)；

import-html-entry

原创 7-1 框架发布 - 通过npm发布框架

npm 发布

原创 6-13 提高加载性能 - 应用缓存

提高加载性能

原创 6-10 全局状态管理 - 全局store

全局状态管理

原创 6-9 应用间通信 - 子应用通信

应用2注册test1监听事件，并在回调函数中触发test2监听事件应用1注册test1监听事件，触发test2监听事件

原创 koa-compose解析

koa

原创 6-6应用间通信 - 父子通信

propscustomeventhttps://developer.mozilla.org/zh-CN/docs/Web/API/CustomEventexport class Custom { // 事件监听 on (name, cb) { window.addEventListener(name, (e) => { cb(e.detail) }) } // 事件触发 emit(name, data) { const event = .

原创 6-5 css样式隔离

css moduleswebpackshadow dom <div id="box1"></div> <div id="box2"></div> <script> const box1 = document.getElementById('box1') // 开启shadow dom模式 const shadow1 = box1.attachShadow({mod..

原创 5-3 微前端框架-路由拦截

// 重写window的路由跳转export const rewriteRouter = () => { window.history.pushState = patchRouter(window.history.pushState, 'micro_push') window.history.replaceState = patchRouter(window.history.replaceState, 'micro_replace') window.addEventListener('

原创 4-11 子应用接入微前端vue2

修改vue.config.jsmodule.exports = { ... output: { // 把子应用打包成 umd 库格式 commonjs 浏览器，node环境 library: `${packageName}`, libraryTarget: 'umd', }, },};main.js修改main.js暴露bootstrap开始、mount挂载、unmount卸载生命周期import Vue from 'vue'im

原创 4-8 构建后端服务

koa全局安装koa生成器npm install koa-generator -g创建项目koa2 service安装依赖cd servicenpm install执行服务npm run start监听文件改动自动重启npm install supervisor --save-dev修改package.json， 使用supervisor代替node{ "name": "service", "version": "0.1.0", "pri

原创 4-7 自启动子应用脚本

package.json{ "name": "micro-web-project", "version": "1.0.0", "description": "create micro project for myself", "main": "index.js", "scripts": { "start": "node ./build/run.js" }, "author": "yancy", "license": "ISC", "devDependencies

原创 3-3 绘制项目架构图

分析需求主子应用的功能主应用注册子应用加载、渲染子应用路由匹配（activeWhen, rules - 有框架判断）获取数据（公共依赖，通过数据做鉴权处理）通信（父子通信，子父通信）子应用的功能渲染监听通信（主应用传递过来的数据）微前端框架子应用的注册有开始内容（应用加载完成）路由更新判断匹配对应的子应用加载子应用的内容完成所有依赖项的执行将子应用渲染在固定的容器内公共事件的管理异常的捕获和报错全局的状态管理的内容沙箱的隔离通信机制服务端的功能提供数据

原创 3-2 技术选型 - 确定技术栈

应用主应用子应用后端服务和发布应用主应用 - vue3vue2子应用实现新能源页面vue3 子应用首页选车react15子应用资讯视频视频详情react16子应用新车排行登录服务端接口Koa实现发布应用express...

原创 3-1 微前端实现方式对比

1. Iframe优势：技术成熟支持页面嵌入天然支持运行沙箱隔离、独立运行劣势页面之间可以是不同的域名需要对应的设计一套应用通讯机制，如何监听、传参格式等内容应用加载、渲染、缓存等体系的实现2. web component优势支持自定义元素支持shadow dom，并可通过关联进行控制支持模板template和插槽slot，引入自定义组件内容劣势接入微前端需要重写当前项目生态系统不完善，技术过新容易出现兼容性问题整体架构设计复杂，组件与组件之间拆分过细时，容

原创 2-10 系统重构

系统重构架构不是永恒不变的。架构也是具有生命周期的。也会经历出生、发展、巅峰、衰弱、消亡的过程。什么是重构？对软件内部结构的一种调整。目的是在不改变软件可观察行为的前提下，提高其可理解性，降低其修改成本。实现方式使用一系列重构手法，在不改变软件可观察行为的前提下，调整其结构。重构理念：运用大量微小且保持软件行为的步骤，一步步达成大规模的修改。早期系统优势开发速度快代码复杂度低代码规范都保持完好严格注重开发规范，不会允许危及架构设计的代码产生以上因素导致添加功能难

原创 2-9 技术填补与崩溃预防

预防架构崩溃架构崩溃是严重的架构设计事故，也是我们需要预防的关键所在。系统崩溃的产生日志记录，如：操作日志、错误日志、业务日志等。用户行为抓取→争取在最新时间获取用户操作链条。解决存量问题→技术债务。遏制新增→减少新增问题的概率。对脏数据进行兜底和检验。单元测试。崩溃报警。自动化测试。更广的灰度触达。性能优化体系。...

原创 2-8技术填补与崩溃预防

千里之堤毁于蚁穴技术债务填补与崩溃预防技术填补-问题1开发过程中因为时间紧迫导致的实现不合理举例：查找10000以内的质数循环的方法：筛选法技术填补-问题2暂时没有想到更好的实现方法而妥协的版本刚开始使用if…else实现演变为使用责任链模式技术填补-问题3架构设计前期没有考虑到的细节交互细节- > props的传递参数（交互冗余，流程较长）使用全局状态管理实现参数的传递技术填补-问题4不合理的交互设计，导致技术实现复杂技术填补-问题5旧功能文档缺

原创 2-7架构前期准备

正确的选择是良好的开端——架构前期准备架构师分类系统架构师应用架构师业务架构师系统架构师从系统的维度，负责整体系统的架构设计主要是基础服务和各系统间协调，着眼全局比如关注负载，可靠性，伸缩，扩展，整体项目切分，缓存应用等方面的基础架构设计应用架构师从应用程序的维度，负责某个应用的技术架构，主要偏业务系统关注理解业务，梳理模型，设计模式，接口，数据交互等方面业务架构师从业务流程的维度，关注某一个行业、业务的领域分析，获取领域模型，最终获得系统的模型。也可以叫业务领域专

原创 2-6架构设计的质量-健壮性和稳定性

如何保证架构的质量系统的稳定性定义：当一个实际的系统处于一个平衡的状态时，如果收到外来作用的影响时，系统经过一个多过渡过程仍然能够回到原来的平衡状态，我们称这个系统就是稳定的，否则称系统不要稳定。架构设计的基石。可以更好的实现自我修复。系统的健壮性定义：计算机软件在输入错误、磁盘故障、网络过载或有意攻击情况下，能否不死机、不崩溃，就是该权健健壮性的具体表现。解释：一个系统的容错能力强，运行不易被干扰，安全性好。系统的健壮性的度量标准一个软件可以从错误的输入推断出正确合

原创 2-5软件设计分层

系统级架构应用在整个系统内，如与后台服务如何通信，与第三方系统如何集成。设计前端首要条件：了解前端系统与其他系统之间的关系。关系包括：业务和协作机制。设计后端：只需要规定与后台数据传递的机制。包括：api设计规则，访问授权的一个开放标准（OAuth）跳转token的验证，数据传递cookie等。前端与后端的关系考虑的主要因素是：前后端分离的架构设计。前后端分离架构其实是如何实施技术决策，用于鉴权、API接口管理和设计、API文档管理、Mock的使用、BFF（服务与前端的后端，nodejs）.