Moon Star

基于 qiankun + vite + vue3 构建微前端应用

elementUI 不支持年份范围的选择器，手动实现此组件；

data 中以 $、_ 开头的属性不会被代理到 this 上，但是可以通过 _data、$data 访问因为 this 上没有 $、_ 的属性，所以 watch 也无法监听 $、_ 属性的变化由于 vm._data 被 defineReactive 处理过，所以可以通过 watch _data.$xxx、_data._xxx 监听属性的变化。

使用 js 实现文本展开、收起。

将vue2的Echarts代码迁移到了vue3项目上，引发的问题。

实现elementUI的el-table自适应高度，并解决设置fixed列时带来的问题。

随着vscode以及vue的越来越普及，vetur这个名字也越来越被人熟知。vetur是一个vscode插件，用于为.vue单文件组件提供代码高亮以及语法支持。可是由于众所周知的原因，vue以及vetur对于ts的支持，并不友好。在@vue/composition-api这个插件 出来之前，vue2的ts需要使用vue-prototype-decorator这个插件，来通过装饰器的模式进行模拟，但是由于不是从底层支持，因此vue2的ts使用体验可谓是一塌糊涂。在2020年9月18日，vue3-.

修改elementUI代码为dialog添加全屏功能

若依二次开发，不同角色访问对应不同的首页，访问地址“/”一直跳转到404页面的问题。​

提示：CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory其他方案：

写在前面虽然说Fetch API已经使用率已经非常的高了，但是在一些老的浏览器还是不支持的，而且axios仍然每周都保持2000多万的下载量，这就说明了axios仍然存在不可撼动的地位，接下来我们就一步一步的去封装，实现一个灵活、可复用的一个请求请发。这篇文章封装的axios已经满足如下功能：无处不在的代码提示； 灵活的拦截器； 可以创建多个实例，灵活根据项目进行调整； 每个实例，或者说每个接口都可以灵活配置请求头、超时时间等； 取消请求（可以根据url取消单个请求也可以取消全部请求）。

