为了请求QQ音乐的数据时的跨域问题，我们使用Node.js+Express搭建一个中间件可以直接在github:https://github.com/liaoqinwei/qqMusicApi拔取源码写的过程中借助文章整理的接口(需要原生的qq音乐接口即可访问)https://blog.csdn.net/weixin_33874713/article/details/88003925一、安装配置n

因为在职工作没有那么忙，且公司项目较简单，而且没有用到过框架enenen一直有在学习vue，但还是对真正的实战项目存在很多疑问，于是利用工作完成之余，在慕课网上跟了一个vue实战项目，虽然不是很复杂，但也全面的了解了企业级别

封装一个echarts子组件，父组件可以多次调用封装一个柱形图。柱形图和折线图的区别在于series数据中的type的类型不同，柱形图的type为bar,折线图的type为line，所以封装柱形图的和折线图是一样的，只是两者传入的参数不同封装一个bar类型的echarts图子组件：//引入基本模板letecharts=require('echarts/lib/echarts')//引入柱状图组件r

router.jsimportVuefrom"vue";importVueRouterfrom"vue-router";Vue.use(VueRouter);importhomefrom'../pages/home.vue';importnewsfrom'../pages/news.vue';varallRoutes=[{path:'/login',name:'login',meta:{title

MYvue.js主要作用监听属性变化classMYvue{constructor(options){this.$options=options;this.$data=options.data;//数据劫持this.observe(this.$data);this.$el=options.el;//包含Watcher创建newComplie(options.el,this)}//数据劫持observ

vue实战记录（一）-vue实现购物车功能之前提准备vue实战，一步步实现vue购物车功能的过程记录，课程与素材来自慕课网，自己搭建了express本地服务器来请求数据作者：狐狸家的鱼本文链接：vue实战

插件开发以vue-router为例importVuefrom'vue'//importVueRouterfrom'vue-router'importVueRouterfrom'../MYRouter/index.js'Vue.use(VueRouter)//执行install方法constroutes=[{path:'/',redirect:'/goods'},{path:'/goods',nam

首先安装npmicross-envpackage.jsom"scripts":{"test":"cross-envscene=testwebpack--configwebpack.config.js","dev":"cross-envscene=devwebpack-dev-server--configwebpack.config.js","build":"cross-envscene=prodw

一、环境搭建1、安装Mock.js如果仅仅用作脱离后台的模拟数据，就安装在开发环境中：npminstallmockjs-D2、安装axios-mock-adapteraxios-mock-adapter是一款axios的请求模拟调试器，可以使用它来实现请求拦截并模拟后台回复。npminstallaxios-mock-adapter-D二、使用（1）建立文件在src/renderer目录下新建moc

项目设计与原理分析环境及知识准备运行环境构建环境编辑器基础知识业务开发流程技术选型构建工具MVVM框架选择模块化设计自适应方案设计代码维护及复用性设计的思考业务开发测试验证发布上线工程构建安装项目设计与原理分析css模块化设计设计原则设计方法代码书写js组件设计设计原则设计方法自适应基本概念工作原理SPA（单页面）设计设计意义工作原理写代码构建工具上线指导环境及知识准备运行环境Node8.9.1建

一、效果实现二、实现步骤1.待办事项的实现首先需要一个card容器，然后再在里面使用一个表格，再对表格进行增添和删除列。难点在于掌握对JS数组的操作和获取表格的当前行信息。我废话不多说，直接上代码；提交待办事项添加{{scope.row.title}}删除handleDelete(index,row){this.$confirm('确定要删除吗？','提示',{type:'warning'}).t

vuevue-routervuexvue/clitypescript高仿网易云音乐实现代码全方位解析前言:vue全家桶+TypeScript构建一款移动端音乐webApp项目的笔记项目源码地址（https://github.com/lang1427/vue-typescript-music）涉及功能:音乐播放器（播放进度条；播放列表；收藏歌单；删除播放列表中的歌曲；顶部歌单名过长滚动(通知信息)；

1、form中以下三个地方一定要注意要用:model不能用v-model@click="onSubmit('form')"中参数要加引号2、data处理data(){return{books:[],keywords:'',currentPage:1,pagesize:5,dialogFormVisible:false,form:{id:'',title:'',author:'',date:'',p

关于vuex的简单理解在这篇文章中已经提过了，如何在vuex中管理mock数据呢。这是效果界面，所用的数据是mock模拟所得，使用vuex的store存储管理模拟数据。这是我的store目录结构，分成几个模块，以其中planList模块为例进行讲解。1.配置Vuex在modules文件夹中新建一个文件planList.js，然后在modules/index.js中导入importplanListf

简易网站后台的搭建—分类功能的实现本文章是学习B站全栈之巅系列课程的学习笔记，利用笔记来吸收升华学到的知识。学习感受是，如果有一定的nodejs+mongoDB+vue的基础，加做过一两个相关的练手项目，再学习这个课程，你会发现原来搭建一个完整有基础功能的网站，是如此的简单，会有很大的收获。参考源码：https://github.com/morningClock/herohoner视频学习地址：点

目录样式重写事件重定义前台文件发送后台接受文件并处理前台接受返回数据vue-quill-editor是个较为轻量级富文本，但是在使用vue-quill-editor我们会发现，vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片比较大的话，富文本的内容就会很大，而且也不方便我们处理。所以这里需要来重新定义图片上传功能，当我们选择图片后将图片上传服务器，服务

前面我们有说到如何使用FontAwesome字体图标：vue实战开发008:引入FontAwesome字体图标，在我们使用vue时通常不会把数据写死，而是定义一个数据列表，再通过遍历来获取相应的数据，这里我们模仿

安装webpack全局安装：npmi-gwebpack目的：在任何目录中通过CLI使用webpack这个命令项目安装：npmi-Dwebpack目的：执行当前项目的构建安装失败：目录下存在一个以前的jQuery包安装成功使用实例思路1使用npminit-y初始package.json，使用npm来管理项目中的包2新建项目目录结构及index.html和main.js，实现隔行变色功能main.js

Vue实战视频-快餐店收银系统(共11集)2017-05-22分类：Vue.js视频教程/视频教程阅读(126832)评论(136)课程前言这是我网站恢复后写的第一篇文章，在关站这段时间里，群里的小伙伴们给了我很多支持

Vue项目实战（五）配置Axiosapi接口调用文件这一篇介绍v配置Axiosapi接口调用文件，公众号已经准备了vue实战教程，如果您有需要，可以在公众号回复“vue”获取。

核心思想A.利用失去焦点事件on-focus替换千分位符号this.formInfoData[name]=this.formInfoData[name].replace(/\,/g,'')B.利用验证绑定的事件处理数字(处理数字功能有待完善，因不支持负数，精度不够，jstoFixed方法对于数字精度处理有问题)呵呵呵哒主要是思想和应用，具体数字处理网上有很多实例。这里不做赘述。//验证处理对象的绑

Vue实战：公用组件拆分，结合毕设完成后台导航栏 一、创建文件夹将公用组件都放到common文件中 二、修改webpack.base.conf.js在webpack.base.conf.js添加别名’common

Web前端+移动端全套视频教程|12、小程序|01.小程序.rar|11、Vue|05.Vue实战练习.rar|04.VueUI框架Element-UI.rar|03.Vue路由.rar|02.Vue网络请求

项目的源代码在GitHub上：点击查看组件使用的细节点使用is属性解决模板标签上出现bug的情况在子组件定义data时，data必须是一个函数，而不能是一个对象（因为子组件会多次调用，每个子组件享用自己的数据，而不是像根组件享有一套数据，通过函数来返回数据，就是让每个子组件拥有独立的数据）ref：可以在子组件上定义不同的ref，然后就可以通过引用来取得子组件的数据注意：另外的两个案例的代码在Git

Vue实战1-登录状态的处理（token、前后端请求拦截、项目结构的处理）前端工程师必须要也能够了解后端代码的运行逻辑，全栈工程师就必须能够更加清楚的明白每个流程是如何工作的，并且做到让代码更加的复用性和简洁明了这个实战

实战-插件form-validate{{error}}constemailRE=/^(([^()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/constvalidationPlugin={install(V

Electron-vue实战（二）—请求Mock数据渲染页面作者：狐狸家的鱼本文链接GitHub：sueRimn一、环境搭建1、安装Mock.js如果仅仅用作脱离后台的模拟数据，就安装在开发环境中：npminstallmockjs-D2

后台信息管理功能的实现本文章是学习B站全栈之巅系列课程的学习笔记，利用笔记来吸收升华学到的知识。学习感受是，如果有一定的nodejs+mongoDB+vue的基础，加做过一两个相关的练手项目，再学习这个课程，你会发现原来搭建一个完整有基础功能的网站，是如此的简单，会有很大的收获。参考源码：https://github.com/morningClock/herohoner视频学习地址：点击这里物品管

配置环境，使用stylus语法下载stylus包npminstallstylus--savenpminstallstylus-loader--save建立HomeHeader主页头部组件，iconfont的使用，~~~建立一个iconfont文件夹放入上面的4个文件,在上一级目录放入iconfont.css,把css的路径修改在main.js中引入使用styl创建全局变量css，使通用的css引用

上一次我们搭好了vue的环境，也成功把网页跑起来了。但是我们还不知道这一切都是怎么实现的，现在来看看第一个页面。首先我们得知道webpack是什么，以及怎么用的。Webpack入门一小时包教会——webpack入门指南Webpack的工作方式是：把你的项目当做一个整体，通过你给定的主文件（如：index.js），将从这个文件开始找到你项目的所有依赖文件，使用loaders处理它们，最后打包成一个浏

初始文件全局安装vue-clinpminstallvue-cli-gvue-V初始化模板文件vueinittemplate(webpack)projectname(name)相关指令npmrundevnpmrunbuild单页应用多页应用单页:只加载一次页面切换块多页：每次页面跳转都要加载新的页面页面切换慢路由vue-router根据地址栏哈希的变换加载相应的组件htmlless预处理语言less

Electron-vue实战（三）—如何在Vuex中管理Mock数据作者：狐狸家的鱼本文链接：Vuex管理Mock数据GitHub：sueRimn在vuex中管理mock数据关于vuex的简单理解在这篇文章中已经提过了

1.css初始化（引入别人写好的CSS）2.初始化css引入，在index//基于1.（点击延迟0.3S）3.默认显示（跟目录，根据个人）4.一个谷歌插件vue-devtoolshttps://blog.csdn.net/flysun3344/article/details/78679145安装浏览器插件5.个人封装的CSS，（1pxborder）6.通过路径判断tabclass状态7.抽离出He

功能很简单，可以直接看图即可，代码放在下面，看前记得点个赞，养成好习惯哦，关注我也可以的哦，因为我时常会出很多Vue小项目哦，当然有问题你在底下评论说话呀Vue实战系列教你使用Vue实战轮播图案例（效果图

功能很简单，可以直接看图即可，代码放在下面，看前记得点个赞，养成好习惯哦，关注我也可以的哦，因为我时常会出很多Vue小项目哦，当然有问题你在底下评论说话呀Vue实战系列教你使用Vue实战笔记本案例（效果图

vuex的基本使用store.jsimportVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);//定义属性varstate={count:6,country:'中国'};//定义gettersvargetters={count(state){returnstate.count},isEvenOrOdd(state){returnstate.count

南京三月之旅工作小结鑫探索http://info.andlinks.com（线上地址，可看）vue全家桶2.0带webpack全部可配置项的pc端项目接手项目一期是做理财产品洞察模块（包括发行态势和产品列表）鑫探索http://info.andlinks.com（线上地址，可看）vue全家桶2.0带webpack全部可配置项的pc端项目接手项目一期是做理财产品洞察模块（包括发行态势和产品列表）整个

解决element-ui中upload组件使用多个时无法绑定对应的元素以前写的项目关于图片上传的都是单张或几张图片上传（主要是基于vue的element），图片路径都是固定写的，所以遇见过列表中多个上传图片的问题，先看下常用的形式正常操作element里面的属性都能满足，当列表中要上传时就不行了，看下实际需求如下部分代码列表中循环的行图片操作代码接收需要的其它参数首先列表中的数据都是动态获取的，所

自定义工具Vue-Quill-Editor自带的工具栏还算挺丰富的，但是可能还是无法满足我们的需求，这时我们就需要根据项目自定义功能些功能，比如说想CSDN中的文本编辑有个撤销和重做的的功能，这里我们也来尝试下功能拓展，给Vue-Quill-Editor添加撤销和重做工具。新增工具样式首先我们需要添加样式到工具栏中，这里我用最简单的JavaScript来实现，在custom中添加一个新的列表，定义

目录组件安装组件引用添加模板初始化编辑器常用属性配置扩展插件使用之前分享了一篇vue实战021:Vue-Quill-Editor富文本编辑器使用，有网友说TinyMCE更好用，所以今天来分享下Vue中使用

今天来优化下Vue-Quill-Editor富文本编辑器，在编辑的工具栏中我们可以看到各式各样的图标，很多时候我们容易忘记图标对应的功能是什么，所以这里我们为其添加文字提示，当我将鼠标放到图标上时显示对应的功能提示，这样体验会好很多，下面是演示图。因为Vue-Quill-Editor是人家封装的组件，所以这里我们直接用JavaScript来处理，首先我们需要先获取到对应图标的类名，这里我们可以通过

博客站对多的就是文章了，要想写出好看的文章格式离不开功能强大的富文本编辑器，今天写一个富文本编辑页来完善博客中的文章编写功能，富文本有很多插件可以使用，这里我选择了vue-quill-editor，这是一款基于Quill、适用于Vue2的富文本编辑器。下载安装Vue-Quill-Editorvue-quill-editor插件安装，这个很简单直接在项目中打开cmd，运行命令：npminstallv

TinyMCE插入图片默认的是直接插入图片地址的，而通常我们希望能直接将图片上传至我们的服务器并返回图片的服务器地址，前面在vue实战024:Vue-Quill-Editor自定义图片上传中也提到了图片上传

项目摘要vhr是一个基于SpringBoot+Vue技术栈开发的前后端分离项目，项目使用SpringBoot2.1.8来开发，集成了当前企业级开发中众多的热门技术点，如消息中间件、Redis缓存、SpringBoot+Vue+ElementUI技术栈等等。技术选型核心框架：SpringBoot2.1.8安全管理：SpringSecurity持久层框架：MyBatis缓存：Redis数据库：MySQ

今天在上慕课老师fishenal的vue实战课程的时候，有一个轮播图组件实现，在跟着做的时候，自己也踩了一些坑。此外，在原课程案例的基础上，我加入了不同方向的滑动功能。

1.模块导入我是在自己的一个项目中使用，封装了一个Scroll的组件，所以我在现有项目中导入模块：npminstallbetter-scroll--save2.创建实例注意：在创建实例的时候我们需要知道应该在什么地方创建，创建实例时我们要考虑到这个滚动模块应该什么时候调用，是在页面加载前，还是页面加载后，很明显我们使用滚动模块的时候最好在实例被挂载之后使用，因为实例被挂载前界面没有内容，滚动就显得

1、使用v-for循环的时候报错这是因为我们安装了ESLint插件，对vue进行了eslint检查，只需将这个规则检查屏蔽掉即可，具体操作如下：文件–》首选项–》设置–》在搜索框中输入：vetur.validation.template–》找到vetur.validation.template：true–》将vetur.validation.template：true在右栏框中进行重置为false

今天继续下一个功能，那就是轮播图，在首页我们经常可以看到一个轮播展示区域，今天我们就来实现这个功能，这里我看了很多别人写轮播，基本都是用JavaScript或者别人封装好的组件来实现的轮播功能，因为vue没法像JavaScript那样通过offsetleft来获取当前元素的偏移位置，所以在写组件滑动的时候总是力不从心，最后还是用JavaScript写或者别人封装的组件来实现，其实vue还是可以实现

配置开发时的前端工程（vue-loader+webpack）首先打开终端，我们先来用npminit来初始化项目E:\vue实战\vue_web>npminitThisutilitywillwalkyouthroughcreatingapackage.jsonfile.Itonlycoversthemostcommonitems

项目摘要vhr是一个基于SpringBoot+Vue技术栈开发的前后端分离项目，项目使用SpringBoot2.1.8来开发，集成了当前企业级开发中众多的热门技术点，如消息中间件、Redis缓存、SpringBoot+Vue+ElementUI技术栈等等。技术选型核心框架：SpringBoot2.1.8安全管理：SpringSecurity持久层框架：MyBatis缓存：Redis数据库：MySQ