1. 不使用actiona: html部分（上传单个文件） {代码...} b: js部分 {代码...} 2. 使用action上传a. html部分（上传多个文件） {代码...} b. js部分 {代码...}

vue3+vite配置elementPlus主题需要安装一下两个插件：unplugin-vue-componentsunplugin-auto-import开始配置：第一步、安装插件 {代码...} 第二步、配置插件（在vite.config.ts中） {代码...} 第三步、自定义主体样式在src目录中创建styles文件夹，新建common.scss文件，写自己的样式。 {代码...} 官网scss写法文档：[链接]

vue3+vite项目配置适配H5主要安装一下两个插件：amfe-flexible（主要用于动态设置根元素字体大小(rem)，以根据屏幕尺寸进行自适应布局）postcss-px-to-viewport-8-plugin（将px单位转换为rem）开始配置：第一步、安装amfe-flexible插件 {代码...} 第二步、在main.js中导入 {代码...} 第三步、安装postcss-px-to-viewport...

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

那么问题来了，vite+typescript项目不允许使用静态资源加载方法require，如果使用require关键字就会报错，那肯定没法显示坐标点。

首先vue-next-admin是本身是配置好cdn加速的，只是没有开启。根目录找到.env文件，开启打包cdn加速找到utils、build.ts文件默认是注释了一些代码的，这里需要注意的就是几个变量。 {代码...} 我们的modules里面的变量会替换掉name,version,path。path要在unpkg网站查找对应的地址，我下载vue-next-admin项目的时候有五个...

vue项目中，采用unicode引入iconfont，如果静态写图标是可以正常渲染的<i class="iconfront">˞</i>但是如果从接口获取数据，直接渲染字符串<i class="iconfront">{{myIcon}}</i>

单行，超出显示省略号 {代码...} 多行，超出显示省略号 {代码...}

使用vue3和elementPlus实现上传图片裁剪参考文章地址：[链接] {代码...}

实现上传文件显示通过:limit="1" 和 :on-exceed来实现，但是这是后来版本添加的属性和方法，最好吧elementPlus升级到最新，要不然on-exceed方法不会被调用。

**问题描述：使用elementPlus upload组件上传文件，每次只能选择一个文件，如果上传失败，再次点击上传按钮，没有反应。解决：清空已选文件列表，然后重新赋值。**

1、基本配置，官方教程https://www.wangeditor.com/2、封装组件 {代码...} 3、使用 {代码...}

[链接]

创建filters文件夹，里面创建filters.js文件，用来定义全局filterfilters.js {代码...} main.js {代码...} 这样就全局定义了所有的filter，就可以在界面中使用了。 {代码...}

Vue中的mixin，是来分发Vue组件中的可复用功能。1、方法和数据在各个组件中不共享不像vuex那样，一个地方修改其他地方也会修改，mixin的数据的作用域就是被引入的组件内部。2、引用组件中的钩子函数在混入对象中的钩子函数后面执行。3、引用组件中的同名方法会覆盖混入对象中的方法，不同名的会合并。4、案例分析HelloWo...

摘要：当后台返回一个文件地址给前端，需要前端下载并重命名，展示下载进度。使用技术：ajax、blob、vue插件file-saver1、插件我们不做过多解释，我们这里只是使用，这是插件教程地址：[链接]2、项目代码 {代码...}

添加如下js代码即可 {代码...} vue中使用 {代码...}

1、添加ref<input type="file" ref="uploadFile" />2、获取input file {代码...} 3、执行清空操作 {代码...}

1、新建项目文件夹 test2、终端 cd test3、运行 {代码...} 创建package.json文件，生成如下目录4、配置webpack.config.js {代码...} 5、package.json 配置scripts: {} {代码...} github项目地址：[链接]

在线浏览word文件 {代码...}

vue3中去掉了addRoutes只能使用addRoute添加路由，那么我们就需要循环添加。路有数据都是从后台获取，直接循环生成菜单，然后我们在main.js中通过路由守卫添加动态路由

前端formData传参，有时候需要传递数组对象，如果直接给变量append一个数组对象后台无法接受。 {代码...} 正确的传参方式如下 {代码...} 如果是字符串或者数字数组 {代码...}

vue3中取消了过滤器filter，如果组件中单独使用可以用computed、watch来替换。但是想全局创建一个之前的vue2中的filter，我们就要使用在vue全局中挂在属性或者方法。

前端浏览器直接预览word文件1、基础地址（固定） {代码...} 2、自己上传的word地址，必须公网可访问，并且必须使用encodeURIComponent编码 {代码...} 3、使用window.open打开 {代码...}

父组件ParentComponents.vue {代码...} 子组件 {代码...}

1、Veturvue代码高亮显示2、GitLens选中代码，显示最近修改代码的作者3、Vue 3 Snippets这个插件包含了所有的 Vue.js 2 和 Vue.js 3 的 api 对应的代码片段。4、Auto Close Tag自动闭合标签5、Auto Rename Tag修改开始标签名称，自动重命名结束标签6、Bracket Pair Colorizer对应代码块的括号加不同显色显示7、Path Inte...

1、watch是惰性执行，也就是只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行（忽略watch第三个参数的配置，如果修改配置项也可以实现立即执行）

vue3.0新建项目二次封装axios，配置本地代理。1、在src文件夹中创建http文件夹并新建http.js和api.js，并在更目录创建vue.config.js文件2、配置http.js文件如果没有安装axios，首先安装axios {代码...} {代码...} 3、配置api.js文件 {代码...} 4、在组件中使用接口 {代码...} 5、配置代理 vue.config.js {代码...}

现在都是前后端分离开发，在开发过程中经常遇到后台接口还没有写好，但是前段界面需要跑流程来测试界面交互，这时候就需要通过做一些假数据模拟整个流程，我已我们就使用了mockjs来生成随机数据，拦截 Ajax 请求

解答：因为我配置的路由钩子（router.beforeEach）有问题，导致路由死循环。路由中的redirect和路有钩子中没有登录的时候自动跳转到登录界面冲突导致死循环，修改一些redirect和路由钩子拦截跳转的规则。