selection-change事件：当选择项发生变化时会触发该事件（当分页切换时，选中的数据都会自动情况）分页多选在el-table中添加:row-key="getRowKeys"<el-table ref="form" :model="form" :row-key="getRowKeys" @selection-change="handleChange"></el-table>getRowKeys(row..

效果如图所示：添加的时候，增加一个成员； 删除的时候，删除对应的成员；其他不变。list 循环时候，key的值很重要；如果选取 index 作为key的话，当删除成员的时候，由于index更新，使被删除的input的值仍然存在在对应index的input中。（成员1,2,3；当删除2时，成员2的值会在继续在index为2的位置（即成员3）中出现）这里是使用 “list.length” - "index" 作为 key，每次成员数量更新的时候，length都是不同，可以保证删除成员时，其他

为了类型推论，让我们在使用属性的时候获取更丰富的类型提示，比如在这里我们定义了一个属性 list，使用 vue 默认的 Array，只能确定它是一个数组类型，不能确定数组里面的每一项到底是什么样子的。你在 setup 中，看 props.list 就是一个any数组，但是如果使用PropType <ColumnProps[]> 这个时候，props.list 就变成一个 ColumnProps 的数组，你使用它的时候不论在 ts 中还是模版中都能获得类型的推断和自动补全等等。 属性...

效果：点击左侧索引菜单，使右侧内容跳转过去。如果用户滚动右侧内容，左侧菜单不随之滚动因为是在弹窗内部做实现，所以无法使用锚点实现；1. 布局css// 字体等无关的样式代码省略了.container { // 外部容器 overflow-y: auto; position: relative; $catalog-width: 132px; .container __catalog { // 左侧 position: sticky;

1. 监听非对象的属性 监听props-msg和data，分别是String和Number属性；可以正常监听到变化// Parent<template> <div id="app"> <HelloWorld :msg="msg" /> </div></template><script>import HelloWorld from "./components/HelloWorld.vue";ex...

Vue代理在Vue项目中配置了代理，但是部署之后不生效，并且报404；这是因为Vue配置的代理仅在本地开发下有效；部署之后，需要：在nginx中进行配置代理 或者后端配置跨域；devServer: { port: 7000, open: true, overlay: { warnings: false, errors: true, }, proxy, }...

defineComponent函数，只是对setup函数进行封装，返回options的对象；export function defineComponent(options: unknown) { return isFunction(options) ? { setup: options } : options}defineComponent最重要的是：在TypeScript下，给予了组件正确的参数类型推断 。defineComponent测试用例test/types/defin..

1. Plugins在plugins目录下添加文件：vue-leaflet.jsimport Vue from "vue";import { LMap, LTileLayer, LMarker } from "vue2-leaflet";import "leaflet/dist/leaflet.css";// 注册需要用到的组件Vue.component("l-map", LMap);Vue.component("l-tile-layer", LTileLayer);Vue.compo

业务：header（fixed定位）在顶部时是transparent的，当scroll触发，添加背景色；再次移动到顶端还是transparent的。depository：TYXX下面这一段代码，在组件卸载后destroyed会执行，但是scroll还是会继续触发。created() { window.addEventListener("scroll", this.throttle());},destroyed() { window.removeEventListener("sc.

问题：// template<div class="scheme-tab" v-for="(tab,index) in tabs" :key="tab.id">// JSasync created() { this.tabs = await this.fetchSolutionTypes(); console.log(JSON.stringify(this.tabs)); // 有数据},mounted() { console.log(JSON.s

不生效mounted() { window.onbeforeunload = function (e) { confirm('exit?') }}mounted() { window.onbeforeunload = ()=>{ this.close(); //自定义methods的close方法 }}生效mounted() { window.onbeforeunload = function (e) { e =

背景/home：项目首页，同步路由/uc/profile：个人信息页，异步路由，登录后根据用户角色展示。/login?redirect=%2Fuc%2Fprofile（%2F是/ 的url转义） ：登录页，同步路由，在个人信息页退出登录会进入登录页并携带redirect=/uc/profile，再次登录成功后，直接进入个人信息页项目：基于vue-element-admin，对权限菜单，异步路由，Mock文件都已经写好了。只需要根据需求修改就可以！最开始项目没有配置重定向404..

场景还原当某个场景中vue-router从/post-page/a，跳转到/post-page/b。然后我们惊人的发现，页面跳转后数据竟然没更新？！原因是vue-router”智能地”发现这是同一个组件，然后它就决定要复用这个组件，所以你在created函数里写的方法压根就没执行。通常的解决方案是监听$route的变化来初始化数据，如下：data(){return{l...

官方注册过滤器的方式：exportdefault{data(){return{}},filters:{orderBy(){// doSomething},uppercase(){// doSomething}}}但是我们做项目来说，大部分的过滤器是要全局使用的，不会每每用到就在组件...

一般情况，需要使用组件的场景：<template><BaseInputv-model="searchText"@keydown.enter="search"/><BaseButton@click="search"><BaseIconname="search"/></BaseBut...

有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器resize的时候我们希望图表也进行resize，因此我们会在父容器组件中写：这样子图表组件如果跟父容器组件不在一个页面，子组件的状态就被放到父组件进行管理，为了维护方便，我们自然希望子组件的事件和状态由自己来维护，这样在添加删除组件的时候就不需要去父组件挨个修改优化这里使用了lodash的节流throttle函数，也可以...

vue生命周期每个Vue实例或组件从创建到显示再到废弃的过程就是vue的生命周期。很多时候我们希望能在这个过程中执行一些操作，于是就有了生命周期钩子。生命周期钩子函数允许我们在实例不同阶段执行各种操作，便于我们更好地控制和使用实例。一、基本生命周期首先看一个示例<!DOCTYPE html><html lang="en"> <head&...

用法let vm = new Vue({ el: "#app", data: { name: "mino" }, computed: { fullname() { return this.name; } }, wa...

卸载旧版本vue cli 升级到3后，package的名字从 vue-cli 改为了 @vue/cli，装了旧版本的，官方的建议是，把旧版本的卸载了，再安装新版本。卸载指令：npm uninstall vue-cli -g or yarn global remove vue-cli安装安装指令：npm install -g @vue/clioryarn global a...

简单来说，v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低区别v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。v-show...

当在Vue项目，当向后台请求接口时，常常会使用 loding 过渡数据的加载时间。如果 loading 作为一个全局的加载状态，应该写在项目中的App.vue中App.vue//App.vue<template> <div> //other code... <loading v-if='LOADING'/>...

安装 Visual Studio Code ESLint 插件打开 Visual Studio Code ，首先使用快捷键 Ctrl + Shift + P 调出VsCode的控制台，然后输入下面的命令安装ESLint插件：ext install ESLint使用 NPM 安装 ESLint为了方便我们通过ESLint命令行工具来帮助我们生成ESLint相关的配置，我们需要进行全...

首先你已经使用vue-cli搭建好了开发的脚手架1.安装jQuerynpm install jquery --save2.webpack配置## 在项目根目录下的build目录下找到webpack.base.conf.js文件，在开头使用以下代码引入webpack，因为该文件默认没有引用var webpack = require('webpack')  module.ex...

1.设置代理：  -- config／index.js 中，找到dev:{ }, 在这里面设置一个proxyTable proxyTable: { '/api/':{ target:'http://210.16.188.194:8090', changeOrinin:true, pathRewrite...

原理：1、参考线位置lineHeight：即判断滚动到何处触发事件； 2、页面卷入的高度scrollHeight； 3、浏览器窗口的高度windowHeight。当页面首次登录的时候已经加载第一页数据，记录第一页数据参考线的高度firstPageH，计算每页增加数据的高度pageH，当增加第N页数据时参考线的高度位置: lineHeight=firstPageH+pageH*N;代...