vue
垃圾侠
这个作者很懒,什么都没留下…
展开
-
keep-alive源码解析及实现原理
keep-alive源码解析及实现原理原创 2022-08-09 11:25:40 · 944 阅读 · 0 评论 -
pdf.js引入方式及初始化配置
官方下载地址:Getting StartedA general-purpose, web standards-based platform for parsing and rendering PDFs.http://mozilla.github.io/pdf.js/getting_started/#download 下载后解压缩文件,解压后文件目录如下: 将整个文件夹拷贝到项目public目录下的plugin文件夹下: 此时已经将pdf.js完全引入到项目中,然后在使用该功能的页面中写入:其中通过v-原创 2022-06-30 17:57:37 · 4863 阅读 · 5 评论 -
vue多入口配置
vue多入口文件配置原创 2022-03-29 19:30:35 · 1984 阅读 · 0 评论 -
什么情况下使用Vue.use()方法
大前提:引入的插件提供了install方法,才能使用Vue.use方法,没有提供install方法的插件,是没有办法通过Vue.use使用的。1.引入的第三方插件,如果在某个页面中使用,那么需要在main.js中引入改插件,并使用Vue.use;如果是在页面内引入,可以在components属性中添加该引入的插件,入vant的按需引入,在页面内引入某个vant组件,在components中的写法如下:components: { [Button.name]: Button }这样就不原创 2022-01-10 13:56:38 · 1386 阅读 · 1 评论 -
require.context()的用法
一般用于加载某个目录下的多个文件,如:const modules = require.context('./components/', false, /\.vue$/);require.context()接收三个参数,第一个参数是要加载的文件目录地址,第二个参数是true或false,表示是否需要加载子目录,第三个参数是个正则表达式,表示要加载哪些文件,上面代码表示要加载components目录下的.vue文件。modules得到的值是一个函数:ƒ webpackContext(req)原创 2021-09-26 18:02:29 · 934 阅读 · 0 评论 -
el-tabs-pane组件在dialog窗口关闭卡死问题
终极解决方案:设置dialog中的属性:destroy-on-close为false;原创 2021-07-08 09:41:27 · 611 阅读 · 0 评论 -
简单通俗的理解Vue3.0中的Proxy
转自https://segmentfault.com/a/1190000021991591,作者是阿里巴巴的前端妹子https://segmentfault.com/u/funnycoderstarProxy什么是代理呢,可以理解为在对象之前设置一个“拦截”,当该对象被访问的时候,都必须经过这层拦截。意味着你可以在这层拦截中进行各种操作。比如你可以在这层拦截中对原对象进行处理,返回你想返回的数据结构。ES6 原生提供 Proxy 构造函数,MDN上的解释为:Proxy 对象用于定义基本操作的..转载 2021-07-05 13:55:57 · 1213 阅读 · 0 评论 -
vue引用/下载public目录下文件的方式
如需要下载public下的excel模板文件window.location.href = process.env.BASE_URL + 'template/数据模板.xlsx'qi'zhon原创 2021-06-04 17:06:15 · 3823 阅读 · 0 评论 -
terser-webpack-plugin删除代码注释、打印敏感信息等
1.安装插件(此插件可移除js和vue文件中的注释、打印等信息)npm installterser-webpack-plugin -D;2.在vue.config.js中进行配置const TerserPlugin = require("terser-webpack-plugin");configureWebpack: { optimization: { minimize: true, minimizer: [ new TerserPlug.原创 2021-05-17 16:04:27 · 3463 阅读 · 2 评论 -
vue-cli3配置webpack-bundle-analyzer的方法
1.安装webpack-bundle-analyzer;npm installwebpack-bundle-analyzer -D;2.在vue.config.js中配置:chainWebpack: config => { config.plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) },3.运行:npm run s.原创 2021-05-17 15:51:30 · 2709 阅读 · 1 评论 -
vue+vant国际化i18n用法
1.安装i18n npm installvue-i18n -S2.在src目录下创建一个lang文件夹,内建三个文件:index.js en_us.js zh_cn.jsen_us.js代码如下:export default { app: { hello: 'Hello,World' }}zh_cn.js代码如下:export default { app: { hello: '你好,世界!' }}index.j.原创 2021-05-17 15:43:09 · 2278 阅读 · 2 评论 -
ckeditor5图片上传功能的使用
如果想使用ckeditor5中的图片上传功能,就无法在项目中通过npm的方式来安装ckeditor,而是需要在https://ckeditor.com/ckeditor-5/online-builder/中先配置所需要的ckeditor的功能及插件,然后将代码下载下来,然后修改下载下来的代码内容,然后重新打包,单独将打包后的ckeditor.js引入到自己的项目中。在https://ckeditor.com/ckeditor-5/online-builder/中使用Classic模式(其它模式不保证..原创 2021-04-25 16:36:54 · 3432 阅读 · 0 评论 -
下拉框无法收回的解决方法:focus-outside使用方式
在开发过程中遇到过这样一种情况,当select下拉面板展开后,此时如果点击iframe或富文本编辑器的输入框,select的下拉面板没有收回,这是因为在iframe或富文本编辑器的点击没有触发select下拉面板的outside点击事件,所以需要通过focus-outside插件来解决。官方npm网站:https://github.com/txs1992/focus-outside/blob/master/docs/zh-cn.md#readme安装:npm install focus-outside原创 2021-04-01 11:35:42 · 1540 阅读 · 0 评论 -
js如何将后端返回的文件流下载成文件
if (res) { //res是后端返回的文件流 const blob = new Blob([res]); let url = window.URL.createObjectURL(blob); let link = document.createElement("a"); link.style.display = "none"; link.href = url; link.setAttribute( "download", .原创 2021-04-01 10:10:19 · 694 阅读 · 0 评论 -
ckeditor5快速使用
ckeditor官网提供了可以个人定制的方式,然后将地址好的包下载到本地,即可立即使用,定制方式如下:打开官网定制页面:https://ckeditor.com/ckeditor-5/online-builder/第一步:选择一个编辑器的类型,本人选择的是文件类型的编辑器:Decoupled document;第二步:选择编辑器中需要用到的工具及插件;第三步:选择工具栏中要显示的工具;第四步:选择默认的语言;第五步:开始build;第六步:下载build后的包原创 2021-04-01 09:59:20 · 1838 阅读 · 0 评论 -
vue-router常用配置
<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航..原创 2020-10-16 22:19:49 · 307 阅读 · 0 评论 -
vue-cli4的使用与配置
关于旧版本Vue CLI 的包名称由vue-cli改成了@vue/cli。 如果你已经全局安装了旧版本的vue-cli(1.x 或 2.x),你需要先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载它。Node 版本要求Vue CLI 4.x 需要Node.jsv8.9 或更高版本 (推荐 v10 以上)。你可以使用n,nvm或nvm-windows在同一台电脑中管理多个 Node 版本。由于 Nod...原创 2020-09-15 10:20:16 · 1134 阅读 · 0 评论 -
vue易忘知识点
前言:vue项目开发,大多数时间是在写业务代码,能用到的知识点无非是v-指令,mounted加载,props和emit传参,对这几个知识点熟悉的话,就可以完成大部分的开发工作,然而vue项目也并不是想象中这么简单,某些复杂功能会涉及到一些不常用的知识点,下面我将总结出来,以备不时之需。1. 指令动态参数模版中的绑定属性和绑定事件的方法如下:<a v-bind:href="url">...</a><a v-on:click="doSomething">原创 2020-09-09 17:56:43 · 323 阅读 · 0 评论 -
Vuex容易忽略的知识点
前言:由于公司项目较多,各个框架经常切换使用,导致切换到某个框架后,像Vuex和Redux这类在平时的业务代码中不太需要经常使用的东西,比较容易忘记其中的一些知识点,不得不在每次使用前都得先过一遍官方文档,比较浪费时间,因此特将Vuex中一些比较容易忽略的知识点整理出来,这样在每次使用前看一遍本此梳理的内容就可以了。一、Vuex的基本规则1. Vuex的作用主要是用于项目中的组件的公共状态管理,记住四个字:公共状态。如果不涉及到公共状态的管理,那么这个项目完全可以不使用Vuex。2. Vue原创 2020-08-20 13:12:54 · 208 阅读 · 0 评论 -
vscode新建远程分支后看不到
git remote update origin –prune 执行一下。原创 2020-05-11 16:06:03 · 4335 阅读 · 0 评论 -
vue-cli3中不能使用hasOwnProperty的解决办法
报错信息:Do not access Object.prototype method ‘hasOwnProperty’ from target object no-prototype-builtinseslint报错。发现是新版本的ESLint使用了禁止直接调用Object.prototypes的内置属性开关,说白了就是ESLint 配置文件中的"extends": "eslint:...转载 2020-04-09 13:56:30 · 6272 阅读 · 1 评论 -
vue打包后图标路径不正确问题解决
更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置:if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', // 注意配置这一部分,根据目录结构自由调整 fall...转载 2019-05-09 16:24:45 · 780 阅读 · 0 评论 -
解决Vue相同路由参数不同不会刷新的问题
通常情况下我们喜欢设置keepAlive 包裹 router-view? 1 2 3 4 5 <div id="app"> <keep-alive> <router-view></router-view> </keep-ali...转载 2019-02-28 23:44:56 · 1863 阅读 · 0 评论 -
vue中is的使用
vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题,譬如ul里面要接上li的标签,引入is的属性后,你完全可以写成这样<ul> <li is="component"></li></ul>这样会保证dom结构在浏览器的正常渲染,尽量避免在不正确的结构中直接使用组件,像这样<ul> <..转载 2018-12-04 17:33:26 · 332 阅读 · 0 评论 -
keep-alive的使用
问题描述: 在keep-alive中的在跳转到指定的路由时刷新对应的路由,其余不刷新。 1 2 3 4 5 <transition name="fade" mode="out-in"> <keep-alive> <router-view></route...转载 2018-12-04 17:08:13 · 373 阅读 · 0 评论 -
slot-scope用法及理解
下面是2个父子的vue组件,先解释一下2个组件做了什么事情父组件仅仅是调用了子组件 子组件内部实现了一个todolist列表我建议从数据流动的角度,理解插槽作用域的使用方式,(先学会怎么用,暂时不用理解为什么要这么用,使用场景是第二部分)1.父组件传递了todos数组给子组件 2.子组件通过props接受了数组数据,这里应该没有任何问题 3.子组件拿到数组后v-for渲染列表,并且...转载 2018-12-04 11:16:14 · 43388 阅读 · 5 评论 -
vue $route监听
watch: { $route(to,from) { }}在任意组件中监听路由,当路由发生变化时,可进行某些操作。应用场景:当点击菜单中发生路由变化时,需要新增该菜单的tab页,此时就可以在tab页相关组件中监听路由变化。...原创 2018-10-11 13:09:31 · 4506 阅读 · 0 评论