随笔分类 - vue
Vue3、VueRouter、Pinia、VueUse、Element-plus、Slidev
摘要：如果你用了 pinia 就需要引入 vue-demi: vue-demi 是一个 Vue.js 的兼容性库，旨在为 Vue 2 和 Vue 3 提供一致的 API。它通过提供与 Vue 3 相似的 API 来帮助开发者平滑地迁移代码从 Vue 2 到 Vue 3。 pinia 为了兼容新, 使
阅读全文
摘要：这个警告是因为你提供了一个模板选项（template option），但在当前的Vue构建版本中不支持运行时编译。解决该问题的方法是将你的打包工具配置别名（alias）将 "vue" 指向 "vue/dist/vue.esm-bundler.js"。 具体来说，如果你使用的是Webpack或者vit
阅读全文
摘要：项目环境 // 1. npm ls vite ├─┬ @vitejs/plugin-vue-jsx@3.1.0 │ └── vite@5.0.3 deduped ├─┬ @vitejs/plugin-vue@4.5.0 │ └── vite@5.0.3 deduped ├─┬ vite-plugin
阅读全文
摘要：vue指令 Vue指令是Vue.js框架中最核心的一部分之一，用于处理DOM元素上的行为和属性，类似于jQuery的插件。Vue指令使用v-前缀表示，例如：v-if，v-for，v-bind，v-on等等。 以下是一些常用的Vue指令： 1. v-model：绑定表单元素到Vue实例数据，实现数据的
阅读全文
摘要：Vue 中实现点击其他地方隐藏 `div` 的思路一般如下所示： 1. 给需要隐藏的 `div` 绑定一个 `v-show` 或 `v-if` 指令，初始状态为显示。2. 给整个页面或父级元素（比如 `body` 或者 `app` 组件，建议是根组件）绑定一个点击事件。3. 在点击事件的回调函数中，
阅读全文
摘要：Pug 是一种高效的、简洁的模板引擎，它使用缩进、可选的括号和强制缩写等语法规则来简化 HTML/CSS/JS 的书写。Pug 简化了模板的书写，可以通过缩进来表示嵌套关系，使用小括号包裹指令和属性，并且使用换行符来分隔标签，使得代码层次更加清晰有序。 举个例子，以下是一个常见的 HTML 表单：
阅读全文
摘要：在 Vue 的模板语法中（包括 Pug），可以使用 `v-for` 指令来进行循环渲染数据。 如果使用 Pug 来书写模板的话，可以使用如下的语法： ```pugul li(v-for="item in list" :key="item.id") {{ item.name }}``` 上面的代码表示
阅读全文
摘要：今天带大家简单的实现MVVM模式，Object.defineProperty代理（proxy）数据 MVVM的实现方式： 模板编译(Compile) 数据劫持(Observer) Object.defineProperty 发布的订阅(Dep) 观察者(Watcher) MVVM： 数据就是简单的j
阅读全文
摘要：一、关于IE浏览器适配 打包前我们可以在package.json文件做如下配置 如果你想指定兼容IE某个版本可以这么写："ie 11" 配置说明： npx browserslist 在项目目录中运行以查看选择了哪些浏览器。 也可以通过 browserl.ist 网站查看选择了哪些浏览器。 二、提升加
阅读全文
摘要：Vue组件传值除了prop和$emit，我们还可以直接获取组件对象： 根组件： $root // 单一对象 表示当前组件树的根 Vue 实例，即new Vue({...根组件内容})。如果当前实例没有父实例，此实例将会是其自己。Vue子组件可以通过$root属性访问父组件实例的属性和方法 父组件：$
阅读全文
摘要：gitignore可以指定git忽略指定文件。 问题： 想忽略一些文件在.gitignore文件中会配置对应的文件，但是有时候配置后还是没有起作用： 我在element-ui封装个性化组件时，需要更换组件颜色主题，便在".gitigore"文件里添加以下文件，只提交编译后文件：/theme/inde
阅读全文
摘要：Vue.js经典开源项目汇总 原文链接：http://www.cnblogs.com/huyong/p/6517949.html Vue是什么？ Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。V
阅读全文
摘要：问题： elementUI 在el-row 或者 el-col 上使用@click失效, 解决： 在click后面加上 .native 。要使用@click.native=”handler()”才行，.native代表原生点击事件。
阅读全文
摘要：问题说明： ios中，键盘的弹起，页面会往上挪动，使输入框展示在页面中间，键盘隐藏页面会下挪恢复原状。 在微信移动端，ios页面不恢复，下方有留白。 收起键盘的瞬间，如果有弹窗弹出，此时时页面内容应区域错位。 问题栗子配图： 解决方案： 其实只要知道了原因，坑填起来很简单：输入法的软键盘影响了页面的
阅读全文
摘要：npm run build之后，出现提示：Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. npm run build的时候 , 因为vue
阅读全文
摘要：1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容：because its MIME type ('text/html') is not a supported stylesheet MIME type2.控制台报错：报错内容
阅读全文
摘要：今天在新工程里添加了一段样式代码代码突然报错了： 仔细一看提示less依赖没有装： 那么，怎么添加依赖呢？ 第一步： 安装less依赖 依赖装好了就不报错了，如果要支持外部less，可以继续配置： 第二步： 修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less
阅读全文
摘要：微信移动端4位、6位、多位验证码密码输入框功能的实现代码，实现思路： 方案1： 写一个简单的input框。 评估：样式不好看，待定。 方案2： 就是用6个input框，每输入一个数字之后，切换到下一个input，即切换focus，删除的时候，同理。自测发现安卓机很流畅，但ios微信端并不是那么流畅，
阅读全文
摘要：改问题是"babel-eslint"版本更新问题导致的； 给大家一个最简单粗暴的解决方案： 在项目里找到对应的工程：直接删除里面的node_modules文件夹，然后重新npm install下就可以了； node_modules文件内容较多，建议用cnpm install，会更快一点。 node_
阅读全文
