Annie的博客

在build项目时，production模式下打包出的项目文件与其他模式略有不同，导致生产环境与开发环境运行差异。1、安装docker（本文不赘述docker安装过程，可自行参考其他文章），在项目根目录创建docker文件夹。执行成功后，可在docker中看到创建的应用，点击按钮，即可在浏览器中打开。4、创建docker镜像，imagesName 为创建的镜像名称（注意命令后面的点.)6、创建docker应用，appName 为创建的应用名称。执行成功后，可在docker中看到创建的镜像。

以下是给项目升级element-plus版本时遇到的warning或样式错乱问题，不一定全面，但应该覆盖了大部分常用组件的变更。升级后：2、upload组件升级前：上传input所在div 与 文件列表ul 为兄弟组件升级后：上传input所在div 与 文件列表ul 为父子组件由于DOM结果发生变化，若有自定义样式，需关注。3、form组件升级前：升级后：表单label的布局及对齐方式发生变化，若使用slot自定义了label样式，需关注。 4、table组件tab......

项目中只用到一个 element-plus组件？全局引入项目太重？按官网文档引入后报错？看这里就对了。1、安装并引入 unplugin-element-plus（参考链接）npm i unplugin-element-plus -D// 以 vue.config.js 中的配置为例module.exports = { configureWebpack: { plugins: [ require('unplugin-element-plus/webp...

一、报错现象vue3 + element plus 项目，本地启动时，页面进行所有操作都正常；部署到生产环境后，数据驱动DOM变化的操作会导致如下报错。二、可能原因及解决方案经过分析出现报错的操作步骤及多方资料查询，不同情况下的报错，其原因不同。遇到这种问题的同学可以从以下几方面进行排查。1、v-if 导致在 v-if 值为 false 时，如果操作了 v-if 控制的 DOM，可能会因为该 DOM 元素不存在而报错。解决方案：v-show 替换 v-if2、...

watch 和 watchEffect 都是监听器，有很多相同点，也有些不同点。一、相同点1、都可以监听数据的变化import {ref, reactive, watch, watchEffect} from 'vue'export default { setup() { const stateRef = ref(0) const stateReactive = reactive({num: 0}) watch(sta...

项目增加了几个依赖包，npm i执行完后，每个文件的开头都出现了eslint报错，如下图 官网中有对 vue/script-setup-uses-vars 规则的说明，其对该规则的描述为Prevent<script setup>variables used in<template>to be marked as unused 即，防止将定义在< script setup >标签中，但在template...

在网上看到几篇例子，但或多或少都有些问题，不能满足自己的需求，只能自己封装一个。

clipboard想必大家都很熟悉了，用起来也很简单，

vue3中通过ref获取组件的方式与 vue2 写法有些不同，先来介绍一下 vue3 中获取组件的方式。<template> <div ref="cptRef">...</div></template><script>import { ref } from 'vue';export default { setup() { const cptRef = ref(null); /...

最近用到element-plus中带快捷选项的日期时间范围选择器，如上图，官方案例左侧提供了最近一周、最近一个月、最近三个月快捷选项。 但当我按照官方示例用法放到自己项目中时，输入框中显示的时间范围却是错误的，起始时间与终止时间永远只显示当前时间。 一度怀疑自己用法不对，直到将官方demo代码完全复制到项目中，发现还是错误。最终将demo 中的 shortcuts 定义，改为如下即可。shortcuts: [ { text: '最近7...

一、vue.config.js配置 在vue项目中，直接使用微信开放标签会报错，所以要配置忽略对微信标签的校验，在 vue.config.js 中增加如下配置。module.exports = { //...其他配置 chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .tap(options => { options.compile...

<template> <el-upload ref="elUpload" accept=".jpg,.png" :autoUpload="false" :uploadChange="uploadChange" :httpRequest='httpRequest'> <img :src="url" /> </el-upload> <el-dialog title="图片裁剪" v-model="show.

关于Proxy的概念和原理，在阮老师的书中有详细的讲解：https://es6.ruanyifeng.com/#docs/proxy。下面做一个简单的回顾。 作为构造函数，Proxy接收两个参数。var proxy = new Proxy(target, handler); 第一个参数是想要代理的目标对象target，若没有Proxy的介入，操作原来要...

configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') { // 仅在生产环境下启用该配置 return { performance: { // 打包后最大文件大小限制 maxAssetSize: 1024000 }, plugins: [ new Compress...

通过如下方式动态注册的路由{ component: () => { return import('../' + component + '.vue'); }, name, meta, path: 'index'} 开发环境和生产环境下没有任何问题。但在测试环境下，报如下错误 经过调试，发现把 import 改为 require 就可以了。 然而too young too simple，在洋洋得意的...

使用vue3开发过一段时间了，开发过程中总结了些语法上的区别。下面不去考虑原理和源码，只在使用方式上列出两者的区别，有了这些，可以让开发者快速从vue2转换到vue3的开发中。一、入口文件main.js1、引入vue vue2.0写法import Vue from 'vue' vue3.0写法import { createApp } from 'vue'const app = createApp(App)2、挂载vue实例 vue2.0写法n...