![](https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
VueJs
文章平均质量分 51
Vuejs学习笔记与项目实践
Yolanda_NuoNuo
女程序媛,瑜伽教练
展开
-
前端内存泄露问题总结篇(包括Vue和echarts)
本文以思维导图形式整理了内存泄露知识图谱一、引起的原因及解决方法,主要是注意闭包、全局变量和定时器、监听事件等二、vue中的常见内存泄露,主要是1、注意mounted(onMounted)的时候如果定义了一些全局变量,或者是定时器、监听事件这种的,要在beforeDestroy(beforeMounted)中释放或者移除掉2、echarts用定时器获取数据的,也是注意在合适的时间移除掉定时器切换页面(页面销毁)时注意对echarts实例做clear()或者dispose()三、如何利用devTo原创 2021-09-15 14:51:43 · 2223 阅读 · 1 评论 -
vite安装失败问题Emitted ‘error‘ event on ChildProcess instance at:-4058esbuild.exe
一、背景描述1、局部安装npm install vite -D2、启动npx vite3、报错了throw er; // Unhandled ‘error’ eventEmitted ‘error’ event on ChildProcess instance at:errno: -4058,code: ‘ENOENT’,syscall: ‘spawn D:\mycode\front\node_modules\esbuild\esbuild.exe’,path: ‘D:\mycode\原创 2021-06-21 16:22:41 · 10953 阅读 · 3 评论 -
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确, 然后再试一次
一、背景描述电脑坏了,换电脑,害~1、现象:命令行输入vue create项目报错了~2、报错信息vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次3、解决办法设置环境变量(1)找到nodejs安装目录E:\codeEnvironment\nodejs\path新建两个空文件夹node_cache和node_global,like this(2)设置环境变量用户变量的PathE:\c原创 2021-06-21 14:09:52 · 2023 阅读 · 0 评论 -
Error: Cannot find module ‘vue-loader/dist/index‘
1、问题描述:用const { VueLoaderPlugin } = require(‘vue-loader/dist/index’);的时候打包保错Error: Cannot find module ‘vue-loader/dist/index’2、解决办法害,就是版本的原因,版本不是最新的npm install vue-loader@next安装一下就好了...原创 2021-06-21 09:38:51 · 889 阅读 · 0 评论 -
vscode生成vue模版代码片段
有的时候看????学习视频,看到人家阿婆主打两个字母就出来一大串代码,感觉哇哦好酷,这就是大神写代码的节奏嘛?我也要!!!一、写一段即将生成的Vue模版代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi原创 2021-05-29 16:06:33 · 294 阅读 · 1 评论 -
Vue3源码调试步骤
一、github下载源码1、vue3源码2、下载3.0.11版本Download zip二、环境1、在VS code中打开刚才解压缩的源码2、打开VS code中的终端界面输入yarn install什么?没装yarn?那装个呗 npm install -g yarnmac看????这里mac环境zsh: command not found: yarn3、跑下试试yarn dev哦豁,报错了Error: Command failed with exit code原创 2021-05-27 21:44:26 · 2000 阅读 · 7 评论 -
Vue实现系统页面长时间不操作自动退出到登录页面
一、背景描述现在要做这么一个需求,就是在页面上用户长时间没有操作,就认为是不活跃,自动退出到登录页面。以vue-element-admin这个开源项目为例来说明,知道方法再套用到自己的系统上就可以啦~二、准备工作既然是以vue-element-admin为例,所以要先下载一下这个基础模板vue-element-template基础开发模板三、开始编码(一)实现思路1、在App.vue中监控点击事件,记录上一次操作时间,每次点击都会更新一下这个时间;2、在登录后的首页里启动一个定时器,定时去原创 2021-05-10 14:10:22 · 7768 阅读 · 2 评论 -
Uncaught TypeError: Cannot read property ‘dispatch‘ of undefined
一、背景描述用VUE的时候报这个错Uncaught TypeError: Cannot read property ‘dispatch’ of undefined二、问题分析1、我的代码是酱紫滴 data() { return { // 计时器 whole_timer: null } }, created() { this.isLoginOut(); }, isLoginOut() {原创 2021-05-10 13:57:27 · 3489 阅读 · 0 评论 -
Error: Cannot find module ‘mockjs‘
项目跑的好好的就找不到这个了重新跑npm install就好了~嘻嘻~原创 2021-04-15 15:16:24 · 3956 阅读 · 2 评论 -
记一次诡异的bug,The resource was preloaded using link preload but not used within a few seconds
一、问题描述做一个vue项目的时候,突然页面打不开了,空白页,什么都不显示报这个错The resource http://localhost:8082/js/index.js was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate as value and it is preloade原创 2021-02-07 09:33:01 · 19272 阅读 · 3 评论 -
VUEJS项目实践十之Uncaught ReferenceError: Vue is not defined external “Vue“?548a:1
一、问题背景:嫌弃vue打包文件太大了,几个页面竟达十几M,优化打包文件的时候,出现了这个问题Uncaught ReferenceError: Vue is not definedat eval (external “Vue”?548a:1)二、解决办法经过周密检查和验证,得出结论,引入文件的地方放错啦,放的太后面了错误的放置方式<!DOCTYPE html><html> <head> <meta charset="utf-8">原创 2020-09-28 17:01:00 · 4547 阅读 · 0 评论 -
VUEJS项目实践九之弹框焦点默认在某个按钮上
一、背景有一个需求是要弹框后,焦点默认在某个按钮上,确认或者取消。二、我还是用前几话写的弹框插件来说,为了区分焦点在按钮上还是不在,把之前的css稍微改了一下。文末会附上完整代码。1、没有加这个效果之前点开弹框,按钮没有效果目标是做出,一打开弹框就是酱紫的~知道怎么做的话,写起来就好简单~就是要等到DOM都加载完了再操作焦点。 // 弹框焦点默认在确认键 this.$nextTick(()=> { $("#btnMsgBoxConfirm").fo原创 2020-07-03 16:36:42 · 977 阅读 · 0 评论 -
VUEJS项目实践八之组件间通信(包括vuex)
前几话说到用vuejs的路由实现一个复杂的单页应用,实现了几个小功能。这一话来总结组件间如何通信。一、父组件向子组件传消息项目目录结构子组件定义propssrc/components/ParentToChild/ChildPage.vue为了区分这个页面是蓝色的msgFromParent是从父组件传来的值<template> <div class="childBack"> <h3>我是子组件childPage</h3>原创 2020-06-02 12:23:47 · 409 阅读 · 4 评论 -
VUEJS项目实践七之Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of
问题描述:Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.问题背景:在我之前的博文VUEJS项目实践五之Dialog弹出框MessageBox(超好看的bootstrap样式)中有介绍一个样式结合了Bootstrap样式的MesageBox然后在之...原创 2020-05-02 19:13:30 · 32304 阅读 · 0 评论 -
VUEJS项目实践六之No PostCSS Config found in
五一放假有时间啦,我又来更博啦~今天把之前写的vuejs项目从我的宝贝mac本本上copy到另外一台电脑上的时候,跑不起来。几次cnpm install了以后还是报这个错No PostCSS Config found in是之前引入的bootstrap文件那块报错。然后我去查了一下postcsspostcss官方文档然后对比了一下其他我跑的没问题的vuejs项目,发现我少了一个配置...原创 2020-05-02 16:47:26 · 687 阅读 · 0 评论 -
VUEJS项目实践五之Dialog弹出框MessageBox(超好看的bootstrap样式)
这次需要写一个弹出层dialog,有确认和取消按钮的那种。先看下弹出层的效果吧~其实我是写成深黑透明底的,可能因为我在mac本上截的图,跟我在 windows里做出的效果不太一样,不过也是好看的。一、src/components/messagebox下新建messagebox.jsimport messageBoxVue from './messageBox.vue'// 定义插件...原创 2020-03-16 23:05:01 · 4747 阅读 · 1 评论 -
VUEJS项目实践四之自定义键盘指令(按键即获取焦点)
上回书说到怎么在vue.js中添加bootstrap样式,这次来写一下键盘按键指令吧~一、先来说一下vue.js本来就有的按键指令吧~这个就灰常的简单和方便啦~1、随便找一个vue页面文件,在<template>标签里写一个测试用的输入框<div> <input type="text" @keyup.13="showDialog()"><...原创 2020-03-11 21:49:43 · 953 阅读 · 1 评论 -
VUEJS项目实践三之引入bootstrap
上回书说到,用vuejs写个路由页面。这次写如何整合bootstrap。不得不说,bootstrap的样式确实比较好看。一、首先去官网把bootstrap下载下来bootstrap中文网放在项目的assets目录下还不到9点就好困哦~~~二、引入bootStrap还需要引入jquery和popper.js1、先安装一下jquery和popper.js在package.json里 "...原创 2020-03-02 21:27:55 · 495 阅读 · 0 评论 -
VUEJS项目实践二之复杂单页应用路由及视图篇
上回书说到,如何在我心爱的16寸mac pro上快速构建了一个Vuejs项目。本篇将记录如何使用VueRouter做出不同路由的复杂单页应用。一、准备工作1、首先我们用idea打开工程,来看看项目的目录结构好的,真是一目了然,不介绍基础,赶时间,官网有。2、我们启动项目以后,看到的这个初始页面它在这个HelloWorld.vue文件里打开就会发现,这个vue文件没有标亮,看起来很...原创 2020-02-20 23:26:08 · 564 阅读 · 0 评论 -
VUEJS项目实践一之mac快速搭建vuejs项目
这个部分乳齿简单,是为了系列完整性,才快速记录一下。1、首先全局淘宝镜像,因为下载快,用过npm都知道,不解释。终端输入命令sudo npm install -g cnpm --registry=https://registry.npm.taobao.org2、快速搭建用工具vue-cli,全局安装一下终端输入命令sudo cnpm install --global vue-cli...原创 2020-02-20 22:17:41 · 248 阅读 · 0 评论 -
mac上安装npm-通过清华镜像安装Homebrew经验总结
一、终端输入brew -vbrew -v终端返回zsh: command not found: brew二、安装homeview,点击此处跳转到Homeview终端输入命令/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"后面就开始下...原创 2020-02-20 20:06:30 · 2135 阅读 · 0 评论