Vue
IT淘金者
立志成为行业布道师的一名前端程序猿
展开
-
Echart 5.0+版本报错Error in data(): “TypeError: Cannot read properties of undefined (reading ‘graphic‘)“
首先第一步需要检查echarts的导入方式,在5.0以后的版本,echarts做了比较大的调整,在vue中引入时必须使用如下命令 // import echarts from 'echarts' 这种方式高版本不支持 import * as echarts from 'echarts' vue.prototype.$echarts = echarts其次在结合vue-echarts使用时才可以使用如下命令添加渐变color: new this.$echarts.graphic.LinearGra原创 2021-09-30 09:42:58 · 5537 阅读 · 3 评论 -
Webpack/Vue-cli两种方式加载markdown文件并实现代码高亮
准备的资源:highlight.js : 实现代码高亮,通过npm install highlight.js -D安装vue-markdown-loader:解析md文件的必备loader,通过npm install vue-markdown-loader -D安装下面我们分两个场景来说明一下md文件的解析Webpack在项目根目录下创建build/webpack.config.js// 在webpack.config.js中添加规则{ test: /\.md$/, lo原创 2020-12-14 19:29:24 · 1143 阅读 · 0 评论 -
Vue组件通信原理剖析(三)provide/inject原理分析
首先我们先从一个面试题入手。面试官问: “Vue中组件通信的常用方式有哪些?”我答:1. props2. 自定义事件3. eventbus4. vuex5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject6. 此外还有一些非props特性$attrs、$listeners面试官追问:“那你能分别说说他们的原理吗?”我:[一脸懵逼]????在介绍provide和inject之前我们先简单看看其他几个常用属性。$pare原创 2020-12-10 14:55:17 · 1613 阅读 · 1 评论 -
Vue组件通信原理剖析(二)全局状态管理Vuex
首先我们先从一个面试题入手。面试官问: “Vue中组件通信的常用方式有哪些?”我答:1. props2. 自定义事件3. eventbus4. vuex5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject6. 此外还有一些非props特性$attrs、$listeners面试官追问:“那你能分别说说他们的原理吗?”我:[一脸懵逼]????今天我们来看看Vuex内部的奥秘!如果要看别的属性请移步vuexVuex集中原创 2020-12-10 14:48:11 · 540 阅读 · 0 评论 -
Vue组件通信原理剖析(一)事件总线的基石 $on和$emit
首先我们先从一个面试题入手。面试官问: “Vue中组件通信的常用方式有哪些?”我答:1. props2. 自定义事件3. eventbus4. vuex5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject6. 此外还有一些非props特性$attrs、$listeners面试官追问:“那你能分别说说他们的原理吗?”我:[一脸懵逼]????下面我们就来一一看看他们内部的奥秘!props解决问题:父给子传值// ch原创 2020-12-10 14:42:41 · 1372 阅读 · 0 评论 -
vue项目(webpack+mintui),使用hbuilder打包app - 小小人儿大大梦想 - 博客园
一、配置config/index.js本人没有配置index.js文件,就开始进行了打包,结果最终效果是页面空白,解决了空白,接着底部图标(我是用的阿里巴巴图片)资源找不到。所以配置这步比较重要。(1)页面空白的解决:打开config/index.js,将build模块的assetsPublicPath值改为’./’ 1 assetsPublicPath:'./', 发布路径 (2)css引用图片资源找不到问题:因为打包后路径发生变化,导致..转载 2020-11-11 14:29:45 · 346 阅读 · 0 评论 -
webpack+vue+mui学习心得
引入mui1.不需要npm安装;直接从官方下载丢进来2.那就是全局引用了;没错,就是index.html里直接引入,当然也可以main.js引入,随意啦!so easy3.找到webpack.base.conf.js,在module与plugins之间插入以下代码:4.这样就可以在项目里面直接用了.然就是mui与vue-router及点击事件会有一些冲突的问题;在mounted里加入这行代码:路由就可以跳转了eg:就直接代替a标签了;可..转载 2020-11-11 14:29:04 · 179 阅读 · 0 评论 -
手摸手,带你用vue撸后台 系列一(基础篇) - 掘金
完整项目地址:vue-element-admin系列文章:手摸手,带你用 vue 撸后台 系列一(基础篇) 手摸手,带你用 vue 撸后台 系列二(登录权限篇) 手摸手,带你用 vue 撸后台 系列三 (实战篇) 手摸手,带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板) 手摸手,带你用 vue 撸后台 系列五(v4.0 新版本) 手摸手,带你封装一个 vue component 手摸手,带你优雅的使用 icon 手摸手,带你用合理的姿势使用 webpack4(转载 2020-11-10 14:37:08 · 1611 阅读 · 0 评论 -
vue路由传参的三种基本方式 - 流年的樱花逝 - SegmentFault 思否
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。父组件中:<li v-for="article in articles"@click="getDescribe(article.id)">methods:方案一: getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}.转载 2020-11-10 14:36:43 · 116 阅读 · 1 评论 -
Vue表单类的父子组件数据传递示例_vue.js_脚本之家
使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面。在这里记录一下我平时常用的处理方式,这篇文章主要记录父子组件间的数据传递,非父子组件主要通过Vuex处理,这篇文章暂时不作说明。与文档里给的方案一样,父组件向子组件传递数据主要通过 props,子组件向父组件传递数据主要通过触发器 $emit(),只是在用法上会有些不同。1、传递基本类型数据当子组件转载 2020-11-10 14:36:33 · 899 阅读 · 0 评论 -
【vue-router①】router-link跳转页面传递参数 - 进击的前端之路(偶尔爬坑java小路) - SegmentFault 思否
在vue项目中,往往会遇到这样的情况,就是要实现在一个循环列表中,点击其中一条跳转到下个页面,然后将这一条的相关数据带到下个页面中显示,这是个循环列表,无论点哪一条都是跳到相同的页面,只是填的数据不一样,这个时候就需要实现跳转的时候一起把参数携带过去。1、我在项目中想要点击v-for的<li>,然后跳到下个页面的表格,顺带将参数传递过去。如下图:这里实现的是第一个组件跳转到第二个组件的时候将待办任务的id传递过去,第二个组件接收id后提交给后台请求列表的数据。实现如下:第一个组件里转载 2020-11-10 14:36:22 · 503 阅读 · 0 评论 -
vue项目配置eslint(附visio studio code配置)
eslint基础环境搭建 全局安装eslint:npm install eslint -g 项目eslint初始化:eslint --init,按团队或自己的编程风格回答三道题。 ? How would you like to configure ESLint? Use a popular style guide ? Which style guide do you want to follow? Standard ? What format do you wan转载 2020-11-10 14:36:09 · 930 阅读 · 0 评论 -
推荐21个顶级的Vue UI库! – TalkingData‘s Blog
推荐21个顶级的Vue UI库!最近,随着“星球大战”(指 GitHub 的 Star 数量大比拼)的爆发,Vue.js 在 GitHub 上的 Star 数超过了 React。虽然 NPM 的下载量仍然落后于 React,但 Vue.js 的受欢迎程度似乎在持续增长。1、VuetifyStar 数为 11K,提供了 80 多个 Vue.js 组件,这些组件是根据谷歌 Material Design 指南实现的。Vuetify 支持所有平台上的浏览器,包括 IE11 和 Safari 9转载 2020-11-10 14:34:08 · 579 阅读 · 0 评论 -
Vue中定义全局变量与常量的各种方式详解_vue.js_脚本之家
前言本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入.尝试1:创建 global.js 并且在其中定义 1 let a = 10; 在入口文件中引入 global.js 1 import './global.js' 在项目中使用: 1.转载 2020-11-10 14:33:52 · 1946 阅读 · 0 评论 -
在webpack中使用eslint配置(详细教程)-js教程-PHP中文网
本篇文章主要介绍了webpack引入eslint配置详解,现在分享给大家,也给大家做个参考。webpack中eslint使用首先,要使webpack支持eslint,就要要安装 eslint-loader ,命令如下:1npm install --save-dev eslint-loader在 webpack.config.js 中添加如下代码:123456789{test: /\.js$/,loader: 'eslint-loader',enforce: "...转载 2020-11-09 15:11:28 · 847 阅读 · 0 评论 -
Vue 下拉刷新及无限加载组件 - 有你便是晴天 - 博客园
原文https://github.com/wangdahoo/vue-scroller主题Vue.jsVue ScrollerVue Scroller is a foundational component ofVonic UI. In purpose of smooth scrolling, pull to refresh and infinite loading.DemoChange Logsv0.3.9 add getPosition method for scrolle...转载 2020-11-09 15:09:30 · 176 阅读 · 0 评论 -
vue-cli webpack配置分析 - chenBright - SegmentFault 思否
相信vue使用者对vue-cli都不会陌生,甚至可以说,很熟悉了,但对其webpack的配置可能知之甚少吧。过完年回来后,我接手了公司的新项目。新项目是一个spa。很自然,我就想到了vue-cli脚手架了,当时研究一下它的webpack配置。于是,就有了其他的内容。今天这篇文章,是在原来的基础上,增加了一些新版本的内容,但实质上变化不大。说明此仓库为vue-cli webpack的配置分析,其实只是在源码中加上注释而已。大家查看详细分析,可以从后面提到的入口文件开始查看。分析不包括che转载 2020-11-06 16:32:23 · 465 阅读 · 0 评论 -
vue项目如何打包扔向服务器 - Hi-Sen - 博客园
当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中。我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上。如果是 vue-cli (非 simple 脚手架),这篇文章可能有点帮助。地址链接:vue-cli 如何打包上线先来描述一下期间遇到的问题有哪些:1、打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404。2、打包好的静态资源均是...转载 2020-11-06 16:31:55 · 399 阅读 · 0 评论 -
vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园
在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过。这里以axios请求为例实现了设置统一请求头添加token, 其中token在登录时被存入了localStorage中。同时拦截器利用new cancelToken与定义的cancelPending方法实现了可以取消正在pending状态的请求,什么情况会需要取消请求呢?如下两种情况:1.有一个局部分页时,用户快速点击第2页,然后继续点击第3页,如果网络不太稳定.转载 2020-11-04 19:25:26 · 1434 阅读 · 0 评论 -
vue 集成html5 plus - 懒懒de尐彪 - 博客园
首先要安装一个包 vue-html5plus npm i vue-html5plus -S然后配置这个文件在main.js添加一串代码 var onPlusReady = function (callback, context = this) { if (window.plus) { callback.call(context) } else { document.addEventListener('plusready', callba.转载 2020-11-02 18:59:38 · 539 阅读 · 0 评论 -
Visual Studio Code 使用 ESLint 增强代码风格检查 - gyzhao - 博客园
前言在团队协作开发中,为了统一代码风格,避免一些低级错误,应该设有团队成员统一遵守的编码规范。很多语言都提供了Lint工具来实现这样的功能,JavaScript也有类似的工具:ESLint。除了可以集成到构建工具中(如:Gulp)在构建过程中检查代码风格以外;还可以通过将ESLint和代码编辑器相结合以提供代码风格的实时校验。这里将介绍如何在Visual Studio Code使用ESLint来提供代码风格的实时校验。安装 Visual Studio Code ESLint 插件打开 Visua转载 2020-10-31 16:01:05 · 493 阅读 · 0 评论 -
VSCode配合eslint进行JavaScript质量检查
写在开始前:如有不准确的地方希望大家提出,文章可以改知识不能错。创建一个项目这里已node项目为例npm init 根据提示填写相关信息安装eslintnpm install eslint --save也可以全局安装npm install eslint -g初始化 eslint文件eslint --init执行命令后会出现如下提示image.pngAnswer Questions about yo...转载 2020-10-31 15:54:37 · 618 阅读 · 0 评论 -
使用PM2搭建在线vue.js开发环境(以守护进程方式热启动)
项目以vue.js+layUI的作为前端开发技术栈,需要有一个在线的环境供项目成员实时查看效果,总不能每次都webpack打包发布后才能看到效果吧!刚开始就简单使用npm run dev命令热启动,但是shell命令窗口退出后,热启动也就失效了!不能电脑一直都不关吧,后面考虑到用守护进程的方式运行热启动命令,就想到有一个好的进程管理工具,就是PM2。1. pm2 是什么?日常开发中需要启动一个node项目,需要用npm run …,,如果终端被关掉,程序也就自动停止,有时候几个项目一起跑起来,好几个转载 2020-10-31 15:52:48 · 520 阅读 · 0 评论 -
深入理解vue中的slot与slot-scope
写在前面vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率、使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”的想法,于是就关闭了vue的说明文档。实际上,插槽的概念很简单,下面通过分三部分来讲。这三部分也是按照vue说明文档的顺序来写的。进入这三部分之前,先让还没...转载 2020-03-16 23:04:39 · 297 阅读 · 0 评论 -
VScode 结局插件prettier和vetur格式化冲突
先上配置代码{ "workbench.iconTheme": "vscode-icons", "workbench.startupEditor": "newUntitledFile", "workbench.colorTheme": "One Dark Pro", "editor.fontSize": 14, "editor.tabSize": 2, "editor.mi...原创 2020-03-14 23:38:31 · 2862 阅读 · 1 评论 -
记一次vue项目yarn打包环境配置失效的解决方案
项目中使用到了yarn打包工程,主要有以下几个命名。# build for production with minificationyarn run build# build for production and view the bundle analyzer reportyarn run build --report# 自定义API地址baseurl="http://127.0...原创 2020-03-13 23:22:44 · 2330 阅读 · 0 评论 -
vue 项目初始化时,npm run dev报错解决方法
错误如下:npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! travel@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`npm ERR! Exit status 1npm ERR!npm ERR! Fa...转载 2019-06-21 10:16:03 · 3614 阅读 · 1 评论 -
Vue实现组件props双向绑定解决方案
注意: 子组件不能直接修改prop过来的数据,会报错方案一: 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch data副本,emit一个函数 通知到组件外 HelloWorld组件代码如下:(代码里面有相应的注释)<template> <div cl...转载 2019-06-27 17:57:48 · 809 阅读 · 0 评论 -
vue移动端UI框架——Vant全局引入vs局部引入
全局引入1.在main.js中全局引入全部vant组件优点:可以在所有vue文件的template中定义所需组件缺点:打包发布时会增加包的大小,Vue的SPA首屏打开时本来就有些慢,同时不能在js中使用类似Toast功能的组件代码如下:// main.jsimport Vant from 'vant'import 'vant/lib/vant-css/index.css'Vu...原创 2019-08-15 21:28:02 · 11539 阅读 · 1 评论 -
前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)持续更新
Vue面试题生命周期函数面试题 1.什么是 vue 生命周期2.vue生命周期的作用是什么3.第一次页面加载会触发哪几个钩子4.简述每个周期具体适合哪些场景5.created和mounted的区别6.vue获取数据在哪个周期函数7.请详细说下你对vue生命周期的理解?vue路由面试题1.mvvm 框架...转载 2019-08-24 10:55:41 · 337 阅读 · 0 评论 -
vue从入门到精通之进阶篇(一)vue-router基础
路由原理传统开发方式 url改变后 立刻发起请求,响应整个页面,渲染整个页面SPA 锚点值改变后 不会发起请求,发起ajax请求,局部改变页面数据页面不跳转 用户体验更好SPAsingle page application(单页应用程序)前端路由锚点值监视ajax获取动态数据核心点是锚点值前端框架 Vue/angular/react都很适合开发单页应用基本...原创 2019-06-18 16:46:42 · 325 阅读 · 0 评论 -
详解Vuex常见问题、深入理解Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。 使用Vue开发项目时,通常我们就会遇到如下几种棘手的问题: 问题1:通过路由传递参数,我们会采用pa...转载 2019-06-25 16:24:39 · 815 阅读 · 0 评论 -
vue面试题,知识点汇总(有答案)
一. Vue核心小知识点1、vue中key值的作用key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。有相同父元素的子元素必须有独特的key。重复的key会造成渲...转载 2019-06-25 14:39:57 · 2155 阅读 · 0 评论 -
VSCode 初次写vue项目并一键生成.vue模版
1.安装vscode官网地址:https://code.visualstudio.com/2.安装一个插件,识别vue文件插件库中搜索Vetur,下图中的第一个,点击安装,安装完成之后点击重新加载微信图片_20180723174649.png3.新建代码片段文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定...转载 2019-06-21 11:13:32 · 423 阅读 · 0 评论 -
vscode: Visual Studio Code 常用快捷键
原文章地址:vscode: Visual Studio Code 常用快捷键官方快捷键说明:Key Bindings for Visual Studio Code主命令框F1或Ctrl+Shift+P: 打开命令面板。在打开的输入框内,可以输入任何命令,例如:按一下Backspace会进入到Ctrl+P模式 在Ctrl+P下输入>可以进入Ctr...转载 2019-06-19 09:33:37 · 294 阅读 · 0 评论 -
Vue UI 框架对比 element VS iview
element VS iview(最近项目UI框架在选型 ,做了个分析, 不带有任何利益相关)主要从以下几个方面来做对比使用率(npm 平均下载频率,组件数量,star, issue…)API风格打包优化与设计师友好性1,使用率(npm 平均下载频率,组件数量,star, issue…)npm 下载次数及issue目前明显未解决bug遗留数量 ,这个应该...转载 2019-06-18 22:44:02 · 7191 阅读 · 0 评论 -
5个Vue.js项目的令人敬畏的模板
开发人员查看使用SPA,Webpack,身份验证,GraphQL,文档和测试的Vue开发人员的资源。你准备开始一个重要的Vue项目吗?为了确保从坚实的基础开始,您可以使用模板(也就是样板,骨架,起动器或脚手架)而不是从npm init或开始vue init。许多经验丰富的开发人员已经掌握了以开源模板的形式构建高质量Vue应用程序的智慧。这些模板包括最佳配置和项目结构,最佳第三方工具以及...转载 2019-06-13 11:29:52 · 3556 阅读 · 0 评论 -
vue从入门到精通之基础篇(三)生命周期
生命周期定义:每个 Vue 实例在被创建时都要经过从创建倒挂载再到更新、卸载的一系列过程,同时在这个过程中也会运行一些叫做生命周期钩子的函数,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例。钩子函数的执行时间beforeCreate在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被...原创 2019-06-13 09:21:28 · 254 阅读 · 0 评论 -
vue从入门到精通之基础篇(二)组件
(1).局部组件的使用 渲染组件-父使用子组件1: 创建子组件(对象)var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }2: 在父组件中声明,根属性components:{ 组件名:组件对象 }3: 在父组件要用的地方使用 <组件名></组件名>在不同框架中,有的...原创 2019-06-13 09:19:07 · 193 阅读 · 0 评论 -
vue从入门到精通之基础篇(一)语法概要
(1).vue起步1:引包2:启动 new Vue({el:目的地,template:模板内容});options目的地 el内容 template数据 data 保存数据属性数据驱动视图(2).插值表达式{{ 表达式 }}对象 (不要连续3个{{ {name:‘jack’} }})字符串 {{ ‘xxx’ }}判断后的布尔值 {{ true }}三元...原创 2019-06-12 17:00:45 · 578 阅读 · 0 评论