小糖穿越火线

为了在 IE11 中使用 UnoCSS，你需要执行额外的步骤来转换这些现代 CSS 特性为 IE11 可以理解的样式。IE11 目前是无法支持 CSS 变量（自定义属性）和 rgba 中使用的 var() 函数。然后UnoCSS 生成的颜色应该能够在 IE11 中正常显示。解决方案办法，可以使用 PostCSS 插件，如果使用 Vue CLI 并在。，也可以在那里添加这些插件。，来处理这些不兼容性。

/** * https://vitejs.dev/config/ * @type {import('vite').UserConfig} */export default { //项目根目录 root: process.cwd(), //项目部署的基础路径 base: "/", //环境配置 mode: 'development', //全局变量替换 Record<string, string> define: { .

Vue父组件调用子组件事件，父子组件交互vue2vue父组件向子组件传递数据 or 调用事件父组件传递数据到子组件 props传递：<child-c :args="args"></child-c>export default { data: { return() { args: { id: 1, name: 'achuan', } } }}接收：props: { // 可选，并提供默认值 title: {

Vue 切换路由后页面回到页面顶部backTop() { window.scrollTo(0, 0) document.body.scrollTop = 0 document.documentElement.scrollTop = 0}router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title } setTimeout(() => {

vue组件样式穿透种类 /deep/ ::v-deep >>>1、/deep//deep/ .main {}2、>>>>>> .main {}3、::v-deep::v-deep .main {}

vue3 Cannot find module ‘path’. 找不到模块’path’按照 @types/node 即可npm i @types/node -D

深入响应性原理在 Vue Mastery 上免费观看关于深入响应性原理的视频。什么是响应性响应性是一种允许我们以声明式的方式去适应变化的一种编程范例。人们通常展示的典型例子，是一份 excel 电子表格 (一个非常好的例子)。JavaScript 通常不是这样工作的——如果我们想用 JavaScript 编写类似的内容：var val1 = 2var val2 = 3var sum = val1 + val2// sum// 5val1 = 3// sum// 5如果我们更

Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？开始之前Composition Api 可以说是Vue3最大的特点，那么为什么要推出Composition Api，解决了什么问题？通常使用Vue2开发的项目，普遍会存在以下问题：代码的可读性随着组件变大而变差每一种代码复用的方式，都存在缺点TypeScript支持有限以上通过使用Composition Api都能迎刃而解一、Options ApiOptions AP

Vite2.0搭建Vue3移动端项目一、搭建包含内容vite版本、vue3、ts、集成路由、集成vuex、集成axios、配置Vant3、移动端适配、请求代理二、步骤vite+ts+vue3只需要一行命令npm init @vitejs/app my-vue-app --template vue-ts配置路由npm install vue-router@4 --save在src下新建router目录，新建index.ts文件import { createRouter, createWe

Vite 构建可以使用 Vite 快速构建 Vue 项目。vue3文档操作步骤，按照文档操作，出现繁琐问题；vite构建后的vite版本是老版本： “vite”: “^1.0.0-rc.13” ，查看package.json 文件发现vue也是老版本。正确方式：npm init @vitejs/app vue3-project支持的模板预设选择：vanillavuevue-tsreactreact-tspreactpreact-tslit-elementlit-ele

import BScroll from 'better-scroll'要注意等数据加载完成之后再初始化better-scrollexport default { data() { return { data: [] } }, created() { this.loadData() }, methods: { loadData() { requestData().then((res) => {

监听页面滚动触发事件，页面停止滚动触发事件核心代码data() { return { timer: null, isTipVisible: true }}methods: { handleScrollStart() { this.timer && clearTimeout(this.timer) this.timer = setTimeout(() => { this.handleScrollEnd() }, 500)

vue 动态绑定 video src，不能正常播放问题通过 vm.$refsvm.$refs一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。核心代码let el = _self.$refs.HomeVideoel.src = 'xxx.mp4'自动播放下一个视频onNext() { const _self = this let el = _self.$refs.HomeVideo el.src = _self.videoArr[1] let

// 获取查找某个字符的位置方法：findPosition(str, queryStr, pon) { var x = str.indexOf(queryStr) for (var i = 0; i < pon; i++) { x = str.indexOf(queryStr, x + 1) } return x}调用：第二次出现 / 的位置// '/home/pb-management'this.findPosition(path, '/', 1)应用场景

append-to-body解决多层遮罩层覆盖的问题<el-dialog title="编辑处理结果" :visible.sync="dialogVisible" width="600px" :before-close="handleClose" append-to-body>:modal-append-to-body=“false”解决一层遮罩层覆盖问题<el-dialog title="编辑处理结果" :visible.sync="dialog

默认配置：pwa.iconPaths{favicon32: ‘img/icons/favicon-32x32.png’,favicon16: ‘img/icons/favicon-16x16.png’,appleTouchIcon: ‘img/icons/apple-touch-icon-152x152.png’,maskIcon: ‘img/icons/safari-pinned-tab.svg’,msTileImage: ‘img/icons/msapplication-icon-144

Store-状态管理目录结构.├── src 源码目录│ ├── store 状态管理配置│ │ ├── module 模块状态管理，登录、产品等分别模块；│ │ │ ├── authority ├── index.js

http-接口目录结构.├── src 源码目录│ ├── http 请求封装│ │ ├── modules 请求所属模块│ │ │ ├── example.js example模块请求│ │ │ ├── xxx.js xxx模块请求│

安装依赖vue add style-resources-loader注意：使用 vue add 安装，这样会自动安装附属依赖：vue-cli-plugin-style-resources-loader ，还有安装时可以选择对应的预编译，less、scss、styles配置在安装依赖后，在vue.config.js中会生成代码片段pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns

if (code === 1007) { const config = response.config if (!isRefreshing) { isRefreshing = true refreshToken(); setTimeout(() => { // const { token } = res.data let token = window.sessionStorage.getItem("openId")..

provide、inject最外层组件（祖先组件）向其所有子组件注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效；通过在App.vue，声明reload方法，控制router-view的显示或隐藏，去控制页面刷新。App.vue<template> <div id="app"> <router-view class="container" v-if="isAlive" /> </div></template&

vue、bus 使用遇到的坑，组件之间无法传值；vue、bus 第一次获取不到值，后面数据叠加问题定位：出现无法传值的情况，检查传值过程中组件是否还没有渲染；可能出现的情况是：组件被if，在你使用 Bus.$emit() 时组件还没有渲染出来；出现点击重复执行情况，检查bus是否使用后销毁;在生命周期beforeDestroy中销毁：beforeDestroy() { Bus.$off("onSearchwordKey");}参考：https://segmentfault.com/a

Error in nextTick解决：找到使用nextTick的地方，因为在之前数据为空导致的，因此加一个判断在nextTick之前if (Array.isArray(this.classList) && this.classList.length > 0) { that.$nextTick(() => { ... });}...

Vue 实现图片在循环中 默认 和 选中 之间的点击切换html<ul style="font-size:20px;"> <li :key="lesson.name" @click="changeLesson(lesson.name, index)" style="font-size:20px;" v-for="(lesson, in...

Vue本地图片循环加载显示不出来，vue img标签 :src地址拼接上代码：<img :src="img" alt="banner"/>data() { return { img: require(`src/common/images/phase${this.phase}/banner.png`) }},再上代码：<li c...

由于我们已经设置了withCredentials属性，因此发生了错误。您需要调整CORS配置以使用特定的Origin值，而不是通配符，因为在使用凭据时，CORS不支持通配符。因此 access-control-allow-origin: * 时不要设置 withCredentials:true设置XMLHttpRequest“ withCredentials”属性 ...

1、检查自己的node和npmnode -vnpm -v2、安装最新版本 vue-cli如果全局有老版本的vue-cli卸载：旧版本的 vue-cli (1.x 或 2.x)，先卸载在安装： npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。npm install -g @vue/cli3、创建新...

npm run report生成 report.html 以帮助分析包内容npm run build --reportnpm run build -- --report

npm run serve运行报错：This may cause things to work incorrectly. Make sure to use the same version for both. If you are using vue-loader@>=10.0, simply update vue-template-compiler. If you are using...

vue 请求时方法执行顺序问题，异步请求无法同时处理多个接口，使用同步顺序执行：async/await使用在vue开发中项目中，有时需要在一个地方请求多个接口处理数据，然后进行渲染的步骤； 异步当数据没有返回就开始处理，导致没有拿到返回数据报错的问题； 使用async搭配await实现；代码：使用async，await：async _getCurrentTagsGet() {...

尝试多种办法，仍无法解决：1、引用js、css使用：./路径2、// <script src="./js/config.js"><script src="<%= BASE_URL %>js/config.js">3、assetsPublicPath： ./4、5、6、...试了超多方法。。。解决：真的坑：避免...

vue数据改变了，视图不更新不刷新问题描述：在对象中添加一个属性 seen，初始想法使用for循环添加 seen 属性，然后改变这个属性去更新视图，然后发现不行。解决，使用$set：this.$set(item, 'seen', false)代码：// 请求来的数据，在 res.results 中没有seen这个属性，添加这个属性this.worklogs = res...

mavonEditor 有序无序列表不能显示数字和小原点的问题问题：原因：因为reset.css重置了ol和li的样式，因此注释掉即可，在需要的地方进行重置ol, ul { list-style: none; }来自github：https://github.com/hinesboy/mavonEditor/issues/226...

NavigationDuplicated vue-router 路由重复点击报错的问题1、新版本router的问题，解决：降版本即可npm i vue-router@3.0 -S2、使用新版本解决办法main.js下添加如下代码：import Router from 'vue-router'const originalPush = Router.prototype....

axios config里自定义属性，使用拦截器拦截，无法拿到自定义属性问题最新版本axios限制了键，对键值做了白名单处理。解决思路：修改源码中的内容，添加一个键来报错额外属性。或者：使用老版本，0.18.0...

vue-cli3构建项目时elementUI按需引入问题报错1：Error: Cannot find module 'babel-preset-es2015'报错2：Error: Cannot find module 'babel-preset-env'- Did you mean "@babel/env"?法1：将 es2015 更改为：@babel/preset-env...

github-markdown-css 使用简解，markdown文案格式优化1、npm 安装$ npm install github-markdown-css2、使用导入github-markdown.css文件import：import 'github-markdown-css/github-markdown.css'添加：markdown-body的class...

vue项目查看构建后项目报告，项目个模块依赖占比比例情况npm run build --reportor"report": "vue-cli-service build --report"npm run report

<div @mousedown="areaListInfo($event, index, item)" ref="areaListDrag" @mouseup="handleMouseUp($event, index, item)">注意：获取index，需要注意这里。data () { return { moveDataelse: { ...

vue兄弟组件之间的传值1、建立一个单独的文件bus.jsimport Vue from 'vue'export default new Vue()2、传递事件// 传递事件import Bus from '你的路径/bus.js'// 在methods中：bus() { Bus.$emit('eventName', param)}3、接收事件// 接...